:root {
  --paper: #f6f3ec;
  --ink: #111111;
  --accent: #c8102e;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --space: 8px;
  --radius: 0;

  --ink-muted: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-faded: color-mix(in srgb, var(--ink) 20%, transparent);
  --ink-band: color-mix(in srgb, var(--ink) 5%, transparent);

  --rule-thick: 6px;
  --rule: 2px;
  --rule-thin: 1px;

  --text-xs: 12px;
  --text-s: 15px;
  --text-m: 18px;
  --text-l: 22px;
  --text-xl: 28px;
  --text-title: clamp(48px, 11vw, 132px);
  --text-figure: clamp(48px, 12vw, 88px);

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;

  --leading: 1.5;
  --leading-tight: 0.9;
  --tracking-caps: 0.12em;
  --tracking-tight: -0.04em;

  --page-width: 960px;
  --touch: 44px;
  --breakpoint: 640px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-m);
  font-weight: var(--weight-regular);
  line-height: var(--leading);
}

/* Page-width column; the My record band runs full width around its own column */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: calc(var(--space) * 3);
  padding-right: calc(var(--space) * 3);
}

/* Masthead and title */
.masthead {
  padding-top: calc(var(--space) * 6);
}

.masthead p {
  margin: 0;
  padding-bottom: calc(var(--space) * 2);
  border-bottom: var(--rule-thick) solid var(--ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

h1 {
  margin: calc(var(--space) * 4) 0 calc(var(--space) * 6);
  font-size: var(--text-title);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  margin: calc(var(--space) * 6) 0 calc(var(--space) * 3);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* This semester runs as three numbered steps, separated by space, not rules */
.step + .step {
  margin-top: calc(var(--space) * 8);
}

.step-title {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  margin: 0 0 calc(var(--space) * 3);
  font-size: var(--text-l);
  letter-spacing: normal;
  text-transform: none;
}

.step-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--space) * 4);
  height: calc(var(--space) * 4);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-s);
}

/* Term and year, step 1 */
.term-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc(var(--space) * 30)));
  gap: calc(var(--space) * 3);
}

/* GPA figures: label left, number right */
.figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: calc(var(--space) * 3);
  padding-bottom: calc(var(--space) * 3);
  border-bottom: var(--rule-thin) solid var(--ink-faded);
}

.figure p {
  margin: 0;
}

.figure .label {
  flex: 1 1 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.figure .num {
  font-size: var(--text-figure);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.figure .note {
  flex-basis: 100%;
  margin-top: var(--space);
  color: var(--ink-muted);
  font-size: var(--text-s);
}

/* Step 3 has no lines inside it */
.step .figure {
  padding-bottom: 0;
  border-bottom: 0;
}

.figure + .figure {
  padding-top: calc(var(--space) * 3);
}

/* The cumulative row leads: about twice the semester row */
.figure-cumulative .label {
  font-size: max(var(--text-xl), calc(var(--text-title) * 0.4));
}

.figure-cumulative .num {
  font-size: calc(var(--text-title) * 1.25);
}

/* Error under the Term and Year pair spans both columns */
.term-picker .error {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* Preview line above Add to cumulative, styled like a GPA note */
.preview {
  margin: 0 0 calc(var(--space) * 2);
  color: var(--ink-muted);
  font-size: var(--text-s);
}

/* Add to cumulative and Reset */
.semester-actions {
  margin-top: calc(var(--space) * 3);
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space) * 3);
}

/* My record: a faint full-width band under the page's one thick section rule */
.record {
  margin-top: calc(var(--space) * 12);
  padding: calc(var(--space) * 6) 0 calc(var(--space) * 12);
  border-top: var(--rule-thick) solid var(--ink);
  background: var(--ink-band);
}

.section-title {
  margin-top: 0;
  margin-bottom: calc(var(--space) * 4);
  font-size: calc(var(--text-title) * 0.5);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

.saved-semester + .saved-semester {
  margin-top: calc(var(--space) * 6);
}

.saved-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: calc(var(--space) * 3);
  margin-bottom: calc(var(--space) * 2);
}

.saved-header h3,
.saved-header p {
  margin: 0;
}

.saved-header h3,
.saved-gpa {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.saved-gpa {
  font-variant-numeric: tabular-nums;
}

.saved-header .note {
  flex-basis: 100%;
  margin-top: var(--space);
  color: var(--ink-muted);
  font-size: var(--text-s);
}

/* Delete semester and Clear all data, with their on-page confirmation */
.confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space) calc(var(--space) * 2);
  margin-top: calc(var(--space) * 2);
}

