/* ---------- self-hosted faces ---------- */
/* IBM Plex Sans and Source Serif 4 are variable (one file per subset);
   IBM Plex Mono ships one static file per weight. latin-ext carries the
   Latvian diacritics, so both subsets are required. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* One design system for the whole application. These tokens were scoped to
     .review-sheet while the redesign was contained to one page; they are the
     app's palette now, so anything may resolve them. */
  --ground: #e9edf1;
  --sheet: #ffffff;
  --sheet-alt: #f5f8fa;
  --ink: #161a1e;
  --ink-2: #3d4750;
  --muted: #6b7883;
  --faint: #8e9aa4;
  --rule: #dce3ea;
  --rule-2: #eef2f6;
  --accent: #15597c;
  --accent-soft: #e3eef4;
  --accent-ink: #0f4360;
  --ok: #256d51;
  --ok-soft: #e2f0e9;
  --warn: #8c5f0c;
  --warn-soft: #f7edd9;
  --err: #9d3527;
  --err-soft: #f8e5e1;
  --on-accent: #ffffff;
  --f-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.site-header,
.site-footer,
.page-shell {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.site-account {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.brand {
  color: var(--accent);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 32;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.product-label,
.site-footer {
  color: var(--muted);
  font-size: 0.9rem;
}

/* The shell reserves height so the footer sits low. It used to also centre its
   single child, which suits a login card and fights a long list, so centring is
   now opt-in through the page_shell_class block. */
.page-shell {
  min-height: calc(100vh - 10rem);
  display: grid;
  align-items: start;
}

.page-shell-center {
  align-items: center;
}

.page-shell-coursework {
  width: min(1000px, 100%);
  padding-inline: 20px;
}

.page-shell-coursework .workspace-shell {
  min-width: 0;
  max-width: none;
  padding-top: 16px;
}

.hero,
.error-panel,
.auth-panel {
  max-width: 52rem;
  padding-block: 4rem;
}

.dashboard-shell,
.workspace-shell {
  max-width: 52rem;
  padding-block: 2rem 4rem;
}

.dashboard-shell,
.workspace-shell {
  width: 100%;
}

.narrow-shell {
  max-width: 46rem;
}

.coursework-detail-shell {
  max-width: none;
  padding-block: 2rem 4rem;
}

.coursework-detail-shell .page-heading {
  margin-bottom: 2.5rem;
}

.coursework-detail-shell h1 {
  max-width: 32ch;
  overflow-wrap: anywhere;
}

/* The eyebrow reads in the same register as .kicker inside the sheet. */
.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* A 77px headline directly above a sheet whose own h1 is 26px read as two
   unrelated designs. This is the same display face, one step larger. */
h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.lead {
  max-width: 62ch;
  margin: 0.75rem 0 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.status-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

.status-card span {
  color: var(--muted);
}

.error-panel h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

.error-panel p:not(.eyebrow) {
  color: #596273;
  font-size: 1.1rem;
}

/* .button predates .btn and was always the filled call to action. It is kept
   as an alias rather than deleted, because the parked assessment templates
   still use it and should not regress to unstyled forms. */
.button {
  margin-top: 1rem;
}

.page-heading {
  margin-bottom: 2rem;
}

.heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.heading-row h1,
.workspace-shell h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
}

.heading-row .lead {
  margin-bottom: 0;
}

.coursework-progress {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.coursework-progress p,
.coursework-progress .button {
  margin: 0;
}

.content-card,
.empty-state {
  padding: 1.25rem;
  border: 1px solid #d5dde2;
  border-radius: 0.8rem;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 0.8rem 2.5rem rgb(23 32 51 / 6%);
}

.content-card p,
.empty-state span {
  color: #596273;
}

.card-kicker {
  margin: 0 0 0.35rem;
  color: #196657 !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.empty-state {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.35rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  color: var(--accent-ink);
}

.stacked-form {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
}

/* Fields follow the same idiom as .score-input and .comment textarea inside the
   sheet: a --rule hairline on --sheet-alt, squared off, --accent on focus. */
.stacked-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
}

.stacked-form input,
.stacked-form select,
.stacked-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--sheet-alt);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 0.9rem;
}

.stacked-form textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.5;
}

