:root {
  color-scheme: light;
  --bg: #f6f7f4;
  --panel: #ffffff;
  --panel-2: #eef3ef;
  --ink: #17211c;
  --muted: #66736c;
  --line: #dce3dd;
  --brand: #285d50;
  --brand-2: #c6563a;
  --warn: #b78312;
  --danger: #b33434;
  --ok: #2d6f48;
  --shadow: 0 18px 48px rgba(21, 35, 29, 0.09);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
}

.sidebar {
  background: #18251f;
  color: #eef6f1;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow: hidden;
}

.brand {
  display: grid;
  gap: 3px;
}

.brand strong {
  font-size: 18px;
}

.brand span,
.user-card span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 7px;
  overflow: auto;
  padding-right: 2px;
}

.nav button {
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius);
}

.nav button.active,
.nav button:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.user-card {
  margin-top: auto;
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
}

.main {
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.topbar h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 16px;
}

.grid > * {
  /* Grid items default to min-width:auto (their content's min-content
     size), which blocks a track from ever shrinking below a wide child --
     the classic "grid blowout" overflow bug. Zeroing it here lets every
     .grid layout in the app actually shrink/wrap under real width
     pressure (e.g. the sidebar eating fixed space at in-between viewport
     widths) instead of overflowing past the page edge. */
  min-width: 0;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Assigned Scoring: the paper list takes the left third, the paper being read
   and scored the right two thirds (the narrow-screen rule further down still
   stacks them). */
.grid.queue-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Student Papers screen only: the paper list on top, the selected paper's
   full detail (prompt, timer/table controls, the writing box -- which can
   now grow quite tall via its own Expand toggle) below it, rather than
   squeezed into one column of a side-by-side pair. Single column, so
   document order alone (list markup first, detail markup second) is what
   puts the list on the first row and the detail on the second. */
.grid.papers-stack {
  grid-template-columns: 1fr;
}

/* Inside the "All Papers" panel (the stacked top row above): filters in a
   narrower left column, the paper list in a wider right column, instead of
   each spanning the full panel width stacked on top of each other with a
   lot of unused space down either side. The narrow breakpoint still
   collapses this back to one column via the existing ".grid.two" rule
   there, since this wrapper carries that class too. */
.papers-filter-split {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  align-items: start;
  margin-top: 4px;
}

/* The filter fields themselves drop to one per row in that narrower
   column -- two-across (as this is in the full-width .paper-filters
   elsewhere) would be too cramped at ~300px. */
.papers-filter-split .paper-filters {
  grid-template-columns: 1fr;
}

.prompt-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.prompt-summary div {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.prompt-summary span,
.editor-note {
  color: var(--muted);
}

.prompt-layout {
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  align-items: start;
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Dashboard header: district label + title on the left, ESU 1 logo on the
   right at exactly their combined height (18px label + 2px gap + 32px
   title = 52px), faded. multiply drops the logo PNG's white background
   into whatever the page background is. */
.topbar.dashboard-topbar {
  align-items: flex-start;
}

.topbar .dashboard-district {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.dashboard-topbar h1 {
  line-height: 32px;
}

.dashboard-brand {
  display: flex;
  flex-shrink: 0;
}

.dashboard-brand img {
  height: 52px;
  width: auto;
  opacity: 0.45;
  mix-blend-mode: multiply;
}

.users-layout {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: start;
}

.users-table-panel {
  grid-column: 1 / -1;
}

.users-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(130px, 0.8fr) minmax(190px, 1fr) minmax(150px, 0.8fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

/* Search only -- the Students table's old Teacher/Class/Writing time/
   Status/Sort dropdowns were replaced by sortable column headers. */
.student-controls {
  display: grid;
  grid-template-columns: minmax(240px, 420px) minmax(180px, 260px);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.compact-grid {
  gap: 8px;
}

.panel,
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel {
  padding: 18px;
}

.card {
  padding: 14px;
}

.prompt-card-list {
  display: grid;
  gap: 10px;
}

.archived-prompts {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.archived-prompts summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  min-height: 40px;
  list-style: none;
}

.archived-prompts summary::-webkit-details-marker {
  display: none;
}

.archived-prompts summary::before {
  content: "▸";
  color: var(--muted);
  transition: transform 140ms ease;
}

.archived-prompts[open] summary::before {
  transform: rotate(90deg);
}

.archived-prompts summary .status {
  margin-left: auto;
}

.archived-prompts[open] summary {
  margin-bottom: 10px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2,
.section-title h3 {
  margin: 0;
  font-size: 17px;
}

.section-title p,
.muted {
  color: var(--muted);
}

.btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.btn {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn.secondary {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn.warning {
  background: var(--warn);
}

.btn.danger {
  background: var(--danger);
}

.btn.google {
  background: #fff;
  color: #26322d;
  border: 1px solid var(--line);
}

.btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.retention-preview {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.retention-preview p {
  margin: 6px 0 0;
  color: var(--muted);
}

.btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: boot-spin 0.7s linear infinite;
}

.field {
  display: grid;
  gap: 6px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
}

.checkbox-row input[type="checkbox"] {
  width: auto;
}

.field label {
  font-weight: 650;
  font-size: 12px;
}

.input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

.essay {
  min-height: 440px;
  line-height: 1.65;
}

/* Expanded mode (Admin > Student Papers) auto-grows the box to the essay's
   full scrollHeight in JS so the whole thing shows with no internal
   scrollbar -- the native drag-to-resize handle inherited from the base
   `textarea` rule above fights with that: a scroll/trackpad gesture that
   lands a pixel onto the bottom-right corner grabs the resize handle instead
   of scrolling the page, silently shrinking the box (the JS "expanded" flag
   and the Expand/Collapse button's own label are untouched by this -- it's
   purely the browser's native resize, not a state change) until the next
   re-render re-measures and fixes it. Disabling resize here removes the trap
   entirely; collapsed mode is untouched and keeps the manual drag handle. */
.essay.expanded {
  resize: none;
}

.prompt-box {
  background: #f0f4f1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.perspectives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.perspective {
  background: white;
  border-left: 4px solid var(--brand-2);
  padding: 10px;
  border-radius: 4px;
}

.status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  background: var(--panel-2);
  color: var(--brand);
  white-space: nowrap;
}

.status.warn {
  background: #fff4d8;
  color: #805600;
}

.status.danger {
  background: #fae2e2;
  color: #8b2020;
}

.submit-alert {
  flex-basis: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fae2e2;
  color: #8b2020;
  border: 1px solid #f2b8b8;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

.submit-success {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e1f2e8;
  color: #245c3c;
  border: 1px solid #a9d8bd;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.status.ok {
  background: #e1f2e8;
  color: #245c3c;
}

/* A student writing right now (Student Papers). */
.status.live {
  background: #e4ecf7;
  color: #2c4f84;
}

.paper-list .status {
  margin-left: 6px;
  vertical-align: 1px;
  font-weight: 600;
}

/* "Not started" on the Students table: present but deliberately quiet, so
   the students who HAVE started stand out when scanning the column. */
.status.idle {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.move-panel {
  display: grid;
  gap: 6px;
  background: #f6f8f6;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}

.move-panel p {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.users-table {
  min-width: 1180px;
  table-layout: fixed;
}

/* The admin view carries two more columns than the staff view, and the two
   widest cells in the row (the password field with its Show button, and the
   three action buttons) are the ones an even split starves. With
   table-layout: fixed the browser divides the width evenly unless told
   otherwise, which left Reset password wrapping onto its own line and made
   every row three buttons tall. These widths sum to 100%; .table-wrap
   already scrolls horizontally on narrower screens. */
.users-table-admin {
  min-width: 1260px;
}

.users-table-admin th:nth-child(1),
.users-table-admin td:nth-child(1) { width: 13%; }

.users-table-admin th:nth-child(2),
.users-table-admin td:nth-child(2) { width: 16%; }

.users-table-admin th:nth-child(3),
.users-table-admin td:nth-child(3) { width: 9%; }

.users-table-admin th:nth-child(4),
.users-table-admin td:nth-child(4) { width: 12%; }

.users-table-admin th:nth-child(5),
.users-table-admin td:nth-child(5) { width: 9%; }

.users-table-admin th:nth-child(6),
.users-table-admin td:nth-child(6) { width: 18%; }

.users-table-admin th:nth-child(7),
.users-table-admin td:nth-child(7) { width: 23%; }

/* The action buttons sit on one line at full width; the wrap on .btn-row is
   the fallback for a narrow window, not the normal case. */
.user-row-actions .btn-row {
  flex-wrap: nowrap;
}

.user-row-actions .btn {
  white-space: nowrap;
}

.users-table th,
.users-table td {
  padding: 10px 8px;
  vertical-align: middle;
}

.users-table input,
.users-table select {
  min-height: 44px;
  width: 100%;
}

.users-table .inline-input {
  font-size: 13px;
}

.user-name-col {
  width: 18%;
}

.user-email-col {
  width: 26%;
}

.user-role-col {
  width: 10%;
}

.user-district-col {
  width: 16%;
}

.user-table-col {
  width: 10%;
}

.user-password-col {
  width: 16%;
}

.user-action-col {
  width: 15%;
}

.user-row-actions .btn {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 30px;
}

.password-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}

.password-cell input {
  flex: 1;
  min-width: 0;
}

.password-cell .btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  min-height: 30px;
  white-space: nowrap;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* Header cells line up on one line across a row, whether a label wraps
   ("Student Number", "Writing Status") or not. */
thead th {
  vertical-align: middle;
}

/* Students table rows are mostly inline inputs/selects, which are taller
   than a line of text -- with the global vertical-align: top, the plain
   text cells (Student Number, District) sat high against the inputs.
   Center every cell on the row instead. */
.students-table td {
  vertical-align: middle;
}

.rubric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.score-grid button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.score-grid button.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.metric {
  display: grid;
  gap: 6px;
}

.metric strong {
  font-size: 28px;
}

.bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  /* Third column was a fixed 42px sized for "84%" alone; it now also carries
     the real headcount ("6 of 24 \u00b7 84%"), so it needs to size to content
     instead of clipping. */
  grid-template-columns: 130px 1fr auto;
  gap: 10px;
  align-items: center;
}

.bar-row strong {
  white-space: nowrap;
  font-size: 13px;
}

.bar-row-clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.12s ease;
}

.bar-row-clickable:hover,
.bar-row-clickable:focus-visible {
  background: #eef4f0;
  outline: none;
}

.dashboard-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #eef4f0;
  border: 1px solid #cfe3d6;
  font-size: 14px;
}

.schedule-panel .schedule-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #e1f2e8;
  border: 1px solid #a9d8bd;
}

.schedule-panel .schedule-banner:last-child {
  margin-bottom: 0;
}

.schedule-banner-class {
  font-weight: 600;
  color: #245c3c;
}

.schedule-banner-time {
  font-size: 18px;
  color: #245c3c;
}

.bar {
  height: 12px;
  background: #e5ece7;
  border-radius: 999px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.boot-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.boot-loading-content {
  display: grid;
  justify-items: center;
  gap: 14px;
  color: var(--text);
}

.boot-loading-content strong {
  font-size: 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.boot-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}

.login-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding: 64px 24px 40px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.94) 34%, #fff 100%),
    linear-gradient(135deg, #d4e9f2 0%, #f7fbfd 38%, #ffffff 100%);
}

.login-heading {
  display: grid;
  grid-template-columns: 54px auto;
  justify-content: center;
  align-items: center;
  column-gap: 22px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.login-heading h1 {
  margin: 0;
  font-size: 54px;
  line-height: 1.05;
  grid-column: 2;
}

.app-mark {
  width: 48px;
  height: 54px;
  border: 5px solid #2d8aa1;
  border-radius: 7px;
  position: relative;
  box-shadow: 0 5px 10px rgba(25, 95, 110, 0.18);
}

.app-mark::before,
.app-mark::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 9px;
  height: 4px;
  background: #2d8aa1;
  border-radius: 999px;
}

.app-mark::before {
  top: 13px;
  box-shadow: 0 10px 0 #2d8aa1;
}

.app-mark::after {
  width: 18px;
  right: auto;
  top: 34px;
  transform: rotate(-35deg);
  background: var(--brand-2);
}

.login-org-brand {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
}

.esu-logo {
  display: block;
  width: clamp(110px, 12vw, 160px);
  height: auto;
}

.login-art {
  position: absolute;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.left-art {
  left: -40px;
  bottom: 0;
  width: 42vw;
  height: 72vh;
  background:
    radial-gradient(circle at 36% 12%, #e8d9b7 0 6%, transparent 7%),
    linear-gradient(135deg, transparent 0 26%, rgba(120, 171, 193, 0.42) 27% 48%, transparent 49%),
    linear-gradient(30deg, transparent 0 38%, rgba(84, 137, 165, 0.28) 39% 62%, transparent 63%),
    linear-gradient(155deg, transparent 0 50%, rgba(64, 126, 151, 0.32) 51% 74%, transparent 75%);
  clip-path: polygon(0 8%, 75% 25%, 98% 62%, 70% 100%, 0 100%);
}

.right-art {
  right: 0;
  bottom: 0;
  width: 28vw;
  height: 42vh;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(60, 130, 145, 0.3) 9% 12%, transparent 13%),
    linear-gradient(130deg, transparent 0 20%, rgba(78, 148, 158, 0.3) 21% 33%, transparent 34%),
    linear-gradient(50deg, transparent 0 42%, rgba(78, 148, 158, 0.28) 43% 55%, transparent 56%),
    linear-gradient(#d9e8ed, #d9e8ed) bottom left / 80% 18px no-repeat;
}

.login-card {
  width: min(560px, calc(100vw - 36px));
  margin: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 42px rgba(20, 30, 36, 0.12);
  display: grid;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  background: #eef3ef;
}

.login-tabs button {
  min-height: 44px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.login-tabs button.active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 6px rgba(20, 30, 36, 0.08);
}

.login-panel {
  display: grid;
  gap: 16px;
  padding: 26px;
}

.login-panel[hidden] {
  display: none;
}

.login-panel h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 27px;
  font-weight: 700;
}

.login-panel p {
  margin: -6px 0 0;
}

.avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d7f6fa;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(47, 137, 156, 0.18);
}

.avatar::before,
.avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #2692a2;
}

.avatar::before {
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.avatar::after {
  bottom: 12px;
  width: 30px;
  height: 14px;
  border-radius: 20px 20px 8px 8px;
}

.staff-avatar {
  background: #ecf2df;
}

.staff-avatar::before,
.staff-avatar::after {
  background: var(--brand);
}

.login-card .input {
  min-height: 48px;
  font-size: 16px;
}

.login-submit {
  min-height: 52px;
  width: 100%;
  justify-self: stretch;
  background: #2189a1;
  font-size: 18px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 3px 9px rgba(23, 84, 99, 0.24);
}

/* Hover/focus feedback for the sign-in and sign-out buttons. */
.login-submit,
.btn.google,
.user-card .btn {
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-submit:hover:not([disabled]),
.login-submit:focus-visible {
  background: #1a6f83;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(23, 84, 99, 0.32);
}

.login-submit.secondary:hover:not([disabled]),
.login-submit.secondary:focus-visible {
  background: #dfe9e3;
  border-color: #b9c9bf;
}

.btn.google:hover:not([disabled]),
.btn.google:focus-visible {
  background: #f1f5f3;
  border-color: #b9c9bf;
}

.user-card .btn:hover:not([disabled]),
.user-card .btn:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--brand);
}

.start-assessment {
  min-height: 62vh;
  display: grid;
  place-items: center;
}

.start-card {
  width: min(640px, 100%);
  text-align: center;
  padding: 36px;
}

.start-card h2 {
  margin: 16px 0 8px;
  font-size: 34px;
}

.start-card .btn-row {
  justify-content: center;
  margin-top: 22px;
}

.timer {
  min-width: 128px;
  min-height: 54px;
  border-radius: var(--radius);
  display: inline-grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  background: #e8f3ef;
  color: var(--brand);
  border: 1px solid #cde0d7;
}

.timer.expired {
  background: #fae2e2;
  color: var(--danger);
}

/* Last minute of the countdown: a periodic red flash (not a fast strobe --
   roughly once every 7 seconds) so it reads as an urgent pulse rather than
   a distracting blink. */
.timer.critical {
  animation: timer-flash 7s ease-in-out infinite;
}

@keyframes timer-flash {
  0%, 12% {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
  }
  30%, 100% {
    background: #fae2e2;
    color: var(--danger);
    border-color: var(--danger);
  }
}

.timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.timer-toggle-btn {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.timer-toggle-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* Reading tools (Highlighter / Line Reader / Magnifier) for the prompt panel */
#promptContent {
  position: relative;
}

.scorer-essay-box {
  position: relative;
  /* Fits the whole essay by default; drag the bottom-right corner to resize. */
  height: auto;
  max-height: none;
  min-height: 120px;
  overflow: auto;
  resize: vertical;
}

.tool-toggle-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

mark.user-highlight {
  background: #fff176;
  padding: 0 1px;
  border-radius: 2px;
}

.line-reader-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(255, 214, 0, 0.28);
  border-top: 1px solid rgba(150, 110, 0, 0.4);
  border-bottom: 1px solid rgba(150, 110, 0, 0.4);
  pointer-events: none;
  z-index: 5;
}

.magnifier-lens {
  position: fixed;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 60;
  background: #fff;
}

.magnifier-inner {
  position: absolute;
  transform: scale(2.2);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Save/connection health indicator -- deliberately more noticeable than a
   plain online/offline dot, since the thing that actually matters to a
   student mid-essay is "is my writing saving right now", not just whether
   the network adapter is up. See .save-health-banner below for the
   persistent warning shown alongside it when saves are not going through. */
.connection-dot {
  display: inline-block;
  margin-left: 6px;
  font-size: 15px;
  line-height: 1;
  color: #2e8b57;
  vertical-align: middle;
  transition: color 0.2s ease;
}

.connection-dot.offline,
.connection-dot.trouble {
  color: var(--danger);
  animation: connection-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes connection-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.save-health-banner {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fae2e2;
  color: #8b2020;
  border: 1px solid #f2b8b8;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

/* Contrast/background adjustment for the writer screen (prompt + response) --
   an accommodation for low vision, light sensitivity, or color blindness,
   matching the real ACT test's own Color Contrast tool. Each mode below
   only sets a handful of custom properties; the actual visual rules are
   written once against those properties so adding a mode never means
   repeating a whole block of selectors. */
.writer-body[class*="contrast-"] {
  background: var(--contrast-bg);
  color: var(--contrast-fg);
  border-radius: var(--radius);
}

.writer-body[class*="contrast-"] .panel,
.writer-body[class*="contrast-"] .prompt-box {
  background: var(--contrast-bg);
  color: var(--contrast-fg);
  border: 1px solid var(--contrast-border);
}

.writer-body[class*="contrast-"] .perspective {
  background: var(--contrast-panel-alt, var(--contrast-bg));
  color: var(--contrast-fg);
  border-left: 4px solid var(--contrast-accent);
}

.writer-body[class*="contrast-"] textarea,
.writer-body[class*="contrast-"] .essay {
  background: var(--contrast-bg);
  color: var(--contrast-fg);
  border: 1px solid var(--contrast-border);
}

.writer-body[class*="contrast-"] .muted,
.writer-body[class*="contrast-"] .section-title p {
  color: var(--contrast-muted);
}

.writer-body[class*="contrast-"] .tool-toggle-btn.active {
  background: var(--contrast-accent);
  color: var(--contrast-accent-fg);
  border-color: var(--contrast-accent);
}

.writer-body[class*="contrast-"] mark.user-highlight {
  background: var(--contrast-accent);
  color: var(--contrast-accent-fg);
}

.writer-body.contrast-high {
  --contrast-bg: #fff;
  --contrast-fg: #000;
  --contrast-border: #000;
  --contrast-muted: #333;
  --contrast-panel-alt: #f2f2f2;
  --contrast-accent: #000;
  --contrast-accent-fg: #fff;
}

.writer-body.contrast-high-inverted {
  --contrast-bg: #000;
  --contrast-fg: #fff;
  --contrast-border: #fff;
  --contrast-muted: #ddd;
  --contrast-panel-alt: #111;
  --contrast-accent: #ffd400;
  --contrast-accent-fg: #000;
}

.writer-body.contrast-low {
  --contrast-bg: #e7e7e2;
  --contrast-fg: #4a4a46;
  --contrast-border: #c9c9c2;
  --contrast-muted: #6b6b66;
  --contrast-panel-alt: #ededE8;
  --contrast-accent: #8a8a82;
  --contrast-accent-fg: #fff;
}

.writer-body.contrast-cream {
  --contrast-bg: #fbf1d9;
  --contrast-fg: #2a2410;
  --contrast-border: #d8c9a3;
  --contrast-muted: #6b5f36;
  --contrast-panel-alt: #fffaf0;
  --contrast-accent: #8a6d1d;
  --contrast-accent-fg: #fff;
}

.writer-body.contrast-light-blue {
  --contrast-bg: #cfeaf5;
  --contrast-fg: #08262f;
  --contrast-border: #9fd3e8;
  --contrast-muted: #1c4a5c;
  --contrast-panel-alt: #e3f4fa;
  --contrast-accent: #1c6f8c;
  --contrast-accent-fg: #fff;
}

.writer-body.contrast-magenta {
  --contrast-bg: #e6a6e0;
  --contrast-fg: #2a0826;
  --contrast-border: #c96fc0;
  --contrast-muted: #5c1c54;
  --contrast-panel-alt: #efc4ea;
  --contrast-accent: #8c1c7c;
  --contrast-accent-fg: #fff;
}

.writer-body.contrast-white-black {
  --contrast-bg: #000;
  --contrast-fg: #fff;
  --contrast-border: #fff;
  --contrast-muted: #ddd;
  --contrast-panel-alt: #111;
  --contrast-accent: #ffd400;
  --contrast-accent-fg: #000;
}

.writer-body.contrast-yellow-blue {
  --contrast-bg: #1a1a94;
  --contrast-fg: #fbf9a0;
  --contrast-border: #4747c2;
  --contrast-muted: #d8d571;
  --contrast-panel-alt: #23238f;
  --contrast-accent: #fbf9a0;
  --contrast-accent-fg: #1a1a94;
}

.writer-body.contrast-gray-green {
  --contrast-bg: #9a9a78;
  --contrast-fg: #3f3f37;
  --contrast-border: #82826a;
  --contrast-muted: #55554a;
  --contrast-panel-alt: #a6a684;
  --contrast-accent: #5a5a52;
  --contrast-accent-fg: #fff;
}

/* Color Contrast dropdown menu (Tools row) */
.contrast-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  width: 260px;
  max-width: 80vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 40;
  font-size: 13px;
  text-align: left;
}

.contrast-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}

.contrast-option:hover {
  background: var(--panel-alt, #f2f2f2);
}

.contrast-option.selected {
  border-color: var(--brand);
}

.contrast-option .check {
  visibility: hidden;
  width: 14px;
  color: var(--brand);
  font-weight: 700;
  flex: none;
}

.contrast-option.selected .check {
  visibility: visible;
}

.contrast-option.contrast-swatch .label {
  flex: 1;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--swatch-bg);
  color: var(--swatch-fg);
}

.contrast-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}

.contrast-menu-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px 2px;
}

/* Highlighter Edit/Clear popup, opened by clicking an existing highlight */
.highlighter-popup {
  position: fixed;
  z-index: 60;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px 12px;
  font-size: 13px;
}

.highlighter-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 650;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.highlighter-popup-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.highlighter-popup-help,
.highlighter-popup-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 2px 4px;
}

.highlighter-popup-help {
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.highlighter-popup-close {
  font-size: 17px;
}

.highlighter-popup-body {
  display: flex;
  gap: 8px;
}

.highlighter-popup-body .btn {
  flex: 1;
  min-height: 34px;
  padding: 6px 10px;
}

/* "What do these buttons do?" help popover for the prompt tools row */
.tools-help-wrap {
  position: relative;
  display: inline-flex;
}

.tool-help-btn {
  min-height: 36px;
  min-width: 36px;
  padding: 8px 10px;
  font-weight: 700;
}

.tools-help-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  width: 260px;
  max-width: 80vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  z-index: 40;
  font-size: 12.5px;
  text-align: left;
}

.tools-help-popover h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.tools-help-popover dl {
  margin: 0;
}

.tools-help-popover dt {
  font-weight: 650;
  margin-top: 8px;
}

.tools-help-popover dt:first-child {
  margin-top: 0;
}

.tools-help-popover dd {
  margin: 2px 0 0;
  color: var(--muted);
}

.tools-help-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
}

.time-select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 6px 8px;
}

.compact-select {
  min-height: 30px;
  padding: 4px 6px;
  font-size: 13px;
}

.inline-input {
  width: 100%;
  min-width: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 8px;
  background: white;
}

.table-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.table-summary div {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: #fff;
}

.table-summary span,
.table-summary small {
  color: var(--muted);
}

.paper-list {
  display: grid;
  gap: 8px;
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

.paper-list button {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px;
}

.paper-list button.active,
.paper-list button:hover {
  border-color: var(--brand);
  background: #f0f6f3;
}

.paper-list span {
  color: var(--muted);
  font-size: 12px;
}

.paper-list .queue-slot {
  color: var(--brand);
  font-weight: 800;
}

.paper-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.paper-search {
  grid-column: 1 / -1;
}

.report-filter-panel {
  margin-bottom: 16px;
}

.report-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}

.report-search {
  grid-column: span 2;
}

.report-chart-title {
  align-items: end;
}

.report-chart-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 210px));
  gap: 10px;
}