.confirm p {
  margin: 0;
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
}

.confirm span {
  color: var(--ink-muted);
}

/* Edit and Delete semester sit side by side under each saved semester */
.saved-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--space) * 3);
  margin-top: calc(var(--space) * 2);
}

.saved-actions .confirm {
  margin-top: 0;
}

.saved-actions .error {
  flex-basis: 100%;
}

.clear-all {
  margin-top: calc(var(--space) * 6);
}

/* Empty state */
.empty {
  padding: calc(var(--space) * 5) 0;
  border-bottom: var(--rule-thin) solid var(--ink-faded);
}

.empty p {
  margin: 0;
  font-size: var(--text-l);
}

.empty .num {
  margin-bottom: calc(var(--space) * 2);
  color: var(--ink-faded);
  font-size: var(--text-figure);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

/* Course list */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 0 0 calc(var(--space) * 2);
  border-bottom: var(--rule) solid var(--ink);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-align: left;
  text-transform: uppercase;
}

td {
  padding: calc(var(--space) * 2) var(--space) calc(var(--space) * 2) 0;
  border-bottom: var(--rule-thin) solid var(--ink-faded);
  vertical-align: baseline;
}

td.name {
  font-size: var(--text-l);
  overflow-wrap: anywhere;
}

td.cr,
th.cr {
  width: calc(var(--space) * 11);
  font-variant-numeric: tabular-nums;
}

td.grade {
  width: calc(var(--space) * 16);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

/* Saved semesters' courses are read-only: smaller and faded */
.saved-semester table {
  color: var(--ink-muted);
}

.saved-semester th {
  border-bottom: var(--rule-thin) solid var(--ink-faded);
}

.saved-semester td {
  padding-top: var(--space);
  padding-bottom: var(--space);
}

.saved-semester td.name {
  font-size: var(--text-s);
}

.saved-semester td.grade {
  font-size: var(--text-m);
}

.not-in-gpa {
  display: block;
  margin-top: var(--space);
  color: var(--ink-muted);
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
}

td.act,
th.act {
  width: calc(var(--space) * 9);
  padding-right: 0;
  text-align: right;
}

.link {
  min-height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-transform: uppercase;
}

/* Add a course form, under the course list in step 2 */
form {
  margin-top: calc(var(--space) * 4);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: calc(var(--space) * 3);
  align-items: start;
}

label {
  display: block;
  margin-bottom: var(--space);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

input,
select {
  width: 100%;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  border-bottom: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-m);
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: var(--rule) solid var(--ink);
  outline-offset: var(--rule);
}

.field.has-error input,
.field.has-error select {
  border-bottom-color: var(--accent);
}

.error {
  margin: var(--space) 0 0;
  color: var(--accent);
  font-size: var(--text-s);
}

.error::before {
  content: "— ";
}

/* Lines the button up with the fields, below the label */
.btn-wrap {
  padding-top: calc(var(--text-xs) + var(--space));
}

.btn {
  min-height: var(--touch);
  padding: 0 calc(var(--space) * 2);
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Phone: 640px is --breakpoint; custom properties can't be read inside @media */
@media (max-width: 640px) {
  .page {
    padding-left: calc(var(--space) * 2);
    padding-right: calc(var(--space) * 2);
  }

  .masthead {
    padding-top: calc(var(--space) * 4);
  }

  .term-picker {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space) * 2);
  }

  form {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space) * 2);
  }

  .field.wide,
  .btn-wrap {
    grid-column: 1 / -1;
  }

  .btn-wrap {
    padding-top: 0;
  }

  .btn {
    width: 100%;
  }

  /* Keep "Yes, delete / Cancel" on one line */
  .confirm .btn {
    width: auto;
  }

  td.name {
    font-size: var(--text-m);
  }

  /* Keep the cumulative row clearly larger than the semester row */
  .figure-semester .label {
    font-size: var(--text-l);
  }

  .figure-semester .num {
    font-size: calc(var(--text-figure) * 0.75);
  }

  td.grade {
    width: calc(var(--space) * 10);
  }
}