/*
  BlindGrader public site, "preprint" direction.
  Audience: college math and science faculty. The page borrows the working
  conventions of a well-set paper (figures with captions, a booktabs table,
  margin notes, a Limitations section) and skips marketing chrome.

  Type: STIX Two Text for everything you read (the typeface of scientific
  publishing), Source Sans 3 only for interface controls, system math fonts
  for MathML. Color: ink on white, one link blue, and red reserved for
  annotation marks.
*/
:root {
  --paper: #ffffff;
  --plate: #f3f3f0;      /* figure background */
  --ink: #1b2236;
  --ink-2: #565b61;      /* secondary text */
  --rule: #d6d6d1;
  --rule-strong: #1b2236;
  --link: #1f3fae;
  --annot: #b4500a;      /* dark highlighter orange: annotations only (readable on white) */
  --cobalt: #1f3fae;     /* brand */
  --cobalt-deep: #16213f;
  --orange: #ff8f2a;     /* brand accent: the highlighter */
  --on-cobalt: #f4f6fd;
  --on-cobalt-2: #cfd9f6;
  --student: #2b4cad;    /* student's pen in figures */
  --redact: #000000;
  --focus: #e8a600;

  --serif: "STIX Two Text", "STIX Two", "Times New Roman", Times, serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --math: "STIX Two Math", "Latin Modern Math", "Cambria Math", math;

  --text: 1.25rem;       /* 20px body */
  --small: 1.0625rem;    /* 17px captions, notes */
  --h1: clamp(2.5rem, 4.4vw, 3.5rem);
  --h2: clamp(1.75rem, 2.6vw, 2.1rem);
  --h3: 1.3rem;

  --main: 44rem;
  --margin: 16rem;
  --colgap: 3.5rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text)/1.6 var(--serif);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}
math { font-family: var(--math); font-size: 1.05em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--h1); letter-spacing: -0.012em; }
h2 { font-size: var(--h2); letter-spacing: -0.006em; }
h3 { font-size: var(--h3); line-height: 1.3; }
.wrap { max-width: calc(var(--main) + var(--margin) + var(--colgap)); margin: 0 auto; padding-inline: max(16px, 4vw); box-sizing: content-box; }

/* ---------- main column + margin notes ---------- */
.pair { display: grid; grid-template-columns: minmax(0, var(--main)) minmax(0, var(--margin)); column-gap: var(--colgap); align-items: start; }
.pair > .main { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.pair > .margin { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; padding-top: 0.35rem; }
.note { font-size: var(--small); line-height: 1.5; color: var(--ink-2); }
.note b { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > .margin { grid-column: 1; padding-top: 1.2rem; }
  .note { border-left: 2px solid var(--rule); padding-left: 0.9rem; }
}

/* ---------- interface type (Source Sans) ---------- */
.btn, nav, label, .sheet-label, footer, .status { font-family: var(--sans); }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--rule); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 18px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.lockup svg { width: 34px; height: 34px; flex: none; }
.wordmark { font: 600 1.6rem/1 var(--serif); letter-spacing: -0.01em; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; font-size: 1.05rem; }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { text-decoration: underline; }
@media (max-width: 720px) { nav li.wide { display: none; } }