.report-chart {
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.report-chart-row {
  display: grid;
  grid-template-columns: minmax(90px, 240px) minmax(0, 1fr) 64px;
  gap: 14px;
  align-items: center;
}

.report-chart-label,
.report-chart-value {
  display: grid;
  gap: 2px;
}

.report-chart-label span,
.report-chart-value span {
  color: var(--muted);
  font-size: 12px;
}

.report-chart-track {
  position: relative;
  height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

/* The all-district average, marked on top of the viewer's own bar. */
.report-chart-peer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink);
  /* The marker sits on top of the viewer's own bar, so it lands on the dark
     fill whenever the peer average is lower than their score. The halo is
     what keeps it visible there as well as on the empty track. */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
}

/* Visually hidden, but read out and available to assistive tech -- the bar
   track is a div, so a title attribute would not be announced. */
.report-chart-peer span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.report-chart-value span.up {
  color: var(--ok);
}

.report-chart-value span.down {
  color: var(--brand-2);
}

/* Widened only above the stacking breakpoint: below it every
   .report-chart-row collapses to a single column, and this selector is more
   specific than that rule, so it would otherwise win on phones. */
@media (min-width: 921px) {
  .report-chart.with-peer .report-chart-row {
    grid-template-columns: minmax(90px, 240px) minmax(0, 1fr) 96px;
  }
}