.stacked-form input:focus,
.stacked-form select:focus,
.stacked-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--sheet);
}

.wide-form {
  max-width: none;
}

.choice-group {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid #d5dde2;
  border-radius: 0.8rem;
  background: rgb(255 255 255 / 70%);
}

.choice-group legend {
  padding-inline: 0.4rem;
  font-weight: 800;
}

.choice-card {
  display: flex !important;
  align-items: flex-start;
  grid-template-columns: auto 1fr;
  gap: 0.7rem !important;
}

.choice-card input {
  width: auto;
  margin-top: 0.25rem;
}

.choice-card span {
  display: grid;
  gap: 0.2rem;
}

.choice-card small,
.stacked-form label > small {
  color: #667085;
  font-weight: 500;
  line-height: 1.45;
}

.top-gap {
  margin-top: 0.8rem;
}

.inline-warning {
  margin: 0;
  color: #8a4b14;
}

.compact-button {
  margin-top: 0;
  text-decoration: none;
}

.outcome-list {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.upload-outcome {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border: 1px solid;
  border-radius: 0.6rem;
}

.outcome-ok {
  border-color: #a9cfc4;
  color: #154f43;
  background: #edf8f4;
}

.outcome-error {
  border-color: #e2b5b5;
  color: #7a2020;
  background: #fff2f2;
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.8fr);
  gap: 1rem;
  align-items: start;
}

/* .panel and .sheet are the same component. Aliasing rather than rewriting the
   markup restyles the parked assessment panels for free. */
.panel {
  padding: 1.25rem;
}

.coursework-detail-shell .panel {
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
}

.panel h2 {
  margin: 0;
  font-size: 1.3rem;
}

.section-heading,
.submission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.count-badge,
/* A status reads in the same register as a finding chip. Every status the
   workflow can produce is covered here; three of them previously had no rule at
   all, so "Apstiprināts" and "Gaida vērtēšanu" rendered as the same grey pill. */
.status-pill {
  display: inline-flex;
  width: fit-content;
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  color: var(--muted);
  background: var(--rule-2);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.status-queued,
.status-evaluating {
  color: var(--muted);
  background: var(--rule-2);
}

.status-reviewed {
  color: var(--ok);
  background: var(--ok-soft);
}

.count-badge {
  color: #123f36;
  background: #dceae6;
}

.submission-list {
  display: grid;
  margin-top: 1rem;
}

.submission-row {
  padding-block: 0.9rem;
  border-top: 1px solid #e3e7ea;
}

.submission-row div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.submission-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.submission-link {
  color: #154f43;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2rem;
}

.submission-row small,
.muted {
  color: var(--muted);
  line-height: 1.5;
}

.status-draft {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.status-failed {
  color: var(--err);
  background: var(--err-soft);
}

.row-error {
  margin: -0.4rem 0 0.7rem;
  color: #7a2020;
  font-size: 0.88rem;
}

.failed-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
}

.failed-action .row-error {
  margin: 0;
}

.failed-action form {
  flex: none;
}

.danger-panel,
.danger-confirmation {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid #d9a8a8;
  border-radius: 0.8rem;
  background: #fff7f7;
}

.danger-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.danger-panel h2,
.danger-confirmation h1 {
  margin-top: 0;
}

.danger-panel p {
  margin-bottom: 0;
  color: #6e3333;
}

.danger-link {
  flex: none;
  color: #8f2020;
  font-weight: 800;
}

.danger-button {
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0.55rem;
  color: white;
  background: #9b2525;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.upload-panel .stacked-form {
  margin-top: 1.25rem;
}

.review-shell {
  max-width: 60rem;
}

.approval-badge,
.ai-score {
  display: inline-flex;
  width: fit-content;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  color: #154f43;
  background: #dcefe9;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.notice-box {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--ok);
  border-radius: 0 3px 3px 0;
  color: var(--ink-2);
  background: var(--ok-soft);
  font-size: 0.9rem;
}

.review-error {
  max-width: none;
}

.final-score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
  padding: 1.35rem 1.7rem;
  border-radius: 0.9rem;
  color: white;
  background: #154f43;
}