.btn { display: inline-block; font-size: 1.05rem; font-weight: 600; line-height: 1; padding: 0.8rem 1.15rem; border-radius: 2px; text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.btn:hover { background: var(--plate); text-decoration: none; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #000; }
nav .btn { padding: 0.6rem 0.9rem; }

/* ---------- sections ---------- */
section { padding-block: clamp(56px, 7vw, 88px); }
section + section { border-top: 1px solid var(--rule); }
.title-block { padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6vw, 80px); }
.lede { font-size: 1.4rem; line-height: 1.5; color: var(--ink); max-width: 38em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 0.6rem; font-family: var(--sans); font-size: 1.05rem; }

/* ---------- figures ---------- */
.fig { margin: clamp(36px, 5vw, 56px) 0 0; }
.plate { background: var(--plate); padding: clamp(16px, 3vw, 36px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
@media (max-width: 760px) { .plate { grid-template-columns: minmax(0, 1fr); } }
figcaption { font-size: var(--small); line-height: 1.5; color: var(--ink-2); margin-top: 14px; max-width: calc(var(--main) + 6rem); }
figcaption b { color: var(--ink); font-weight: 600; }
.ref { font-family: var(--sans); font-weight: 700; font-size: 0.85em; color: var(--annot); }

/* a page of student work */
.sheet-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sheet-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.sheet-label code { font: 400 0.92rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-2); overflow-wrap: anywhere; }
.sheet { position: relative; background: var(--paper); border: 1px solid #c9c9c3; aspect-ratio: 8.5 / 11; padding: 7% 8% 6%; font-size: clamp(0.78rem, 1.15vw, 0.95rem); line-height: 1.45; display: flex; flex-direction: column; font-variant-numeric: lining-nums; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 6%; }
.sheet-head .course { font-weight: 600; }
.sheet-head .who { white-space: nowrap; }
.sheet-head .who .hand { font-size: 1.55em; }
.hand { font-family: var(--hand); color: var(--student); }
.prob { padding-top: 2.6%; }
.prob .stmt { display: block; }
.prob .work { display: block; font-family: var(--hand); color: var(--student); font-size: 1.5em; line-height: 1.25; padding: 1.5% 0 2% 5%; }
.prob .work sup { font-size: 0.65em; }
.sheet-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 0.85em; color: var(--ink-2); }

/* the redacted copy: removed regions are blank, with annotation outlines */
.sheet.after .gone { visibility: hidden; }
.cut { position: absolute; border: 1.5px dashed var(--annot); pointer-events: none; }
.cut .tag { position: absolute; top: -0.8em; right: -0.6em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--annot); color: var(--annot); font: 700 0.9em/1.45em var(--sans); text-align: center; }
.cut-band { left: 0; right: 0; top: 0; height: 13%; border-top: none; border-left: none; border-right: none; }
.cut-band .tag { right: 0.8em; top: auto; bottom: -0.8em; }
.cut-foot { left: 6.5%; bottom: 3.2%; width: 30%; height: 5%; }

/* ---------- method ---------- */
.steps { margin: 0.4rem 0 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 1.3rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.5rem; }
.steps li::before { content: counter(s) "."; font-weight: 600; font-variant-numeric: lining-nums; line-height: 1.3; font-size: 1.25rem; }
.steps h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }

/* ---------- tables (booktabs) ---------- */
.tablewrap { overflow-x: auto; }
table.booktabs { border-collapse: collapse; width: 100%; font-size: 1.05rem; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
.booktabs caption { caption-side: top; text-align: left; font-size: var(--small); color: var(--ink-2); padding-bottom: 10px; }
.booktabs caption b { color: var(--ink); font-weight: 600; }
.booktabs thead th { text-align: left; font-weight: 600; padding: 0.7rem 1rem 0.55rem 0; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; }
.booktabs td { padding: 0.6rem 1rem 0.6rem 0; vertical-align: top; }
.booktabs tbody tr:last-child td { border-bottom: 2px solid var(--rule-strong); }
.booktabs .num { text-align: right; white-space: nowrap; padding-right: 1.6rem; }
.booktabs .no { color: var(--ink-2); }
.booktabs .yes { font-weight: 600; }

.result { background: var(--paper); border: 1px solid #c9c9c3; padding: clamp(16px, 3vw, 28px); }
.result-head { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; font-family: var(--sans); font-size: 1.02rem; margin-bottom: 14px; color: var(--ink-2); }
.result-head .id { font-weight: 700; color: var(--ink); }
.result-head b { color: var(--ink); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.result-note { font-size: var(--small); color: var(--ink-2); margin-top: 12px; }
.deduct { color: var(--annot); font-weight: 600; }
.fig-solo .plate { grid-template-columns: minmax(0, 1fr); }

/* ---------- definition list ---------- */
.defs { margin: 0.4rem 0 0; display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.defs dt, .defs dd { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.defs dt { font-weight: 600; padding-right: 1.4rem; }
@media (max-width: 640px) {
  .defs { grid-template-columns: minmax(0, 1fr); }
  .defs dt { border-bottom: none; padding-bottom: 0.1rem; }
  .defs dd { padding-top: 0; }
}

/* limitations */
.limits { margin: 0.4rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.75rem; }
.limits li::marker { color: var(--ink-2); }

/* faq */
.faq { margin-top: 0.4rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; position: relative; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.95rem; font-family: var(--sans); font-weight: 400; color: var(--ink-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 1.1rem; }

/* ---------- pilot form ---------- */
.pilot { background: var(--plate); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 0.6rem; font-family: var(--sans); }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 1rem; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea { font: 400 1.05rem/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid #a9aaa4; border-radius: 2px; padding: 0.65rem 0.75rem; width: 100%; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.status { font-size: 1rem; color: var(--ink-2); }
.status.err { color: var(--annot); }
.sent-msg { grid-column: 1 / -1; background: var(--paper); border: 1px solid var(--rule); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--rule); padding-block: 28px 36px; color: var(--ink-2); font-size: 1rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; }
footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
footer a { color: var(--ink-2); }
footer .lockup svg { width: 24px; height: 24px; }
footer .wordmark { font-size: 1.15rem; }

/* ---------- legal pages ---------- */
.doc { padding-block: clamp(40px, 6vw, 72px); }
.doc .main { max-width: var(--main); display: flex; flex-direction: column; gap: 0.9rem; }
.doc h1 { font-size: clamp(2.1rem, 4vw, 2.8rem); }
.doc h2 { font-size: 1.45rem; margin-top: 1.6rem; }
.doc .updated { color: var(--ink-2); font-size: var(--small); }
.doc .draft { background: #fdf3d8; border-left: 3px solid var(--focus); padding: 0.8rem 1rem; font-size: var(--small); }
.doc ul { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prob .work + .work { padding-top: 0; }
.booktabs .nowrap { white-space: nowrap; }
/* below desktop width the sample pages size to their content instead of letter proportions */
@media (max-width: 1100px) {
  .sheet { aspect-ratio: auto; }
  .sheet-foot { padding-top: 1.4rem; }
}

/* ---------- brand layer: cobalt and safety orange ---------- */
.lockup img { display: block; height: 22px; width: auto; }
footer .lockup img { height: 17px; }
.site-head { background: var(--cobalt); border-bottom: none; }
.site-head nav a { color: var(--on-cobalt); }
.site-head nav .btn { border-color: var(--on-cobalt); color: var(--on-cobalt); }
.site-head nav .btn:hover { background: rgba(255,255,255,.12); }
.btn { border-color: var(--cobalt); color: var(--cobalt); }
.btn:hover { background: #eef2fc; }
.btn-solid { background: var(--orange); border-color: var(--orange); color: var(--cobalt-deep); }
.btn-solid:hover { background: #f27c12; border-color: #f27c12; }

.title-block { background: var(--cobalt); color: var(--on-cobalt); }
.title-block h1 { color: #fff; }
.title-block .lede { color: var(--on-cobalt); }
.title-block .actions a:not(.btn) { color: #fff; }
.title-block .note { color: var(--on-cobalt-2); border-color: rgba(255,255,255,.25); }
.title-block figcaption { color: var(--on-cobalt-2); }
.title-block figcaption b { color: #fff; }
.title-block .ref { color: #ffb36b; }
.title-block .plate { background: #eef2fc; }
section.title-block + section { border-top: none; }

.pilot { background: var(--cobalt); color: var(--on-cobalt); }
.pilot h2 { color: #fff; }
.pilot .field label { color: #fff; }
.pilot .field .opt { color: var(--on-cobalt-2); }
.pilot .note { color: var(--on-cobalt-2); }
.pilot .note a { color: #fff; }
.pilot .status { color: var(--on-cobalt-2); }
.pilot .status.err { color: #ffd0a8; }
.pilot .field input, .pilot .field select, .pilot .field textarea { border-color: transparent; }
.pilot .sent-msg { color: var(--ink); }

footer { background: var(--cobalt-deep); color: var(--on-cobalt-2); border-top: none; }
footer a { color: var(--on-cobalt-2); }
@media (max-width: 980px) { .title-block .note, .pilot .note { border-left-color: rgba(255,255,255,.3); } }
.title-block .plate { color: var(--ink); }
.title-block .sheet-label, .title-block .sheet { color: var(--ink); }