.report-chart-track > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #5e9b7c);
}

.domain-matrix-wrap {
  overflow-x: auto;
}

.domain-matrix {
  width: 100%;
  font-size: 13px;
  /* separate + border-spacing is what puts a surface gap between the filled
     cells, so each one reads as its own mark rather than as a continuous
     wash of colour. */
  border-collapse: separate;
  border-spacing: 2px;
}

.domain-matrix thead th {
  padding: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  vertical-align: bottom;
}

.domain-matrix thead th.is-metric {
  text-align: center;
}

.domain-matrix-sort {
  padding: 3px 5px;
  /* Cancels the padding above, so a sortable header's text lands exactly
     where a plain <th>'s does (Students, Reports, Domain Breakdown tables
     mix both) -- the padding only gives the hover highlight some room. */
  margin: -3px -5px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}

.domain-matrix-sort:hover {
  background: var(--panel-2);
  color: var(--ink);
}

.domain-matrix-sort span {
  font-size: 9px;
  color: var(--brand);
}

/* Not scoped to .domain-matrix -- the Student Results & Papers table
   (reportSortHeader) reuses this same sort-button component in a plain
   <table>, so the active-column emphasis needs to apply there too. */
thead th[aria-sort] .domain-matrix-sort {
  color: var(--ink);
}

.domain-matrix tbody th {
  padding: 6px 12px 6px 4px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.domain-matrix tbody th span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.domain-matrix-cell {
  min-width: 68px;
  padding: 11px 6px;
  border-radius: 5px;
  font-weight: 700;
  text-align: center;
}

.domain-matrix-cell.is-overall {
  background: var(--panel-2);
  color: var(--ink);
}

.domain-matrix-cell.is-empty {
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 400;
}

.domain-matrix-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}

.domain-matrix-legend i {
  display: inline-block;
  width: 28px;
  height: 10px;
  border-radius: 2px;
}

.domain-matrix-legend-note {
  margin-left: 4px;
}

/* "(domains -> total)" hint in the Student Results & Papers "Scores" column
   header -- a small reminder of reading order, not shouted like the heading
   itself. */
.th-note {
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}

/* Student Results & Papers "Scores" column (reportScoreChips): each domain
   gets its own small chip (abbreviated label over its score) so the row
   scans left-to-right instead of being one long "Label: n · Label: n"
   string, and the composite chip comes last and reads as a visually
   distinct destination rather than a column you have to look left for. */
.score-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

.score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  line-height: 1.2;
  white-space: nowrap;
}

/* Real (if shortened) words -- "Ideas", "Develop.", "Organiz.", "Language"
   -- read better in normal case than they would shouted in all caps with a
   trailing period, so this isn't uppercased like a typical eyebrow label. */
.score-chip-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

.score-chip-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.score-chip-total {
  background: var(--brand);
  border-color: var(--brand);
  margin-left: 2px;
}

.score-chip-total .score-chip-label,
.score-chip-total .score-chip-value {
  color: #ffffff;
}