.final-score span {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.final-score strong {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1;
}

.criteria-stack {
  display: grid;
  gap: 1rem;
}

.criterion-card {
  padding: 1.25rem;
  border: 1px solid #d5dde2;
  border-radius: 0.8rem;
  background: rgb(255 255 255 / 90%);
}

.criterion-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.criterion-card h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.4;
}

.ai-score {
  color: #3b4659;
  background: #e9edf0;
}

.ai-draft {
  margin-block: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  color: #465064;
  background: #f4f6f8;
  line-height: 1.55;
}

.ai-draft summary {
  color: #154f43;
  font-weight: 800;
  cursor: pointer;
}

.review-fields {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
}

.review-fields label {
  display: grid;
  gap: 0.4rem;
  color: #303a4e;
  font-weight: 700;
}

.review-fields input,
.review-fields textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid #b9c2cc;
  border-radius: 0.55rem;
  color: #172033;
  background: white;
  font: inherit;
}

.review-fields textarea {
  resize: vertical;
  line-height: 1.5;
}

.review-fields input:disabled,
.review-fields textarea:disabled {
  color: #303a4e;
  background: #f2f4f5;
  opacity: 1;
}

.review-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.review-actions button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.55rem;
  color: white;
  background: #196657;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.approval-warning {
  margin-bottom: 0;
  color: #667085;
  font-size: 0.88rem;
  line-height: 1.6;
}

.print-feedback {
  width: 100%;
  max-width: 56rem;
  padding-block: 3rem;
}

.print-controls,
.feedback-header,
.print-criterion header,
.feedback-total {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.print-controls {
  align-items: baseline;
  margin-bottom: 2.5rem;
  color: #667085;
  font-size: 0.88rem;
}

.feedback-header {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #154f43;
}

.feedback-header h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.feedback-header p:last-child {
  color: #596273;
}

.draft-badge {
  display: inline-flex;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  color: #714510;
  background: #fae8c9;
  font-size: 0.82rem;
  font-weight: 800;
}

.feedback-total {
  align-items: baseline;
  margin-block: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 0.7rem;
  color: white;
  background: #154f43;
}

.feedback-total strong {
  font-size: 1.6rem;
}

.feedback-criteria {
  display: grid;
  gap: 1rem;
}

.print-criterion {
  padding: 1.1rem 1.2rem;
  border: 1px solid #d5dde2;
  border-radius: 0.7rem;
  background: white;
}

.print-criterion h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.print-criterion header > strong {
  white-space: nowrap;
}

.feedback-copy {
  margin-top: 0.9rem;
  color: #303a4e;
  line-height: 1.55;
  white-space: pre-line;
}

.draft-warning {
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid #e7c78e;
  border-radius: 0.6rem;
  color: #714510;
  background: #fff7e8;
}

.button-secondary {
  margin-top: 1.5rem;
}

.form-error {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--err);
  border-radius: 0 3px 3px 0;
  color: var(--ink-2);
  background: var(--err-soft);
  font-size: 0.9rem;
}

.site-footer {
  padding-block: 1.5rem;
  border-top: 1px solid #dde2e7;
}

@media (max-width: 38rem) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .hero,
  .error-panel,
  .auth-panel,
  .dashboard-shell {
    padding-block: 3rem;
  }

  .workspace-shell {
    padding-block: 3rem;
  }

  .coursework-detail-shell h1 {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
  }

  .heading-row,
  .content-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .heading-actions,
  .print-controls,
  .feedback-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-grid {
    grid-template-columns: 1fr;
  }

  .review-fields {
    grid-template-columns: 1fr;
  }

  .review-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .failed-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .danger-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-actions button {
    width: 100%;
  }
}