.report-chart-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: var(--radius);
}

/* District Comparison chart (districtComparisonMarkup): the plain-language
   takeaway sentence above the dot plot, so the chart's meaning doesn't
   depend on reading where two dashed lines sit relative to a dot cluster. */
.district-chart-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.district-chart-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

.district-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot-you {
  background: var(--brand-2);
}

.legend-dot-other {
  background: var(--brand);
  opacity: 0.75;
}

.report-student-link {
  display: block;
  padding: 0;
  color: var(--brand);
  background: none;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report-paper-detail {
  margin: 8px 0 18px;
  padding: 18px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: #f7fbf8;
}

.report-paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.report-paper-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e1f2e8;
  color: #245c3c;
  font-size: 12px;
  font-weight: 800;
}

.report-prompt-title,
.report-domain-line {
  margin: 8px 0;
}

.report-domain-line {
  color: var(--muted);
  font-size: 13px;
}

.report-paper-body {
  max-height: 440px;
  overflow: auto;
  margin-top: 14px;
  padding: 16px;
  white-space: pre-wrap;
  line-height: 1.65;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #18251f;
  color: white;
  padding: 12px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 20;
}

.secret-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21, 35, 29, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 30;
}

.secret-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 440px;
  width: 100%;
}

.secret-modal h2 {
  margin: 0 0 8px;
}

.secret-modal-value-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.secret-modal-value-row .input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.print-page {
  display: none;
}

@media (max-width: 1280px) {
  .prompt-layout {
    grid-template-columns: 1fr;
  }

  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .login-page {
    gap: 18px;
    padding: 32px 14px 24px;
  }

  .login-heading {
    grid-template-columns: 38px auto;
    column-gap: 12px;
  }

  .login-heading h1 {
    font-size: 32px;
  }

  .app-mark {
    width: 36px;
    height: 40px;
    border-width: 4px;
  }

  .esu-logo {
    width: 96px;
  }

  .login-art {
    display: none;
  }

  .login-card {
    width: 100%;
  }

  .login-panel {
    padding: 20px 16px;
  }

  .login-panel h2 {
    font-size: 23px;
  }

  .login-tabs button {
    min-height: 42px;
    font-size: 13px;
  }

  .sidebar {
    position: static;
    overflow: visible;
  }

  .shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .main {
    overflow: visible;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .prompt-summary,
  .prompt-layout,
  .rubric-grid,
  .paper-filters,
  .users-layout,
  .users-controls,
  .student-controls {
    grid-template-columns: 1fr;
  }

  .paper-search {
    grid-column: auto;
  }

  .report-filters,
  .report-chart-controls,
  .report-chart-row {
    grid-template-columns: 1fr;
  }

  .report-search {
    grid-column: auto;
  }

  .report-chart-title {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Nothing set a page margin before this, which left it entirely up to
   whatever the printing browser/device defaulted to -- usually somewhere
   around half an inch, but not the same on every device, and NOT what our
   own page-fit testing (which exports PDFs with zero margin) was actually
   checking against. That mismatch is why a response calibrated to fit on
   one page in testing could still spill onto a further page on a real
   printer: testing had more usable space per page than production did.
   Pinning an explicit margin here makes print output the same on every
   device, and is also what any future page-fit testing should pass to the
   PDF renderer (preferCSSPageSize) so the two stay in agreement. */
@page {
  margin: 0.5in;
}

@media print {
  /* body (and everything stacked behind #printPage) keeps the app's own
     off-white screen background (--bg: #f6f7f4) all the way down, well past
     wherever #printPage's own content happens to end -- #printPage is one
     tall flowing element with no fixed per-page height, so on whichever
     printed page its content runs out partway down (always the LAST page of
     any multi-page packet, and only noticeable when that page isn't fully
     packed with text), the page's printable area below that point isn't
     covered by anything white -- the body's own background shows through
     there instead, as a visible gray/green-tinted box. .print-page's own
     "background: white" below only paints within its own (correctly-sized)
     box, so it can't fix this on its own. Forcing html/body to plain white
     for print removes the only non-white layer that could ever show through.  */
  html,
  body {
    background: white !important;
  }

  body > *:not(#app) {
    display: none !important;
  }

  #app > *:not(.print-page) {
    display: none !important;
  }

  /* #printPage/.print-page is ONE continuously-flowing element spanning the
     whole printed document -- every page break inside it is just where that
     single box happens to fragment across physical pages. Padding on a box
     that fragments is only ever applied at its very first and very last
     fragment (the CSS default, box-decoration-break: slice), never on the
     "middle" pages in between -- so giving IT the page margin, as used to
     happen here, left every page's actual usable space ambiguous and
     dependent on where in the overall flow that page happened to land. Each
     page-labeled "sheet" below (packet-title, packet-prompt-page,
     packet-paper-page1, packet-response-page, report-paper-print) now
     carries its own 32px padding directly, so each one is its own
     unambiguous, individually-paginated box -- which is also what makes it
     possible to measure "how much fits on this page" reliably in app.js
     (see the pagination comment above anchorPacketPaperHtml). */
  .print-page {
    display: block;
    position: static;
    background: white;
    color: black;
    padding: 0;
  }

  .packet-title {
    min-height: 90vh;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    page-break-after: always;
    padding: 32px;
  }

  .packet-logo {
    width: 220px;
    height: auto;
    margin-bottom: 22px;
  }

  /* Used on the prompt page (anchorPacketPromptPagesHtml) -- same branding
     as the title page, just not dominating a page that also has to fit
     the actual prompt text. */
  .packet-logo-small {
    width: 90px;
    margin-bottom: 14px;
  }

  .packet-title h1 {
    font-size: 34px;
    margin-bottom: 18px;
  }

  .packet-paper {
    page-break-before: always;
  }

  /* The paper's own first page (heading, meta table, score card, and the
     response too if it's short enough to fit alongside) -- see
     .print-page's comment above for why this carries its own padding
     instead of inheriting it. testPaperCardHtml reuses this class for its
     one-page calibration cards. */
  .packet-paper-page1 {
    padding: 32px;
  }

  /* Tight heading/table rhythm so a typical paper's prompt, score table,
     and response all land on the same printed page as each other -- the
     browser's default h2/h3 margins alone ate enough vertical space to
     regularly push the response past where it needed to. */
  .packet-paper h2 {
    margin: 0 0 4px;
  }

  .packet-paper h3 {
    margin: 6px 0 4px;
  }

  /* Applied (by anchorPacketPaperHtml) to each page of a response long
     enough that it wouldn't fit alongside the score table on page 1 -- one
     of these per printed page the response actually needs (Page 2, Page 3,
     ...), each already measured in app.js to fit on its own page. */
  .packet-response-page {
    page-break-before: always;
    padding: 32px;
  }

  /* "Page N" marker at the top of every printed page of a paper (including
     page 1) -- see the pagination comment above anchorPacketPaperHtml in
     app.js for how each page's content is measured to actually fit. */
  .packet-page-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
  }

  /* One per distinct prompt in the booklet (anchorPacketPromptPagesHtml),
     right after the title page and before any papers. */
  .packet-prompt-page {
    page-break-after: always;
    padding: 32px;
  }

  .packet-prompt-page h2 {
    margin: 0 0 14px;
  }

  /* Rubric (assets/rubric-page-1.jpg): one table, one upright page. */
  .packet-rubric-image-page {
    page-break-after: always;
    break-after: page;
    height: 10.3in;
    padding: 0.2in 0.3in;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .packet-rubric-image-page img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  .packet-rubric-page .packet-rubric-note {
    font-size: 11px;
    margin: 0 0 10px;
  }

  .packet-rubric-page .packet-rubric-table {
    min-width: 0;
    width: 100%;
    font-size: 9.5px;
    line-height: 1.3;
    page-break-inside: avoid;
  }

  .packet-rubric-page .packet-rubric-table th,
  .packet-rubric-page .packet-rubric-table td {
    border: 1px solid #999;
    padding: 4px 5px;
  }

  .packet-rubric-page .packet-rubric-table thead th:first-child,
  .packet-rubric-page .packet-rubric-table tbody th {
    width: 90px;
  }

  /* Reports > Print prompt: one prompt per page. The on-screen prompt
     styles (16px text, roomy padding) ran a full prompt onto a second
     page; this compacts only this printout -- the anchor booklet's own
     prompt page keeps its layout. */
  .report-prompt-print {
    padding: 18px 26px;
    break-inside: avoid;
  }

  .report-prompt-print .packet-logo-small {
    width: 72px;
    margin-bottom: 6px;
  }

  .report-prompt-print h2 {
    margin: 0;
    font-size: 18px;
  }

  .report-prompt-print .packet-prompt-line {
    margin: 2px 0 8px;
  }

  .report-prompt-print .prompt-box {
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.4;
    background: #f6f8f6;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-prompt-print .prompt-box > strong {
    font-size: 14px;
  }

  .report-prompt-print .prompt-box p {
    margin: 6px 0;
  }

  .report-prompt-print .perspectives {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0;
  }

  .report-prompt-print .perspective {
    padding: 6px 8px;
    font-size: 11.5px;
    line-height: 1.35;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* "Print charts & summaries" (printSummaryReport): cover header, then
     each chosen Reports section. Charts never split across pages; long
     tables may. Screen-only chrome (shadows, buttons) is already stripped. */
  .summary-report {
    padding: 0 8px;
    color: #17211c;
  }

  .summary-cover {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 0 14px;
    margin-bottom: 14px;
    border-bottom: 2px solid #285d50;
  }

  .summary-logo {
    height: 54px;
    width: auto;
  }

  .summary-cover h1 {
    margin: 0;
    font-size: 22px;
  }

  .summary-district {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #285d50;
  }

  .summary-meta {
    margin: 2px 0 0;
    font-size: 11px;
    color: #555;
  }

  .summary-section {
    box-shadow: none !important;
    border: 1px solid #d8ddd9;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 14px;
    background: #fff;
    break-inside: avoid;
  }

  /* Browsers drop background colours when printing unless told not to --
     which blanked every bar, the domain shading and the legend's colour
     ramp in this report. */
  .summary-report,
  .summary-report * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* A printed page (~7.5in) is narrower than the 920px breakpoint, so the
     screen's narrow-layout rules kicked in and stacked each chart row
     (label / bar / number) vertically. Keep the wide layout on paper. */
  .summary-report .report-chart-row {
    grid-template-columns: minmax(90px, 190px) minmax(0, 1fr) 64px !important;
    gap: 10px;
  }

  .summary-report .report-chart.with-peer .report-chart-row {
    grid-template-columns: minmax(90px, 190px) minmax(0, 1fr) 96px !important;
  }

  .summary-report .report-chart-title {
    flex-direction: row;
    align-items: center;
  }

  /* No scrollbars on paper: tables fit the page instead of scrolling. */
  .summary-report .table-wrap,
  .summary-report .domain-matrix-wrap {
    overflow: visible !important;
  }

  .summary-report table {
    min-width: 0 !important;
    width: 100%;
  }

  .summary-report .domain-matrix {
    font-size: 10.5px;
  }

  .summary-report .domain-matrix th,
  .summary-report .domain-matrix td {
    padding-left: 4px;
    padding-right: 4px;
  }

  .summary-section .section-title {
    margin-bottom: 6px;
  }

  .summary-section .section-title p {
    font-size: 11px;
  }

  .summary-section table {
    break-inside: auto;
    font-size: 11px;
  }

  .summary-section tr,
  .summary-section svg {
    break-inside: avoid;
  }

  .report-paper-print {
    page-break-after: always;
    padding: 24px 32px;
  }

  /* Compact sideways score table (reportPrintScoreTableHtml). Scoped tighter
     than the generic ".report-paper-print table/th/td" rules below so their
     140px label column, grey fill and 8px padding don't apply here. */
  .report-paper-print table.report-print-scores {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 10px;
    font-size: 11px;
  }

  .report-paper-print table.report-print-scores th,
  .report-paper-print table.report-print-scores td {
    width: auto;
    border: 1px solid #ccc;
    padding: 3px 6px;
    text-align: center;
    background: none;
    line-height: 1.25;
  }

  .report-paper-print table.report-print-scores thead th {
    background: #f2f2f2;
    font-weight: 600;
  }

  .report-paper-print table.report-print-scores tbody th {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
  }

  .report-paper-print .report-print-total td,
  .report-paper-print .report-print-total th {
    font-weight: 700;
  }

  /* ACT-style printed score block (reportPrintScoreTableHtml): the
     Writing Score set apart on the left, Domain Scores table beside it. */
  .act-score-block {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin: 4px 0 4px;
  }

  .act-score-summary {
    flex: 0 0 118px;
    border: 2px solid #285d50;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .act-score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #285d50;
  }

  .act-score-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    color: #17211c;
  }

  .act-score-range {
    font-size: 9.5px;
    color: #555;
    white-space: nowrap;
  }

  .report-paper-print table.act-domain-table {
    flex: 1;
    margin: 0;
  }

  .report-paper-print table.act-domain-table tbody th {
    text-align: left;
    color: #17211c;
    font-weight: 600;
  }

  .report-paper-print table.act-domain-table thead th:first-child {
    text-align: left;
  }

  .report-paper-print table.act-domain-table .act-domain-score {
    font-weight: 700;
  }

  .act-th-note {
    font-weight: 400;
    color: #666;
    font-size: 9.5px;
  }

  .act-score-note {
    margin: 4px 0 10px;
    font-size: 10px;
    color: #555;
  }

  .report-print-noscore {
    margin: 4px 0 10px;
    font-size: 11px;
    color: #666;
  }

  .report-paper-print h2 {
    margin: 6px 0 6px;
    font-size: 15px;
  }

  .report-paper-print:last-child {
    page-break-after: auto;
  }

  .report-paper-print header {
    margin-bottom: 8px;
  }

  .report-paper-print header h1 {
    font-size: 20px;
  }

  .report-paper-print header p {
    font-size: 12px;
    color: #444;
  }

  .report-paper-print header h1,
  .report-paper-print header p {
    margin: 0 0 5px;
  }

  .report-paper-print table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 22px;
  }

  .report-paper-print th,
  .report-paper-print td {
    border: 1px solid #bbb;
    padding: 8px;
  }

  .report-paper-print th {
    width: 140px;
    background: #f2f2f2;
  }

  .packet-paper table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 8px;
  }

  .packet-paper th,
  .packet-paper td {
    border: 1px solid #bbb;
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
  }

  .packet-paper th {
    width: 140px;
    background: #f2f2f2;
  }

  .packet-response {
    white-space: pre-wrap;
    font-size: 12.5px;
    line-height: 1.4;
  }

  .packet-prompt-line {
    color: #666;
    font-size: 12px;
    font-style: italic;
    margin: -4px 0 10px;
  }

  .packet-score-card {
    background: #f2f2f2;
    border-radius: 10px;
    padding: 2px 16px;
    margin: 6px 0 8px;
  }

  .packet-score-table {
    width: 100%;
    border-collapse: collapse;
  }

  .packet-score-table th,
  .packet-score-table td {
    padding: 5px 10px;
    text-align: center;
    border: none;
  }

  .packet-score-table thead th {
    font-weight: 700;
    color: #333;
  }

  .packet-score-table tbody th {
    text-align: left;
    font-weight: 600;
    color: #222;
  }

  .packet-score-table tbody tr + tr th,
  .packet-score-table tbody tr + tr td {
    border-top: 1px solid #ddd;
  }

  .packet-score-average td {
    font-weight: 700;
    border-top: 2px solid #bbb;
    padding-top: 7px;
  }

  .packet-score-average td:first-child {
    text-align: right;
  }

  /* studentIdListHtml's two top-level elements used to get their inset from
     .print-page's own padding (see the comment on .print-page above); now
     that padding's been moved onto individually-paginated "sheets" instead,
     these keep the same look by padding themselves directly -- header
     carries the top inset, the table carries the bottom one, so together
     they read the same as a single 32px-padded block, however many pages
     this list actually spans. */
  .student-id-print-header {
    margin-bottom: 18px;
    padding: 32px 32px 0;
  }

  .student-id-print-header h1 {
    margin: 0 0 4px;
    font-size: 22px;
  }

  .student-id-print-header p {
    margin: 0;
    color: #444;
  }

  .student-id-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    padding: 0 32px 32px;
  }

  .student-id-list th,
  .student-id-list td {
    border: 1px solid #bbb;
    padding: 7px 8px;
    text-align: left;
  }

  .student-id-list th {
    background: #f2f2f2;
    font-weight: 800;
  }

  .student-id-list strong {
    font: 800 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .student-id-list thead {
    display: table-header-group;
  }

  .student-id-list tr {
    page-break-inside: avoid;
  }
}