@media print {
  :root,
  body {
    color: #000;
    background: #fff;
  }

  .site-header,
  .site-footer,
  .print-controls {
    display: none;
  }

  .page-shell {
    display: block;
    width: 100%;
    min-height: 0;
  }

  .print-feedback {
    max-width: none;
    padding: 0;
  }

  .print-criterion {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* ---------- coursework review sheet ---------- */
.review-sheet {
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.review-sheet .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sheet,
.panel {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(20 35 50 / 6%), 0 8px 24px -10px rgb(20 35 50 / 18%);
}

.sheet {
  overflow: hidden;
}

.review-sheet .sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 1.625rem;
  border-bottom: 1px solid var(--rule-2);
  background: var(--sheet-alt);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}

.review-sheet .sheet-top b {
  color: var(--ink-2);
  font-weight: 600;
}

.pad {
  padding: 1.625rem;
}

.review-sheet .idrow {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.review-sheet .id .kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.review-sheet .id h1 {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 32;
  font-size: 29px;
  font-weight: 600;
  margin: 0 0 0.3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.review-sheet .id .sub {
  font-size: 18px;
  color: var(--muted);
}

.review-sheet .gradebox {
  text-align: right;
  flex: 0 0 auto;
}

.review-sheet .gradebox .lab {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-sheet .grade {
  margin: 6px 0;
  font-family: var(--f-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.review-sheet h2.sec {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 1.75rem 0 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--rule);
}

.review-sheet table.rub {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.review-sheet table.rub th {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  text-align: left;
  padding: 0 0.5rem 0.4375rem 0;
}

.review-sheet table.rub th.sc,
.review-sheet table.rub td.sc {
  width: 5rem;
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

/* Max sits after the assigned score, set apart so the two never read as one
   number. It is reference information, not something the professor sets. */
.review-sheet table.rub th.n,
.review-sheet table.rub td.n {
  text-align: right;
  width: 3.5rem;
  padding-left: 1.5rem;
  padding-right: 0;
}

.review-sheet table.rub td {
  padding: 0.5625rem 0.5rem 0.5625rem 0;
  border-top: 1px solid var(--rule-2);
  vertical-align: baseline;
}

.review-sheet table.rub td.crit {
  font-weight: 500;
  white-space: nowrap;
}

.review-sheet table.rub td.why {
  color: var(--muted);
  font-size: 15px;
  width: 100%;
}

.review-sheet table.rub td.n {
  font-family: var(--f-mono);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.review-sheet .score-input {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 3rem;
  text-align: center;
  padding: 0.2rem 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--sheet);
  color: inherit;
}

.review-sheet .step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--sheet);
  overflow: hidden;
}

.review-sheet .step .score-input {
  border: 0;
  width: 2.25rem;
  background: transparent;
  appearance: textfield;
}

.review-sheet .step .score-input::-webkit-outer-spin-button,
.review-sheet .step .score-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.review-sheet .step button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  width: 1.3125rem;
  height: 1.5625rem;
  cursor: pointer;
  padding: 0;
}

.review-sheet .step button:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* A criterion that lost points reads at a glance: amber when reduced, red when
   it scored nothing. The max column stays muted so only the assigned number
   carries the signal. */
.review-sheet tr.reduced td.crit,
.review-sheet tr.reduced .score-input {
  color: var(--warn);
}

.review-sheet tr.reduced .step {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--rule));
  background: color-mix(in srgb, var(--warn-soft) 55%, var(--sheet));
}

.review-sheet tr.zero td.crit,
.review-sheet tr.zero .score-input {
  color: var(--err);
}

.review-sheet tr.zero .step {
  border-color: color-mix(in srgb, var(--err) 45%, var(--rule));
  background: color-mix(in srgb, var(--err-soft) 55%, var(--sheet));
}

.review-sheet tr.reduced td.n,
.review-sheet tr.zero td.n {
  color: var(--faint);
}

.btn,
.button,
.button-secondary,
.stacked-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.45rem 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.button-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.primary,
.button,
.stacked-form button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn.primary:hover,
.button:hover,
.stacked-form button:hover {
  filter: brightness(1.08);
  color: var(--on-accent);
}

.btn:focus-visible,
.button:focus-visible,
.button-secondary:focus-visible,
.stacked-form button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.review-sheet .comment {
  margin-top: 0.625rem;
}

.review-sheet .comment textarea {
  width: 100%;
  min-height: 8.25rem;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sheet-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.75rem 0.8125rem;
  resize: vertical;
}

.review-sheet .actions {
  display: flex;
  gap: 0.5625rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

.review-sheet .actions .spacer {
  flex: 1 1 auto;
}

.review-sheet .actions .note {
  font-size: 13px;
  color: var(--faint);
}

.review-sheet details.app {
  border-top: 1px solid var(--rule);
  background: var(--sheet-alt);
}

.review-sheet details.app > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.8125rem 1.625rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.review-sheet details.app > summary::-webkit-details-marker {
  display: none;
}

.review-sheet details.app > summary .tri {
  transition: transform 0.18s;
  font-size: 10px;
  color: var(--accent);
}

.review-sheet details.app[open] > summary .tri {
  transform: rotate(90deg);
}

.review-sheet details.app > summary .count {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
  color: var(--faint);
}

.review-sheet .app-in {
  padding: 0.125rem 1.625rem 1.5rem;
}

/* One verified calculation. A passing check is a single line; only a check that
   needs the professor's eye expands into quote, verification and consequence. */
.review-sheet .chk {
  display: flex;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule-2);
  align-items: baseline;
}

.review-sheet .chk:first-child {
  border-top: 0;
}

.review-sheet .chk-no,
.review-sheet .chk-warn {
  padding: 0.9rem 0;
  align-items: flex-start;
}

.review-sheet .mark {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 19px;
  width: 1.125rem;
  text-align: left;
}

.review-sheet .mark.ok {
  color: var(--ok);
}

.review-sheet .mark.warn {
  color: var(--warn);
}

.review-sheet .mark.no {
  color: var(--err);
}

.review-sheet .mark.note {
  color: var(--accent-ink);
}

.review-sheet .chk .t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
}

.review-sheet .chk .t b {
  font-weight: 600;
  color: var(--ink);
}

.review-sheet .chk .t .m {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.review-sheet .chk-head {
  margin-bottom: 0.15rem;
}

.review-sheet .r {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--faint);
}

/* The student's own words, in the display face so a citation reads as one. */
.review-sheet .quote {
  border-left: 2px solid var(--rule);
  padding: 0.05rem 0 0.05rem 0.7rem;
  margin: 0.4rem 0 0;
  color: var(--ink-2);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 14;
  font-size: 16px;
  line-height: 1.5;
}

.review-sheet .chk-no .m,
.review-sheet .chk-warn .m {
  display: block;
  margin-top: 0.45rem;
  line-height: 1.6;
}

.review-sheet .why-wrong {
  background: var(--err-soft);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin: 0.55rem 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.review-sheet .chk-warn .why-wrong,
.review-sheet .audit-attention {
  background: var(--warn-soft);
}

.review-sheet .app-retry {
  margin: 1.25rem 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--faint);
}

@media (width <= 40rem) {
  .review-sheet .pad,
  .review-sheet .sheet-top,
  .review-sheet details.app > summary,
  .review-sheet .app-in {
    padding-left: 1.0625rem;
    padding-right: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-sheet details.app > summary .tri {
    transition: none;
  }
}

/* ---------- coursework triage list ---------- */
.review-sheet .bbar {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--rule-2);
  background: var(--sheet-alt);
  flex-wrap: wrap;
}

.review-sheet .bbar .t {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.review-sheet .bbar .spacer {
  flex: 1 1 auto;
}

.review-sheet .bbar-empty {
  padding: 1rem;
}

.review-sheet .tscroll {
  overflow-x: auto;
}

.review-sheet table.bt {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 41rem;
}

.review-sheet table.bt th {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  text-align: left;
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.review-sheet table.bt td {
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
}

.review-sheet table.bt tr:last-child td {
  border-bottom: 0;
}

.review-sheet table.bt td.g {
  font-family: var(--f-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 2.75rem;
}

.review-sheet table.bt td.nm {
  font-weight: 500;
  white-space: nowrap;
}

.review-sheet table.bt td.nm a,
.review-sheet table.bt td.sm a {
  text-decoration: none;
}

.review-sheet table.bt td.nm a:hover,
.review-sheet table.bt td.sm a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

/* The filename stays visible under the student's name: it is how the professor
   matches a row back to the file they uploaded. */
.review-sheet table.bt .nm-file {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--faint);
}

.review-sheet table.bt td.sm {
  color: var(--muted);
  font-size: 14px;
}

/* FilePond uploads commit directly to grading; cancellation cannot undo a commit. */
.upload-panel .filepond--action-abort-item-processing {
  display: none;
}

.upload-panel .filepond--root {
  font-family: inherit;
}

.upload-panel .filepond--panel-root {
  border: 1px dashed currentColor;
}

/* Coursework sizing follows the larger review sheet without resizing other pages. */
.page-shell-coursework {
  font-size: 18px;
}

.page-shell-coursework .page-heading h1 {
  font-size: clamp(34px, 4vw, 46px);
}

.page-shell-coursework .eyebrow {
  font-size: 12px;
}

.page-shell-coursework .lead {
  font-size: 17px;
}

.page-shell-coursework .panel h2 {
  font-size: 23px;
}

.page-shell-coursework .btn,
.page-shell-coursework .button,
.page-shell-coursework .button-secondary,
.page-shell-coursework .stacked-form button {
  font-size: 14px;
}

.page-shell-coursework .filepond--root {
  font-size: 18px;
}

.upload-panel .filepond--file-status {
  max-width: 45%;
}

.upload-panel .filepond--file-status * {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body:has(.page-shell-coursework) .site-header {
  width: min(1000px, 100%);
  padding-inline: 20px;
}

.review-sheet .sheet-top {
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
}

.review-sheet .sheet-pending {
  color: var(--warn);
  background: var(--warn-soft);
}

.review-sheet .sheet-reviewed {
  color: var(--ok);
  background: var(--ok-soft);
}

.review-sheet .sheet-top .btn {
  margin-left: auto;
  letter-spacing: normal;
  text-transform: none;
}

.review-sheet .comment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.review-sheet .comment-heading .btn {
  padding: 6px;
}

.review-sheet [data-copy-comment].copied {
  color: var(--ok);
  border-color: var(--ok);
}

.review-sheet [data-copy-comment].copied svg {
  display: none;
}

.review-sheet [data-copy-comment].copied::after {
  content: "✓";
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.review-sheet .copy-status {
  color: var(--muted);
  font-size: 14px;
}

.review-sheet tr.tot td {
  border-top: 2px solid var(--ink);
  padding-top: 11px;
  font-weight: 600;
}

.review-sheet tr.tot .v {
  font-family: var(--f-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.review-sheet .grade .score-input {
  font: inherit;
}

/* Native MathML avoids external fonts and inline-style CSP exceptions. */
.review-sheet .app-in[data-math] math {
  font-size: 1.2em;
}

.review-sheet [data-math] math[display="block"] {
  overflow-x: auto;
  max-width: 100%;
  margin: 0.5rem 0;
}

.review-sheet .check-location {
  position: relative;
  display: inline-block;
  vertical-align: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.review-sheet .check-location > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.review-sheet .check-location > .r {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1;
  width: max-content;
  max-width: min(24rem, calc(100vw - 4rem));
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--sheet);
  color: var(--ink-2);
  white-space: normal;
}

.review-sheet .check-location > summary::-webkit-details-marker {
  display: none;
}