.import-defaults {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.help-q {
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.help-q[aria-expanded="true"] {
  background: var(--brand);
  color: #fff;
}

.import-guide {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.import-guide h3 {
  margin: 0 0 2px;
  font-size: 14px;
}

.import-guide > .muted {
  margin: 0 0 8px;
}

.import-guide ol,
.import-guide ul {
  margin: 6px 0;
  padding-left: 20px;
}

.import-guide li {
  margin: 2px 0;
}

.import-guide p {
  margin: 4px 0;
}

.import-guide .import-status {
  padding: 0 6px;
}

.import-guide code {
  font-size: 12px;
  background: #fff;
  padding: 0 4px;
  border-radius: 4px;
}

.import-help {
  margin: 4px 0 8px;
}

.import-upload {
  cursor: pointer;
}

.import-review-table td {
  vertical-align: middle;
}

.import-review-table .input {
  min-width: 90px;
}

.import-where {
  font-size: 12px;
}

.import-row-problem td {
  background: #fbeeee;
}

.import-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.import-new { background: #e3f1e8; color: var(--ok); }
.import-update { background: #e4ecf7; color: #2c4f84; }
.import-duplicate { background: #f6efdc; color: var(--warn); }
.import-problem { background: #f7e1e1; color: var(--danger); }

@media (max-width: 720px) {
  .import-defaults {
    grid-template-columns: 1fr 1fr;
  }
}

.paper-list-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.paper-list-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  align-self: flex-start;
  margin-top: 14px;
}

.paper-list-row button {
  flex: 1;
  min-width: 0;
}

/* Testing schedule calendar (admin "Testing Calendar" panel) */
.calendar-table {
  min-width: 0;
  table-layout: fixed;
}

.calendar-table th {
  text-align: center;
}

.calendar-table td {
  vertical-align: top;
  height: 92px;
  border: 1px solid var(--line);
  padding: 6px;
}

.calendar-table .cal-empty {
  background: var(--panel-2);
}

.cal-daynum {
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.testing-calendar td.cal-day {
  height: 74px;
}

.testing-calendar td.cal-testing {
  background: #fbfdfb;
  box-shadow: inset 0 3px 0 var(--brand);
}

.testing-calendar td.cal-past {
  background: #eef0ef;
  color: var(--muted);
}

.testing-calendar td.cal-past .cal-chip,
.testing-calendar td.cal-past .status {
  opacity: 0.6;
}

.testing-calendar td.cal-testing.cal-past {
  box-shadow: inset 0 3px 0 #b9c4bf;
}

.testing-calendar .cal-chip {
  white-space: normal;
}

/* Session chips: green = students from that district tested that day;
   red = test day has come (or passed) and nobody from that district has. */
.testing-calendar .cal-chip.cal-chip-ok {
  background: #e1f2e8;
  color: #245c3c;
}

.testing-calendar .cal-chip.cal-chip-missing {
  background: #fae2e2;
  color: #8b2020;
}

.testing-calendar td.cal-past .cal-chip.cal-chip-ok,
.testing-calendar td.cal-past .cal-chip.cal-chip-missing {
  opacity: 1;
}

.testing-calendar .cal-gap td {
  height: auto;
  padding: 4px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border-left: 0;
  border-right: 0;
}

.testing-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.testing-day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--panel);
  display: grid;
  gap: 4px;
  align-content: start;
}

.testing-day.past {
  opacity: 0.6;
}

.testing-day-weekday {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.testing-day-meta,
.testing-day-empty {
  font-size: 12px;
}

.testing-day-pending {
  justify-self: start;
  margin-top: 2px;
}

.cal-chip {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Logs screen: every section starts collapsed (logsSection() in app.js).
   Collapsed shows only the title row -- and only the title + Show button
   in it, so a header action (Check this window, Refresh, Load settings)
   can't load data into a panel the admin can't see. */
.logs-section .section-title {
  align-items: center;
}

.logs-section .section-title h2 {
  margin-right: auto;
}

.logs-section .logs-section-toggle {
  order: 99;
}

.logs-section.is-collapsed > :not(.section-title) {
  display: none;
}

.logs-section.is-collapsed .section-title {
  margin-bottom: 0;
}

.logs-section.is-collapsed .section-title > :not(h2):not(.logs-section-toggle) {
  display: none;
}

.logs-search-field {
  max-width: 420px;
  margin-bottom: 12px;
}

.logs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.logs-pager-buttons {
  gap: 6px;
}

.logs-page-number {
  min-width: 40px;
  padding-left: 10px;
  padding-right: 10px;
}

/* The current page is a disabled button (nothing to click), but it must
   read as "you are here", not greyed out. */
.logs-page-number[aria-current="page"]:disabled {
  opacity: 1;
  cursor: default;
}

/* Staff sign-in: Google button, password fallback, authenticator step. */
.login-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff4d8;
  color: #6b4700;
  font-size: 14px;
  line-height: 1.4;
}

.google-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

.google-signin svg {
  flex-shrink: 0;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}

.password-signin {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.password-signin summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}

.mfa-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  line-height: 1.5;
  font-size: 14px;
}

.mfa-steps li {
  margin-bottom: 8px;
}

.mfa-secret {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: 0.08em;
  word-spacing: 0.2em;
  overflow-wrap: normal;
  user-select: all;
}

.signin-cell {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.signin-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.signin-manage summary {
  cursor: pointer;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
}

.signin-manage-body {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 6px;
}

.mfa-remember {
  margin-top: 4px;
  font-size: 14px;
}

.mfa-remember-note {
  margin: 2px 0 10px;
  font-size: 12px;
}

.mfa-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  image-rendering: pixelated;
}

.mfa-manual summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}

.email-papers-modal {
  max-width: 520px;
}

.email-papers-window {
  font-size: 14px;
  margin: 10px 0;
}

.email-papers-scope {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
  display: grid;
  gap: 6px;
}

.email-papers-scope legend {
  font-weight: 600;
  font-size: 13px;
  padding: 0 4px;
}

.email-papers-summary {
  margin-top: 12px;
  font-size: 14px;
}

.email-papers-warn {
  color: #805600;
  background: #fff4d8;
  border-radius: 6px;
  padding: 6px 10px;
}

/* "Experimental" tag for features still being tested (Email students). */
.experimental-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ede4ff;
  color: #4b2a8a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-transform: uppercase;
}

.experimental-note {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f4efff;
  color: #3d2470;
  font-size: 13px;
}

.email-quota {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--panel-2);
  font-size: 14px;
}

.email-quota-low {
  background: #fff4d8;
}

/* Writing-status filter chips above the Students table. */
.status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.status-chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.status-chip span {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 700;
}

.status-chip:hover {
  background: var(--panel-2);
}

.status-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.status-chip.active span {
  color: #fff;
}

.legend-band {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  vertical-align: middle;
  margin-right: 6px;
}

.summary-report-modal {
  max-width: 540px;
}

.summary-sections {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0 0;
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
}

.summary-sections legend {
  font-weight: 600;
  font-size: 13px;
  padding: 0 4px;
}

.summary-presets {
  margin-top: 10px;
  gap: 6px;
}

.student-results-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0 0 10px;
}

.student-results-search label {
  margin: 0;
  white-space: nowrap;
}

.student-results-search .input {
  flex: 1;
  min-width: 220px;
}

.report-email-col {
  min-width: 190px;
}

.report-email-input {
  width: 100%;
  min-width: 170px;
}

.report-email-input.is-empty {
  border-style: dashed;
}

/* Paper expanded inline under its row in Student Results & Papers. */
.report-paper-expanded > td {
  background: var(--panel-2);
  padding: 14px 16px 16px;
  border-bottom: 2px solid var(--brand);
}

.report-paper-expanded .report-paper-detail {
  margin: 0;
  box-shadow: none;
}

.paper-email {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  max-width: 760px;
}

.paper-email-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.paper-email-row .input {
  flex: 1;
  min-width: 220px;
}

.paper-email .muted {
  font-size: 12px;
  margin: 6px 0 0;
}

/* Student Results & Papers: every cell centred on its row (names, email
   box, chips, Open button used to sit at different heights). */
.report-results-table td {
  vertical-align: middle;
}

/* Score sort buttons over the chips -- same box model as .score-chip so
   each lines up over its own column. */
.score-sorts {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.score-sort {
  position: relative;
  min-width: 48px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.score-sort:hover {
  background: var(--panel-2);
  color: var(--ink);
}

.score-sort.active {
  color: var(--ink);
  border-color: var(--line);
  background: var(--panel-2);
}

/* Arrow sits in the button's corner padding, so the active button stays
   exactly as wide as the chips under it. */
.score-sort span {
  position: absolute;
  top: -2px;
  right: 1px;
  font-size: 8px;
  color: var(--brand);
}

.score-chip.score-chip-sorted {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* My Results (student): ACT wording -- Writing Score + Domain Scores. */
.act-writing-score {
  display: inline-block;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.act-domain-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 2px 18px;
  font-size: 13px;
}

/* Admin Guide checklists (guideScreen). */
.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.guide-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.guide-step strong {
  display: block;
  margin-bottom: 2px;
}

.guide-step p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.guide-step p strong {
  display: inline;
  color: var(--ink);
}

.guide-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  border: 2px solid var(--line);
  color: var(--muted);
}

.guide-ok .guide-badge {
  background: #e1f2e8;
  border-color: #6fb38e;
  color: #245c3c;
}

.guide-warn {
  border-color: #e9c46a;
  background: #fffaf0;
}

.guide-warn .guide-badge {
  background: #fff4d8;
  border-color: #d9a520;
  color: #805600;
}

.guide-info .guide-badge {
  font-style: italic;
  font-family: Georgia, serif;
}

/* Users table: cells centred on the row (inputs, selects, buttons and the
   Sign-in stack used to sit at different heights). */
.users-table td {
  vertical-align: middle;
}

.login-help {
  margin: 12px 0 0;
  font-size: 13px;
}

.notice-panel {
  border-left: 4px solid var(--warn);
}

.role-help {
  margin: 4px 0 8px;
  font-size: 13px;
}

.role-help ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Writing screen: keep the title row with the timer on screen while the
   student scrolls down to the response box. */
.writer-sticky {
  position: sticky;
  top: -24px;
  z-index: 20;
  margin: -24px -24px 12px;
  padding: 24px 24px 8px;
  background: var(--bg);
  box-shadow: 0 6px 10px -8px rgba(21, 35, 29, 0.25);
}

.writer-sticky .topbar {
  margin-bottom: 0;
}

.writer-sticky .topbar p {
  margin-bottom: 0;
}

@media print {
  .writer-sticky {
    position: static;
    box-shadow: none;
  }
}

.btn.compact {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 13px;
}

/* Teacher Requests (admin Testing Schedule): compact rows. */
.requests-table td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}

.requests-table .req-sub {
  font-size: 12px;
  margin-top: 2px;
}

.requests-table .req-slot {
  white-space: nowrap;
  font-size: 13px;
}

.requests-table .req-tag {
  display: inline-block;
  min-width: 26px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.requests-table .req-assigned {
  font-weight: 600;
  font-size: 13px;
}

.requests-table .req-change {
  margin-top: 4px;
  white-space: normal;
}

.requests-table .req-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  align-items: flex-start;
}

.requests-table .req-custom summary {
  list-style: none;
  cursor: pointer;
}

.requests-table .req-custom summary::-webkit-details-marker {
  display: none;
}

.requests-table .req-custom-body {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.requests-table .req-custom-body .input {
  width: auto;
  min-height: 28px;
  padding: 2px 6px;
  font-size: 13px;
}

.title-with-counts .status {
  margin-left: 6px;
  font-size: 12px;
  vertical-align: 3px;
}

.time-select.all-districts {
  color: var(--muted);
  background: var(--panel-2);
  cursor: default;
  opacity: 1;
}

/* Users (admin): compact read-only rows; the row being edited keeps the
   full inputs. */
.users-table tr.user-row-readonly td {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
}

.users-table .user-email-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-table tr.user-row-editing td {
  background: #f7faf8;
}

.users-table tr.user-row-editing input,
.users-table tr.user-row-editing select {
  min-height: 34px;
}

/* Users: every other row shaded so a long list is easy to follow across;
   hover highlights the row under the pointer. */
.users-table tbody tr:nth-child(even) td {
  background: #f4f7f5;
}

.users-table tbody tr:hover td {
  background: #e9f1ec;
}

.users-table tbody tr.user-row-editing td {
  background: #fff8e6;
}

/* Section title bars that show/hide their section are clickable as a whole. */
.section-title:has([data-action="toggle-logs-section"], [data-action="toggle-report-section"], [data-action="toggle-archived-students"], [data-action="toggle-teacher-requests"]) {
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius);
}

.section-title:has([data-action="toggle-logs-section"], [data-action="toggle-report-section"], [data-action="toggle-archived-students"], [data-action="toggle-teacher-requests"]):hover h2 {
  color: var(--brand);
}

/* Sidebar: the same notepad mark as the loading and sign-in screens, scaled
   down beside the app name. */
.brand.brand-with-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-with-mark .app-mark {
  /* Scaled as a whole (48x54 -> ~29x32) so the outline and lines keep the
     same proportions as the full-size mark; negative margins give back the
     space the full size would otherwise take. */
  flex: 0 0 auto;
  transform: scale(0.6);
  transform-origin: left center;
  margin: -11px -19px -11px 0;
  background: #fff;
  box-shadow: none;
}

/* Student Papers: actions for the open paper, right above its writing and
   pinned to the top while you scroll down to read it. */
.paper-decision-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 10px;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 10px -8px rgba(21, 35, 29, 0.35);
}

.paper-decision-label {
  font-size: 13px;
  font-weight: 700;
  margin-right: 4px;
}

/* Student Papers: slim filter row + one-line paper list (~6 visible), so
   the open paper's reading card sits right below. */
.papers-help {
  margin: -4px 0 10px;
  font-size: 13px;
}

.papers-browser {
  display: grid;
  gap: 10px;
}

.paper-filters.paper-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.paper-filters-row .field {
  margin: 0;
  gap: 3px;
  flex: 0 1 150px;
  min-width: 120px;
}

.paper-filters-row .field label {
  font-size: 11px;
  color: var(--muted);
}

.paper-filters-row .input {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 13px;
}

.paper-filters-row .paper-search {
  flex: 1 1 220px;
}

.paper-filters-row .paper-score-range {
  flex: 0 0 auto;
}

.paper-score-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.paper-score-inputs .input {
  width: 62px;
}

.paper-list.paper-list-compact {
  gap: 2px;
  max-height: 252px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
}

.paper-list-compact .paper-list-row {
  align-items: center;
  gap: 6px;
}

.paper-list-compact button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  min-height: 0;
  border-color: transparent;
}

.paper-list-compact button strong {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
}

.paper-list-compact button > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-list-compact .paper-list-row:nth-child(even) button {
  background: #f6f8f7;
}

.paper-list-compact button.active,
.paper-list-compact button:hover,
.paper-list-compact .paper-list-row:nth-child(even) button:hover {
  background: #e9f1ec;
  border-color: var(--brand);
}

.paper-list-compact .status {
  padding: 1px 7px;
  font-size: 11px;
}

.brand-with-mark .brand-text {
  display: grid;
  line-height: 1.15;
}

.brand-with-mark .brand-org {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Student Papers: full-screen reading view, laid out like the writing
   screen (prompt panel, then the response box), read-only. */
.reading-view-open {
  overflow: hidden;
}

.reading-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg);
}

.reading-view-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 12px -10px rgba(21, 35, 29, 0.4);
}

.reading-view-who,
.reading-view-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reading-view-who strong {
  font-size: 17px;
}

.reading-view-body {
  overflow: auto;
  padding: 18px 20px 40px;
  display: grid;
  gap: 16px;
  align-content: start;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.reading-view-essay {
  min-height: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: #fff;
  font-size: 16px;
}

@media print {
  .reading-view-overlay {
    display: none;
  }
}

.rubric-table {
  table-layout: fixed;
  min-width: 760px;
  font-size: 12px;
  line-height: 1.4;
}

.rubric-table th,
.rubric-table td {
  vertical-align: top;
  border: 1px solid var(--line);
  padding: 6px 7px;
}

.rubric-table thead th {
  text-align: center;
  background: var(--panel-2);
}

.rubric-table thead th:first-child,
.rubric-table tbody th {
  width: 130px;
  text-align: left;
  font-size: 12px;
}

.rubric-table td.rubric-hit {
  background: #e1f2e8;
  box-shadow: inset 0 0 0 2px #7fbf9a;
}

.rubric-marks {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.rubric-mark {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: #245c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}


.rubric-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rubric-thumb {
  margin: 0;
  width: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  background: #fff;
}

.rubric-thumb img {
  width: 100%;
  display: block;
}

.rubric-thumb figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
}

/* Student Papers rows: name + chips, then scores, then details. */
.paper-list-compact button {
  display: grid;
  gap: 1px;
  align-items: start;
}

.paper-list-compact button strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paper-list-compact .paper-row-scores {
  color: var(--ink);
  font-size: 12px;
}

.paper-list.paper-list-compact {
  max-height: 330px;
}

.paper-list.paper-list-compact.expanded {
  max-height: 72vh;
}

.paper-list-tools {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.paper-editor-scores { margin: 4px 0 0; font-size: 15px; }
.paper-editor-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:8px 0 10px; font-size:13px; color:var(--muted, #6b7280); }
.paper-editor-meta .status { font-size:12px; padding:2px 8px; }
.paper-editor-head { margin-bottom:0; }
.paper-editor-head h2 { margin:0; }
.paper-editor-head p { margin:2px 0 0; }
.paper-editor-scores { color: var(--muted); }

/* Email for permission (Anchor Papers) */
.anchor-permission-line { margin: 4px 0 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.anchor-permission-line .status { font-size: 12px; }
.anchor-permission-modal { max-width: 640px; }
.anchor-permission-modal textarea { width: 100%; margin: 4px 0 12px; resize: vertical; }
.anchor-permission-list { max-height: 46vh; overflow: auto; display: grid; gap: 10px; }
.anchor-permission-paper { border: 1px solid var(--line, #dce3dd); border-radius: 8px; padding: 8px 12px; margin: 0; }
.anchor-permission-paper legend { padding: 0 4px; font-size: 14px; }
.anchor-permission-paper .checkbox-row { font-size: 14px; }

.composite-score { font-weight: 800; color: var(--ink); }

.anchor-draft-papers { margin: 0 0 12px; }
.anchor-draft-papers > summary { cursor: pointer; padding: 8px 0; list-style-position: inside; }
.anchor-email-log { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.anchor-email-log h3 { margin: 0 0 8px; font-size: 15px; }
.anchor-email-log td, .anchor-email-log th { font-size: 13px; vertical-align: top; }

.draft-anchor-row { padding: 10px 12px; margin-bottom: 8px; }
.draft-anchor-row .draft-anchor-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.draft-anchor-row .anchor-score { font-size: 13px; }
.draft-anchor-row .anchor-permission-line { margin: 4px 0; }
.draft-anchor-row .draft-anchor-peek { margin: 0 0 6px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-anchor-row .btn-row { gap: 6px; }

.writing-time-left { font-size: 12px; white-space: nowrap; }

/* Compact Students table: shorter rows and narrower fields. */
.students-table th, .students-table td { padding: 4px 6px; }
.students-table .inline-input, .students-table .time-select { min-height: 30px; height: 30px; padding: 3px 8px; font-size: 13px; }
.students-table input[data-student-field="name"] { width: 150px; }
.students-table input[data-student-email] { width: 160px; }
.students-table input[data-student-field="teacher"] { width: 130px; }
.students-table input[data-student-field="classSection"] { width: 70px; }
.students-table select[data-student-field="gender"] { width: 88px; }
.students-table select[data-action="time-limit"] { width: 82px; }
.students-table .btn { min-height: 28px; padding: 3px 10px; font-size: 13px; }
.students-table .btn-row { flex-wrap: nowrap; gap: 4px; }
.students-table td:nth-child(10) { white-space: nowrap; }
.students-table .status { font-size: 12px; padding: 2px 8px; }
.students-table .writing-time-left { display: block; margin-top: 2px; }

/* Reports: make it obvious which cards the filters above actually change.
   A solid brand-colored outline = follows the filters; a dashed gray one =
   only some filters apply (each card says which). */
.report-scope {
  margin-top: 16px;
  padding: 0 14px 14px;
  border-radius: 14px;
}
.report-scope-filtered {
  border: 2px solid var(--brand);
  background: rgba(40, 93, 80, 0.035);
}
.report-scope-partial {
  border: 2px dashed #b7c2bb;
}
.report-scope-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 2px 2px;
  font-size: 0.9rem;
}
.report-scope-label strong {
  color: var(--brand);
  letter-spacing: 0.01em;
}
.report-scope-partial .report-scope-label strong {
  color: #5b6a62;
}
.report-scope-label span {
  color: #5b6a62;
  font-size: 0.85rem;
}
@media print {
  .report-scope { border: 0; padding: 0; background: none; }
  .report-scope-label { display: none; }
}
.report-scope > .grid { margin-top: 16px; }

/* Reports: the Students represented / Finalized papers / Average ribbon,
   kept slim so it reads as a strip above the results table. */
.report-ribbon {
  gap: 10px;
}
.report-ribbon .metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
}
.report-ribbon .metric strong {
  font-size: 20px;
  line-height: 1.2;
}

/* Expandable rubric text under each scoring domain */
.rubric-drop { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.rubric-drop summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); list-style: none; display: flex; align-items: center; gap: 6px; }
.rubric-drop summary::-webkit-details-marker { display: none; }
.rubric-drop summary::before { content: "\25B8"; display: inline-block; transition: transform .12s; }
.rubric-drop[open] summary::before { transform: rotate(90deg); }
.rubric-drop-body { margin-top: 6px; max-height: min(46vh, 380px); overflow: auto; font-size: 12.5px; line-height: 1.4; background: #f7faf8; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.rubric-level + .rubric-level { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.rubric-level-head { font-weight: 600; margin-bottom: 3px; }
.rubric-level-score { display: inline-block; min-width: 20px; text-align: center; background: var(--brand); color: #fff; border-radius: 5px; margin-right: 4px; }
.rubric-level ul { margin: 0; padding-left: 18px; }
.rubric-level li { margin: 2px 0; }

/* The scoring card is only ~2/3 of the screen now: two domain cards per row so
   the 1-6 buttons and the rubric drop-downs have room. */
.queue-split .rubric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.queue-split .score-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.queue-tier { display: inline-block; margin-top: 4px; font-size: 11px; }
.table-balance { display: block; margin-top: 4px; }
.table-balance-flag { display: block; margin-top: 3px; color: #8a5a00; font-weight: 600; }
/* Contrast wrapper around the essay box should not add spacing or a background of its own. */
#scorerContrastWrap { border-radius: var(--radius); }

.table-summary .table-balance,
.table-summary .table-balance-flag { grid-column: 1 / -1; }

/* Per-paper tools row above the essay (reading tools left, flag actions right). */
.scorer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.scorer-toolbar .btn { padding: 6px 12px; font-size: 13px; min-height: 0; }
.scorer-toolbar-spacer { flex: 1 1 auto; }
.scorer-toolbar .scorer-flag-btn { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.scorer-toolbar .scorer-flag-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.scorer-toolbar .scorer-flag-btn.on { border-color: var(--brand); color: var(--brand); background: #eef5f1; }
.scorer-toolbar .scorer-flag-btn.flagged { border-color: #b7791f; color: #8a5a00; background: #fdf3dc; }

/* Distinct colors so the two flag actions stand out: blue for anchor, red for attention. */
.scorer-toolbar .scorer-anchor-btn { border-color: #3b6fb6; color: #24508f; background: #eef4fc; font-weight: 600; }
.scorer-toolbar .scorer-anchor-btn:hover:not(:disabled) { background: #dce8f8; border-color: #24508f; color: #1b3f73; }
.scorer-toolbar .scorer-anchor-btn.on { background: #24508f; border-color: #24508f; color: #fff; }
.scorer-toolbar .scorer-attn-btn { border-color: #c0392b; color: #a32a1f; background: #fdf0ee; font-weight: 600; }
.scorer-toolbar .scorer-attn-btn:hover:not(:disabled) { background: #f9dcd8; border-color: #a32a1f; color: #8a1f15; }
.scorer-toolbar .scorer-attn-btn.flagged { background: #c0392b; border-color: #c0392b; color: #fff; }

/* The rubric level matching the score the reader picked */
.rubric-level.picked { background: #e3f0e8; border-left: 4px solid var(--brand); margin-left: -6px; padding: 4px 6px 4px 6px; border-radius: 6px; }
.rubric-level.picked .rubric-level-head::after { content: " \2190 your score"; color: var(--brand); font-weight: 700; }
.rubric-picked-note { font-weight: 500; color: var(--muted); }

/* Visual break between the essay being read and the scoring controls below it. */
.scoring-zone { margin-top: 20px; padding: 14px 16px 16px; background: #f1f6f3; border: 1px solid #d3e0d8; border-top: 3px solid var(--brand); border-radius: 12px; }
.scoring-zone-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.scoring-zone .rubric-grid { margin-top: 8px !important; }
.scoring-zone .card { background: #fff; box-shadow: 0 1px 2px rgba(20, 50, 35, .06); }

/* Scoring progress graphic under the Assigned Scoring page */
.progress-panel { margin-top: 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, #f6faf7 0%, #ffffff 60%); }
.progress-grid { display: grid; grid-template-columns: 190px minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.progress-ring-wrap { position: relative; width: 170px; height: 170px; justify-self: center; }
.progress-ring { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(45, 122, 85, .18)); }
.progress-seg { transition: stroke-dasharray .9s ease; stroke-linecap: butt; }
.progress-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.progress-ring-center strong { font-size: 34px; line-height: 1; color: #1f5d40; }
.progress-ring-center span { font-size: 12px; color: var(--muted); margin-top: 2px; }
.progress-ring-center em { font-style: normal; font-size: 12px; font-weight: 700; color: #1f5d40; background: #dcebe2; border-radius: 999px; padding: 1px 8px; margin-top: 6px; }
.progress-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stage { flex: 1 1 90px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; box-shadow: 0 1px 2px rgba(20, 50, 35, .06); }
.stage b { display: block; font-size: 28px; line-height: 1.1; color: #5b6b62; }
.stage span { font-size: 12px; color: var(--muted); }
.stage.done { background: #e8f4ed; border-color: #b9d9c7; }
.stage.done b { color: #1f5d40; }
.stage-arrow { font-size: 26px; color: #9fb3a7; }
.stage-total { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); text-align: center; }
.stage-total b { color: #1f5d40; font-size: 14px; }
.progress-side { display: grid; gap: 10px; }
.progress-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(20, 50, 35, .06); }
.progress-card-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.table-mix { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #e4ebe6; }
.table-mix span { transition: flex .6s ease; }
.mix-none { background: #cfd8d2; } .mix-one { background: #e0a526; } .mix-two { background: #2d7a55; }
.progress-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.dot-none { background: #cfd8d2; } .dot-one { background: #e0a526; } .dot-two { background: #2d7a55; }
.you-count b { font-size: 26px; color: #1f5d40; } .you-count span { color: var(--muted); font-size: 13px; }
.you-stars { color: #e0a526; font-size: 18px; letter-spacing: 1px; } .you-stars i { font-style: normal; }
.you-stars small { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0; }
[data-countup].bump { animation: progress-bump .9s ease; }
@keyframes progress-bump { 0% { transform: scale(1); } 30% { transform: scale(1.18); color: #2d7a55; } 100% { transform: scale(1); } }
.all-done-msg { text-align: center; font-weight: 700; color: #1f5d40; margin: 10px 0 0; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -10px; left: calc(var(--i) * 4.2%); width: 8px; height: 12px; background: hsl(calc(var(--i) * 37), 75%, 55%); animation: confetti-fall 3.2s ease-in calc(var(--i) * 0.08s) 1 forwards; border-radius: 2px; }
@keyframes confetti-fall { to { transform: translateY(260px) rotate(540deg); opacity: 0; } }
@media (max-width: 1100px) { .progress-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { [data-countup].bump, .confetti i { animation: none; } .progress-seg, .table-mix span { transition: none; } }

/* Scoring Ops overview */
.ops-overview-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: center; }
.ops-hero { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; }
.ops-hero .progress-stages .stage { flex-basis: 70px; padding: 8px 4px; }
.ops-hero .progress-stages .stage b { font-size: 22px; }
.ops-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ops-table-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(20, 50, 35, .06); }
.ops-table-card.behind { border-color: #e0b04a; background: #fffaf0; }
.ops-table-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ops-table-head span { font-size: 12px; color: var(--muted); }
.ops-table-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; text-align: center; }
.ops-table-nums b { display: block; font-size: 18px; color: #2c3a33; }
.ops-table-nums span { font-size: 10.5px; color: var(--muted); }
.ops-table-nums .warn b { color: #b7791f; }
.ops-table-foot { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ops-resolve { color: #a8620a; font-weight: 600; }
.mix-done { background: #1f5d40; } .mix-two2 { background: #6fb58a; }
.dot-fin { background: #1f5d40; } .dot-two2 { background: #6fb58a; }
.ops-legend { margin-top: 10px; justify-content: center; }
@media (max-width: 1100px) { .ops-overview-grid { grid-template-columns: 1fr; } }

/* Scoring Ops layout: papers on the left (full height), tables then overview on the right */
.grid.ops-split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.ops-split > .ops-papers { grid-column: 1; grid-row: 1 / span 2; }
.ops-split > .ops-tables-panel { grid-column: 2; grid-row: 1; }
.ops-split > .ops-overview { grid-column: 2; grid-row: 2; margin-top: 0; }
.ops-papers-scroll { max-height: 78vh; overflow: auto; }
.ops-split .ops-overview-grid { grid-template-columns: 1fr; }
.ops-split .ops-tables { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 920px) {
  .ops-split > .ops-papers, .ops-split > .ops-tables-panel, .ops-split > .ops-overview { grid-column: auto; grid-row: auto; }
}

/* Live Writing: who is typing right now */
.live-updating { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: #2d7a55; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.live-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.live-chip { background: #f1f5f2; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted); }
.live-chip b { font-size: 16px; color: #2c3a33; }
.live-chip.live-typing { background: #e5f4ec; border-color: #b9d9c7; } .live-chip.live-typing b { color: #1f5d40; }
.live-chip.live-paused { background: #fdf3dc; border-color: #ecd49a; } .live-chip.live-paused b { color: #8a5a00; }
.live-table-wrap { max-height: 460px; overflow: auto; margin-top: 10px; }
.live-table td, .live-table th { padding: 7px 10px; }
.live-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.live-status i { width: 9px; height: 9px; border-radius: 50%; background: #b7c2bb; display: inline-block; }
.live-status.live-typing { color: #1f5d40; } .live-status.live-typing i { background: #2d7a55; animation: live-pulse 1.2s ease-in-out infinite; }
.live-status.live-paused { color: #8a5a00; } .live-status.live-paused i { background: #e0a526; }
.live-status.live-idle { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .live-pulse, .live-status.live-typing i { animation: none; } }

/* Live Writing: status bar, today's sessions */
.live-bar{margin:12px 0;padding:14px 16px;border:1px solid var(--line,#d9e2dd);border-radius:12px;background:#f3f8f5}
.live-bar-top{display:flex;justify-content:space-between;gap:12px;font-size:1.05rem;flex-wrap:wrap}
.live-bar-top strong{font-size:1.6rem;margin-right:4px}
.live-bar-track{height:10px;border-radius:99px;background:#dde7e1;margin:10px 0;overflow:hidden}
.live-bar-track i{display:block;height:100%;background:linear-gradient(90deg,#2f6f57,#d0603c);border-radius:99px;transition:width .6s ease}
.live-bar-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:#4a5a52}
.live-bar-meta b{color:#17251e}.live-low b{color:#b3402a}
.live-bar-empty{font-size:1.05rem}.live-bar-empty strong{font-size:1.4rem}
.live-chip.live-online{background:#e8f0ff;border-color:#bcd0f5}
.live-chip.live-waiting{background:#f5eefb;border-color:#d8c4ec}
.live-today{margin:14px 0}.live-today h3{margin:0 0 6px;font-size:1rem}
.live-waiting{margin:10px 0;font-size:.95rem}
.live-phase{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:600;background:#eceeed;color:#555}
.live-phase-now{background:#dff3e8;color:#1d5a40}.live-phase-later{background:#fff1d6;color:#8a5a00}
@media (prefers-reduced-motion:reduce){.live-bar-track i{transition:none}}

.live-chips{align-items:center}

.live-mini{width:90px;height:6px;border-radius:99px;background:#dde7e1;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}
.live-mini i{display:block;height:100%;background:linear-gradient(90deg,#2f6f57,#d0603c)}
.live-left{font-variant-numeric:tabular-nums;font-size:.9rem}
.live-row-attn{background:#fff8ee}
.live-note{font-size:.85rem;font-weight:600}.live-note-1{color:#8a5a00}.live-note-2{color:#b3402a}