/*
 * App screens on the brand (ink, chalk, one lime; Syne and Manrope): the sign-in page,
 * templates/account/login.html, so far. Not static/dist/app.css, which is Tailwind's build
 * of static/src/app.css for the rest of the app; this file is hand-written and never built.
 *
 * - The form, input, label and alert rules come first and are meant for every later
 *   screen on the brand; the sign-in layout follows them.
 * - Every class starts with "sp-", for the reason landing.css's start with "lp-":
 *   Tailwind scans the whole repo for class-like words, and no utility uses the prefix.
 * - Mobile first, one breakpoint: 900px, the landing's.
 * - No CSS url function and no import at-rule, comments included: the production
 *   collectstatic rewrites both wherever they appear, and dies on a path it cannot find.
 * - Colours are the tokens in static/css/tokens.css and nothing else. A new text colour
 *   joins the PAIRS table in tests/test_sign_in_page.py.
 */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--sp-chalk);
  -webkit-text-size-adjust: 100%;
}

body.sp {
  --sp-focus: var(--sp-ink);
  margin: 0;
  font-family: var(--sp-font-body);
  line-height: normal;
  color: var(--sp-ink);
  background: var(--sp-chalk);
  -webkit-font-smoothing: antialiased;
}

/* Read aloud, never seen: a form label the design leaves visual-only. */
.sp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--sp-focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible),
#main:focus {
  outline: none;
}

.sp-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--sp-lime);
  color: var(--sp-ink);
  font-weight: 800;
  text-decoration: none;
}

.sp-skip:focus {
  top: 12px;
}

/* ---------- Forms ---------- */

.sp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A label with a link on the far side of it, as Password has "Forgot it?". */
.sp-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sp-label {
  font-size: 14px;
  font-weight: 700;
}

.sp-input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 12px;
  background: var(--sp-chalk);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 16px;
}

/* The design's placeholder grey. It is 2.8:1 on chalk, under the 4.5:1 every other
   text colour here clears; the label above the box says what goes in it. */
.sp-input::placeholder {
  color: var(--sp-ink-dim);
  opacity: 1;
}

.sp-input:focus {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

/* Room on the right for the Show/Hide pill laid over it. */
.sp-input-pw {
  padding-right: 76px;
}

.sp-input-wrap {
  position: relative;
  display: flex;
}

/* Show/Hide on a password input; static/js/app.js flips it. */
.sp-reveal {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  min-width: 60px;
  padding: 0 12px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.sp-field-error {
  margin: 0;
  color: var(--sp-error);
  font-size: 13px;
}

/* A field's help and errors, in the one block the signup live check swaps. Its children
   sit in the field's own column, so an empty block adds no gap. */
.sp-field-notes {
  display: contents;
}

.sp-field-help {
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sp-field-help ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.sp-btn,
.sp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-weight: 800;
  cursor: pointer;
}

.sp-btn {
  min-height: 56px;
  margin-top: 4px;
  border: 0;
  background: var(--sp-lime);
  font-size: 17px;
}

/* The lime button as a link ("Request a new link", "Sign in"): no underline, and the
   card's link hover would grey its ink on lime. */
a.sp-btn,
.sp-card a.sp-btn:hover {
  color: var(--sp-ink);
  text-decoration: none;
}

/* The provider buttons, shown only when Google or Microsoft is configured. */
.sp-btn-outline {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--sp-ink);
  background: var(--sp-paper);
  font-size: 15px;
}

.sp-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

.sp-or::before,
.sp-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1.5px solid var(--sp-chalk-line);
}

.sp-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-providers form {
  margin: 0;
}

/* ---------- Alerts ---------- */

.sp-alert,
.sp-notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.45;
}

.sp-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--sp-error);
  background: var(--sp-error-wash);
}

.sp-alert p {
  margin: 0;
}

.sp-alert-icon {
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--sp-error);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A flash message: allauth's, or "Signed out after 10 minutes without activity." */
.sp-notice {
  border: 1.5px solid var(--sp-ink);
  background: var(--sp-chalk);
}

/* ---------- The sign-in page ---------- */

.sp-auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The ink panel: a short header on a phone, the left half from 900px. */
.sp-auth-brand {
  --sp-focus: var(--sp-lime);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 20px 28px;
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

/* A 44px target that takes the logo's height in the layout: the negative margin gives
   back what the min-height adds, so the panel sits where the design puts it. */
.sp-brand {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-block: -8px;
  color: var(--sp-chalk);
  text-decoration: none;
}

.sp-logo {
  width: 28px;
  height: 28px;
}

.sp-logo-wing {
  fill: var(--sp-lime);
}

.sp-logo-fold {
  stroke: var(--sp-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sp-wordmark {
  font-family: var(--sp-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-pitch {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
}

.sp-auth-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.sp-auth-title span {
  display: block;
}

.sp-auth-title .sp-accent {
  color: var(--sp-lime);
}

/* Two deadline rows of the kind the app draws; desktop only. */
.sp-sample {
  display: none;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-sample-row {
  --sp-sample-big: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--sp-ink-rule);
  border-radius: 14px;
  background: var(--sp-ink-raised);
  color: var(--sp-chalk);
}

/* Not the design's 52px: Syne 800 is a wide face, and "THU" ran under "Tutorial". 3.9
   times the big line's size is the landing's fix for the same rows (.lp-row-when). */
.sp-sample-when {
  flex: none;
  width: calc(3.9 * var(--sp-sample-big));
  line-height: 1.05;
  text-align: center;
}

.sp-sample-big {
  display: block;
  font-family: var(--sp-font-display);
  font-size: var(--sp-sample-big);
  font-weight: 800;
}

.sp-sample-small {
  display: block;
  color: var(--sp-ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sp-sample-what {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-sample-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.sp-sample-note {
  display: block;
  color: var(--sp-ink-muted);
  font-size: 13px;
}

.sp-pill {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.sp-pill-ghost {
  border: 1px solid var(--sp-ink-line);
  color: var(--sp-chalk);
}

.sp-pill-lime {
  background: var(--sp-lime);
  color: var(--sp-ink);
}

/* "Live at N universities": in the ink panel from 900px, under the card below it. */
.sp-live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-live-dot {
  flex: none;
  border-radius: 50%;
  background: var(--sp-lime);
}

.sp-live-ink {
  display: none;
  gap: 10px;
  color: var(--sp-ink-muted);
  font-size: 13px;
}

.sp-live-ink .sp-live-dot {
  width: 9px;
  height: 9px;
}

.sp-live-chalk {
  justify-content: center;
  margin-top: auto;
  padding-top: 24px;
  color: var(--sp-chalk-muted);
  font-size: 12px;
}

/* The design's 8px is the dot inside its border, so 11px across. */
.sp-live-chalk .sp-live-dot {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--sp-ink);
}

/* The card's column. */
.sp-auth-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 20px 32px;
}

.sp-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 20px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-paper);
}

.sp-card a {
  color: var(--sp-ink);
  font-weight: 700;
}

.sp-card a:hover {
  color: var(--sp-hover);
}

.sp-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-card-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sp-card-lede {
  display: none;
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
}

.sp-card .sp-forgot {
  color: var(--sp-chalk-muted);
  font-size: 13px;
}

.sp-card-foot {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
  text-align: center;
}

/* What a page has to say, on every width: unlike .sp-card-lede, which phones drop. */
.sp-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* The terms line under Create account. */
.sp-card-fine {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (min-width: 900px) {
  /* Side by side from 900px. The design's own row wraps below 1124px; this one does
     not, so the split holds down to the breakpoint and is the design's at 1440. */
  .sp-auth {
    flex-direction: row;
  }

  /* The design's flex bases are content-box, padding outside them; so are these. */
  .sp-auth-brand,
  .sp-auth-main {
    box-sizing: content-box;
    min-width: 0;
  }

  .sp-auth-brand {
    flex: 1 1 460px;
    justify-content: space-between;
    gap: 48px;
    padding: 32px 40px 40px;
  }

  .sp-brand {
    gap: 10px;
    margin-block: -5px;
  }

  .sp-logo {
    width: 34px;
    height: 34px;
  }

  .sp-wordmark {
    font-size: 23px;
  }

  .sp-auth-title {
    font-size: clamp(44px, 5vw, 72px);
  }

  .sp-sample,
  .sp-live-ink {
    display: flex;
  }

  .sp-live-chalk {
    display: none;
  }

  .sp-auth-main {
    flex: 1 1 520px;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
  }

  /* The design's 440px is the card's content box; this is the same card measured
     border-box, so it can never overflow a narrower column. */
  .sp-card {
    width: 100%;
    max-width: calc(440px + 2 * 36px + 2 * 1.5px);
    gap: 22px;
    padding: 36px;
    border-radius: 22px;
  }

  .sp-card-title {
    font-size: 36px;
  }

  .sp-card-lede {
    display: block;
  }

  .sp-form {
    gap: 18px;
  }
}

/* Nothing can flip the password box without scripting, so the pill would do nothing. */
@media (scripting: none) {
  .sp-reveal {
    display: none;
  }

  .sp-input-pw {
    padding-right: 16px;
  }

  /* Nothing can open the add-a-step form, so it stands open and its two buttons go. */
  .sp-step-open,
  .sp-step-cancel {
    display: none;
  }
}

/* ---------- The app on the brand: templates/app/base.html ---------- */

/*
 * These pages also load static/dist/app.css, for the overlays not yet redesigned, so
 * Tailwind's preflight is underneath: it zeroes margins and borders, unstyles links and
 * lists, and blocks every svg. Everything below states what it relies on rather than
 * leaning on browser defaults, and wins because Tailwind's rules sit in cascade layers.
 * Where the design files size a box content-box, so do these, as on the landing.
 */

/* Phones only, and from 900px only: the design's two wordings of one control. */
.sp-m {
  display: inline;
}

.sp-d {
  display: none;
}

.sp-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The bar's height: its 44px brand and 12px of padding above and below, 14px from 900px.
   Schedule's week (.sp-fit) is the window less this. */
.sp-app {
  --sp-appbar-h: 68px;
}

.sp-appbar {
  --sp-focus: var(--sp-lime);
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

.sp-appbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(1200px + 2 * 32px);
  margin: 0 auto;
  padding: 12px 16px;
}

.sp-appbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--sp-chalk);
  text-decoration: none;
}

.sp-appbar-logo {
  display: block;
  width: 26px;
  height: 26px;
}

.sp-appbar-wordmark {
  font-family: var(--sp-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* The menu button: phones only; it opens #app-nav as a native popover. */
.sp-appnav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1.5px solid var(--sp-ink-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sp-chalk);
  cursor: pointer;
}

.sp-appnav-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Below 900px the nav is a popover: hidden until the button opens it, then a panel under
   the bar. Everything the browser gives a popover by default is restated here. */
.sp-appnav {
  position: fixed;
  inset: 68px 0 auto 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 16px 16px;
  border: 0;
  border-top: 1.5px solid var(--sp-ink-rule);
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

.sp-appnav:not(:popover-open) {
  display: none;
}

.sp-appnav:popover-open {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-appnav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-appnav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--sp-ink-soft);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.sp-appnav-link:hover {
  color: var(--sp-chalk);
}

.sp-appnav-link[aria-current="page"] {
  background: var(--sp-lime);
  color: var(--sp-ink);
  font-weight: 800;
}

.sp-appnav-out {
  margin: 0;
}

.sp-appnav-signout {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--sp-ink-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sp-chalk);
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sp-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: calc(1200px + 2 * 32px);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

@media (min-width: 900px) {
  .sp-m {
    display: none;
  }

  .sp-d {
    display: inline;
  }

  .sp-app {
    --sp-appbar-h: 72px;
  }

  .sp-appbar-inner {
    flex-wrap: wrap;
    gap: 12px 28px;
    padding: 14px 32px;
  }

  .sp-appbar-brand {
    gap: 10px;
  }

  .sp-appbar-logo {
    width: 30px;
    height: 30px;
  }

  .sp-appbar-wordmark {
    font-size: 21px;
  }

  .sp-appnav-toggle {
    display: none;
  }

  /* From 900px the popover is never opened: it is the row of links itself. */
  .sp-appnav,
  .sp-appnav:not(:popover-open),
  .sp-appnav:popover-open {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .sp-appnav-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .sp-appnav-link,
  .sp-appnav-signout {
    min-height: 40px;
  }

  .sp-appnav-out {
    margin-left: 12px;
  }

  .sp-page {
    gap: 28px;
    padding: 40px 32px 72px;
  }
}

/* ---------- What's coming: templates/planner/coming.html ---------- */

/* A pill-shaped link or button: Term plan, PDF, Email me this, Suggest, Keep, Add. */
.sp-pillbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* The design's 44px is the content box on a link; a <button> is border-box already. */
a.sp-pillbtn {
  box-sizing: content-box;
}

.sp-pillbtn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sp-pillbtn-lime {
  background: var(--sp-lime);
  font-weight: 800;
}

.sp-pillbtn-ink {
  background: var(--sp-ink);
  color: var(--sp-chalk);
  font-weight: 800;
}

.sp-coming-plan {
  font-weight: 800;
}

/*
 * Phones: one column, and #coming-head opens up into #coming-wrap's grid so its pieces can
 * be placed around the cards — the filters and Suggest above them, Term plan, PDF and
 * Email in one row below. Three tracks, so that last row sits side by side.
 */
.sp-coming {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 20px 8px;
  align-items: start;
}

.sp-coming-head {
  display: contents;
}

.sp-coming-titles {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-coming-title,
.sp-tplan-title,
.sp-planner-title,
.sp-courses-title,
.sp-cpage-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.sp-coming-summary {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
  line-height: 1.45;
}

.sp-coming-summary strong {
  color: var(--sp-ink);
  font-weight: 800;
}

.sp-coming-break {
  display: none;
}

.sp-filters {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 6px;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
}

.sp-filter {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sp-filter[aria-current="true"] {
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

.sp-coming-suggest {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
}

.sp-suggest-all {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

.sp-pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sp-pending form {
  margin: 0;
}

.sp-pending-text {
  flex: 1 1 100%;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sp-groups {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.sp-coming-plan,
.sp-coming-pdf,
.sp-coming-email {
  grid-row: 5;
  justify-self: start;
}

.sp-coming-plan {
  grid-column: 1;
}

.sp-coming-pdf {
  grid-column: 2;
}

.sp-coming-email {
  grid-column: 3;
}

.sp-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* The rule that runs from the count to the edge. */
.sp-group-head::after {
  content: "";
  flex: 1 1 auto;
  align-self: center;
  height: 1.5px;
  margin-left: 6px;
  background: var(--sp-chalk-line);
}

.sp-group-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-group-sub {
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

.sp-group-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* One deadline. */
.sp-dcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

/* Phones: the pills drop under the title, beside the date block. */
.sp-dcard-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "date main"
    "date pills";
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}

.sp-date {
  grid-area: date;
  box-sizing: content-box;
  width: 52px;
  padding: 7px 0;
  border: 1.5px solid var(--sp-ink);
  border-radius: 10px;
  background: var(--sp-ink);
  color: var(--sp-chalk);
  line-height: 1.05;
  text-align: center;
}

.sp-date-today {
  background: var(--sp-lime);
  color: var(--sp-ink);
}

.sp-date-day {
  display: block;
  font-family: var(--sp-font-display);
  font-size: 21px;
  font-weight: 800;
}

.sp-date-mon {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.sp-dcard-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sp-dcard-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* The title opens the deadline's panel: a button that reads as the card's heading. */
.sp-dcard-title {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}

.sp-dcard-title:hover {
  text-decoration: underline;
}

.sp-dcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 12px;
}

.sp-course {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sp-ink);
  font-weight: 800;
}

/* The course's colour, by its colour_key; the one place a card says which course. */
.sp-dot {
  flex: none;
  box-sizing: content-box;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 50%;
  background: var(--sp-chalk-line);
}

.sp-dot-amber {
  background: var(--sp-course-amber);
}

.sp-dot-mint {
  background: var(--sp-course-mint);
}

.sp-dot-sky {
  background: var(--sp-course-sky);
}

.sp-dot-coral {
  background: var(--sp-course-coral);
}

.sp-dot-lilac {
  background: var(--sp-course-lilac);
}

.sp-dcard-pills {
  grid-area: pills;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.sp-due,
.sp-weight {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  min-height: 26px;
  padding: 0 10px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.sp-due-soon {
  background: var(--sp-lime);
}

.sp-weight {
  border-color: var(--sp-chalk-line);
  color: var(--sp-chalk-muted);
}

.sp-weight-heavy {
  border-color: var(--sp-ink);
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

/* What the outline said, two lines at most; the panel has the rest. */
.sp-dcard-outline {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sp-dcard-outline-label {
  display: none;
  margin-right: 8px;
  color: var(--sp-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sp-ready {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1.5px solid var(--sp-chalk);
}

.sp-ready-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}

.sp-ready-q {
  font-size: 14px;
  font-weight: 800;
}

.sp-ready-status {
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

/* Heavy, and nothing planned for it. */
.sp-ready-warn {
  color: var(--sp-error);
}

.sp-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 10px;
}

.sp-step-check {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sp-ink);
  cursor: pointer;
}

.sp-step-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Struck through in the muted grey that still reads 4.5:1 on white; the design's paler
   grey does not. */
.sp-step-done .sp-step-text {
  color: var(--sp-chalk-muted);
  text-decoration: line-through;
}

.sp-step-new {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sp-lime);
  color: var(--sp-ink);
  font-size: 11px;
  font-weight: 800;
}

.sp-step-when {
  flex: none;
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 800;
}

.sp-step-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sp-chalk-muted);
  cursor: pointer;
}

.sp-step-remove:hover {
  color: var(--sp-ink);
}

.sp-ready-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* A card's Suggest steps: lime on a heavy deadline nothing is planned for. */
.sp-chipbtn,
.sp-step-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  border-radius: 999px;
  font-family: var(--sp-font-body);
  font-size: 13px;
  cursor: pointer;
}

.sp-chipbtn {
  padding: 0 14px;
  border: 1.5px solid var(--sp-ink);
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-weight: 800;
}

.sp-chipbtn-lime {
  background: var(--sp-lime);
}

.sp-step-open {
  padding: 0 12px;
  border: 1.5px dashed var(--sp-chalk-muted);
  background: transparent;
  color: var(--sp-chalk-muted);
  font-weight: 700;
}

.sp-step-open[hidden] {
  display: none;
}

/* The add-a-step form. Hidden until "Add my own step" opens it (static/js/app.js adds
   .sp-open); with scripting off it stands open, so it never strands a student. */
.sp-step-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

@media (scripting: enabled) {
  .sp-step-form:not(.sp-open) {
    display: none;
  }
}

.sp-input-step {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
}

.sp-step-form .sp-input-step {
  flex: 1 1 100%;
  min-width: 0;
}

.sp-step-form .sp-input-date {
  flex: 1 1 auto;
  width: auto;
}

.sp-step-add {
  flex: none;
  padding: 0 16px;
  font-size: 14px;
}

.sp-step-cancel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sp-chalk-muted);
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* "Nothing here." when a chip leaves no card. */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1.5px dashed var(--sp-chalk-muted);
  border-radius: 18px;
  background: var(--sp-paper);
  text-align: center;
}

.sp-empty-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-empty-text {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
}

@media (min-width: 900px) {
  /* The head is a box of its own again: title and Term plan on the first line, the chips
     and the page's buttons on the second, wrapping the way the design's rows do. */
  .sp-coming {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .sp-coming-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 8px;
  }

  .sp-coming-titles {
    flex: 1 1 420px;
    gap: 10px;
    min-width: 0;
    margin-bottom: 16px;
  }

  .sp-coming-title,
  .sp-tplan-title,
  .sp-planner-title,
  .sp-courses-title,
  .sp-cpage-title {
    font-size: clamp(40px, 4.2vw, 56px);
  }

  .sp-coming-summary {
    font-size: 16px;
    line-height: 1.5;
  }

  .sp-coming-plan {
    align-self: flex-end;
    margin-bottom: 16px;
    margin-left: 24px;
    padding: 0 16px;
    font-size: 14px;
  }

  .sp-coming-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  .sp-filters {
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 8px 0 0;
    padding: 4px;
    overflow: visible;
    border: 1.5px solid var(--sp-ink);
    border-radius: 999px;
    background: var(--sp-paper);
  }

  .sp-filter {
    padding: 0 16px;
    border: 0;
    font-size: 14px;
  }

  .sp-coming-pdf {
    margin-left: auto;
  }

  .sp-coming-pdf,
  .sp-coming-email {
    padding: 0 16px;
    font-size: 14px;
  }

  .sp-suggest-all {
    width: auto;
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* With no cards there is no PDF to push the row right, so Suggest does it. */
  .sp-filters + .sp-coming-suggest {
    margin-left: auto;
  }

  .sp-pending-text {
    flex: 0 1 auto;
  }

  .sp-groups {
    gap: 28px;
  }

  .sp-group {
    gap: 14px;
  }

  .sp-group-head {
    gap: 12px;
  }

  .sp-group-head::after {
    margin-left: 8px;
  }

  .sp-group-title {
    font-size: 24px;
  }

  .sp-group-sub {
    font-size: 14px;
  }

  .sp-group-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* The design's 440px basis is the content box, inside 22px of padding. */
  .sp-dcard {
    flex: 1 1 calc(440px + 2 * 22px + 2 * 1.5px);
    max-width: 100%;
    gap: 16px;
    padding: 22px;
    border-radius: 20px;
  }

  .sp-dcard-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "date main pills";
    column-gap: 16px;
  }

  .sp-date {
    width: 60px;
    padding: 8px 0;
    border-radius: 12px;
  }

  .sp-date-day {
    font-size: 24px;
  }

  .sp-date-mon {
    font-size: 11px;
  }

  .sp-dcard-title {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }

  .sp-dcard-meta {
    gap: 6px 10px;
    font-size: 13px;
  }

  .sp-course {
    gap: 6px;
  }

  .sp-dot {
    width: 10px;
    height: 10px;
  }

  .sp-dcard-pills {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .sp-due {
    min-height: 30px;
    padding: 0 12px;
    font-size: 13px;
  }

  .sp-dcard-outline {
    font-size: 14px;
  }

  .sp-dcard-outline-label {
    display: inline;
  }

  .sp-ready {
    padding-top: 14px;
  }

  .sp-ready-head {
    gap: 8px 12px;
  }

  .sp-step {
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
  }

  .sp-step-form .sp-input-step {
    flex: 1 1 180px;
  }

  .sp-step-form .sp-input-date {
    flex: 0 1 150px;
  }

  .sp-step-cancel {
    width: auto;
    padding: 0 12px;
  }

  .sp-empty {
    gap: 8px;
    padding: 40px;
    border-radius: 20px;
  }

  .sp-empty-title {
    font-size: 28px;
  }

  .sp-empty-text {
    font-size: 15px;
  }
}

/* ---------- Schedule: templates/planner/schedule.html ---------- */

/*
 * design/app/schedule-desktop.dc.html (the week, and the month's chips) and
 * schedule-mobile.dc.html (the day, at every width). The column count is a class,
 * sp-cols-N, read as --sp-cols by every row that has to line up: the day heads, the Due
 * row, the Plan row and the timeline. The timeline is a grid of quarter-hour rows, and
 * static/js/schedule.js puts each block on them. From 900px the week fits the window
 * (.sp-fit, at the end of the 900px block below).
 */

/* The app's flash, on every page on the brand: a lime pill, or the warning colours. */
.sp-flash {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  max-width: 100%;
  margin: 0;
  padding: 8px 8px 8px 18px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-lime);
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.sp-flash-warn {
  border-color: var(--sp-error);
  background: var(--sp-error-wash);
}

.sp-flash-warn > .sp-icon {
  color: var(--sp-error);
}

.sp-flash-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  cursor: pointer;
}

/* Development's demo date (app/_demo_date.html): the warning pill, wrapping on a phone,
   its two ways out underlined words rather than a second round button. */
.sp-demo {
  flex-wrap: wrap;
  padding-right: 18px;
  border-radius: 22px;
}

.sp-demo-form {
  display: contents;
}

.sp-demo-act {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sp-sched {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* The personal-changed hook: an empty listener, never a gap in the column. */
.sp-sched-hook {
  display: none;
}

/* The day view is the phone design at every width, so it never stretches across 1200px. */
.sp-sched-head-day,
.sp-sched-head-day ~ * {
  width: 100%;
  max-width: 720px;
}

/* --- the head --- */

.sp-sched-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 32px;
}

/* The phone design puts the switch beside the title; at 36px Syne's "Schedule" is 260px
   wide, so on a phone the switch wraps under it rather than over it. */
.sp-sched-head-day {
  justify-content: space-between;
  gap: 12px;
}

.sp-sched-titles {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sp-sched-head-day .sp-sched-titles {
  flex: 0 1 auto;
}

.sp-sched-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.sp-sched-h2 {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-sched-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sp-sched-period {
  padding: 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* A round icon button: the arrows, the drawer's close. Content-box, as in the design. */
.sp-round {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  cursor: pointer;
}

.sp-pillbtn-sm {
  min-height: 36px;
  padding: 0 12px;
  font-weight: 800;
}

.sp-termpill {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  min-height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 999px;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

/* Day / Week / Month: What's coming's chips, in a capsule at every width. */
.sp-segment {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
}

.sp-segment .sp-filter {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  font-size: 12px;
}

.sp-segment .sp-filter[aria-current="page"] {
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

/* The week's and the month's toolbar: one row that wraps, at the design's sizes. */
.sp-tb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.sp-tb-title {
  margin: 0 6px 0 0;
  font-family: var(--sp-font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.sp-tb .sp-sched-nav {
  gap: 6px;
}

.sp-tb .sp-sched-period {
  font-size: 16px;
}

.sp-tb .sp-pillbtn-sm,
.sp-tb .sp-termpill {
  min-height: 40px;
  font-size: 13px;
}

.sp-tb .sp-segment {
  gap: 4px;
  padding: 3px;
}

.sp-tb .sp-segment .sp-filter {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.sp-tb .sp-sched-buttons {
  gap: 6px;
}

.sp-tb .sp-sched-buttons .sp-pillbtn {
  padding: 0 14px;
  font-size: 13px;
}

/* "N need your call": the warning colours, onto the cards under the fold. */
.sp-needpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: content-box;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--sp-error);
  border-radius: 999px;
  background: var(--sp-error-wash);
  color: var(--sp-error);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sp-sched-hint {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
  line-height: 1.45;
}

.sp-sched-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.sp-sched-foot {
  margin-left: 0;
  padding-top: 4px;
}

.sp-sched-addwide {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

/* --- the grid's shared shape --- */

.sp-cols-1 { --sp-cols: 1; }
.sp-cols-2 { --sp-cols: 2; }
.sp-cols-3 { --sp-cols: 3; }
.sp-cols-4 { --sp-cols: 4; }
.sp-cols-5 { --sp-cols: 5; }
.sp-cols-6 { --sp-cols: 6; }
.sp-cols-7 { --sp-cols: 7; }

.sp-row {
  display: grid;
  grid-template-columns: var(--sp-gutter, 64px) repeat(var(--sp-cols, 5), minmax(0, 1fr));
}

/* --- the week --- */

/*
 * Phones scroll the week sideways inside its card; there is no phone design for it. The
 * card is positioned so what is absolutely placed inside it (the Plan row's codes, read
 * aloud and never seen) scrolls with it: with no positioned ancestor they counted towards
 * the page instead, and widened it past the phone by however far right the plan's steps sat.
 */
.sp-week {
  position: relative;
  overflow-x: auto;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-week-inner {
  --sp-gutter: 56px;
  min-width: 720px;
}

.sp-row-heads {
  border-bottom: 1.5px solid var(--sp-ink);
}

.sp-head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px;
  border-left: 1px solid var(--sp-chalk-line);
}

.sp-head-cell-today {
  background: var(--sp-today-tint);
}

.sp-dayhead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: content-box;
  min-height: 30px;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.sp-dayhead-today {
  border-color: var(--sp-ink);
  background: var(--sp-lime);
}

.sp-dayhead-num {
  font-family: var(--sp-font-display);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.sp-row-due {
  border-bottom: 1px solid var(--sp-chalk-line);
  background: var(--sp-chalk);
}

.sp-row-plan {
  border-bottom: 1.5px solid var(--sp-ink);
}

.sp-due-label,
.sp-eyebrow {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "Due" and "Plan", in the gutter. */
.sp-due-label {
  padding: 10px 6px 0 0;
  font-size: 10px;
  text-align: right;
}

/* A day's chips, side by side, wrapping. */
.sp-due-cell {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 52px;
  padding: 6px 8px;
  border-left: 1px solid var(--sp-chalk-line);
}

/* A deadline, an untimed event of the student's, or an institution's day: one pill. */
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: content-box;
  max-width: calc(100% - 21px);
  min-height: 30px;
  margin: 0;
  padding: 0 10px 0 8px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.sp-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-chip-quiet {
  padding: 0 10px;
  border-color: var(--sp-chalk-line);
  color: var(--sp-chalk-muted);
  font-weight: 700;
  cursor: default;
}

.sp-chip-time {
  color: var(--sp-chalk-muted);
  font-weight: 700;
}

/* --- the timeline: quarter-hour rows, 08:00 to 18:00 or wider on the week --- */

/* A row is 18px on a phone's week (72px an hour), 16px on the day (64px), and on the week
   from 900px a share of what the window leaves, never under 12px. */
.sp-grid {
  --sp-slot: 18px;
}

.sp-hrs-10 { --sp-slots: 40; }
.sp-hrs-11 { --sp-slots: 44; }
.sp-hrs-12 { --sp-slots: 48; }
.sp-hrs-13 { --sp-slots: 52; }
.sp-hrs-14 { --sp-slots: 56; }
.sp-hrs-15 { --sp-slots: 60; }
.sp-hrs-16 { --sp-slots: 64; }
.sp-hrs-17 { --sp-slots: 68; }
.sp-hrs-18 { --sp-slots: 72; }
.sp-hrs-19 { --sp-slots: 76; }
.sp-hrs-20 { --sp-slots: 80; }
.sp-hrs-21 { --sp-slots: 84; }
.sp-hrs-22 { --sp-slots: 88; }
.sp-hrs-23 { --sp-slots: 92; }
.sp-hrs-24 { --sp-slots: 96; }

.sp-hours,
.sp-col {
  display: grid;
  grid-template-rows: repeat(var(--sp-slots, 40), var(--sp-slot));
}

/* An hour's label spans its four rows and sits on the hour's rule. */
.sp-hour {
  grid-row: span 4;
  align-self: start;
  padding-right: 6px;
  color: var(--sp-chalk-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  transform: translateY(-6px);
}

/* The first hour sits on the rule above the grid, where the design's -6px would cut it
   in half. */
.sp-hour:first-child {
  transform: none;
}

/* Twelve lanes, so two overlapping blocks take six each and three take four. */
.sp-col {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
  border-left: 1px solid var(--sp-chalk-line);
  background: var(--sp-paper);
}

.sp-col-today {
  background: var(--sp-today-tint);
}

/* Under the blocks: an hour slot each, on the column's own rows. */
.sp-lines {
  display: grid;
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  grid-template-rows: subgrid;
}

/* An hour of the column, the add target; the hairline is its top edge, and an empty one
   under the pointer shows a "+". */
.sp-slot {
  display: flex;
  grid-row: span 4;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--sp-chalk-line);
  cursor: pointer;
}

.sp-slot:hover {
  background: color-mix(in srgb, var(--sp-chalk) 60%, transparent);
}

.sp-slot:hover::after {
  content: "+";
  color: var(--sp-chalk-muted);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

/* A block's wrapper, on the rows and lanes schedule.js gives it. `contain: size` keeps
   its text out of the rows' sizing: without it a 45-minute class needing three lines
   would stretch every row of the week. */
.sp-blk {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  margin: 1px 3px 2px;
  contain: size;
}

.sp-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px 8px;
  overflow: hidden;
  border: 1.5px solid var(--sp-ink);
  border-radius: 10px;
  background: var(--sp-chalk-line);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  text-align: left;
  cursor: pointer;
}

/* The week's rows can be as short as 12px, so its blocks are packed tighter than the
   design's 4px: at that floor a 45-minute class still shows its code and time, and an hour
   all three lines. */
.sp-week .sp-block {
  row-gap: 0;
  padding: 2px 7px;
  border-radius: 9px;
}

.sp-week .sp-block-line {
  line-height: 1.1;
}

/* A short block drops whole lines, never half of one: a line that does not fit wraps into
   a second column, which the gap puts past the padding, outside the block, where it is
   clipped with it. */
.sp-block {
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 24px;
}

.sp-block > .sp-block-line {
  flex: none;
  width: 100%;
}

/* A month wall's class: the block's fill and ink, on one line and its labels. */
.sp-mblock {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 3px 6px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 8px;
  background: var(--sp-chalk-line);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  text-align: left;
  cursor: pointer;
}

/* A block's fill is its course's colour, by colour_key: a background, never text. */
.sp-block-amber {
  background: var(--sp-course-amber);
}

.sp-block-mint {
  background: var(--sp-course-mint);
}

.sp-block-sky {
  background: var(--sp-course-sky);
}

.sp-block-coral {
  background: var(--sp-course-coral);
}

.sp-block-lilac {
  background: var(--sp-course-lilac);
}

/* The student's own event: no course behind it, so no course colour. */
.sp-block-own {
  background: var(--sp-chalk);
}

.sp-block-line,
.sp-mblock-line,
.sp-mblock-sub {
  display: block;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-block-code {
  font-size: 12px;
  font-weight: 800;
}

.sp-block-time {
  font-size: 11px;
  font-weight: 700;
}

.sp-block-sub,
.sp-mblock-sub {
  color: var(--sp-ink-line);
  font-size: 11px;
}

.sp-mblock-line {
  font-size: 11px;
  font-weight: 800;
}

.sp-mblock-sub {
  font-size: 10px;
}

.sp-block-flag {
  position: absolute;
  top: 3px;
  right: 4px;
  margin: 0;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: var(--sp-ink);
  font-size: 10px;
  line-height: 1.4;
  opacity: 0;
  cursor: pointer;
}

.sp-blk:hover .sp-block-flag,
.sp-block-flag:focus-visible {
  opacity: 1;
}

/* Now: a 2px ink rule across today's column on the quarter hour's row, with a lime dot
   on its left end. */
.sp-now {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: start;
  height: 0;
  border-top: 2px solid var(--sp-ink);
  pointer-events: none;
}

.sp-now::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -6px;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 50%;
  background: var(--sp-lime);
}

/* Until schedule.js has placed a block, auto-placement would put it in a row of its own
   under the grid, so it is left out; with scripting off each column is a plain list. The
   Plan row's cap and its "+ note" need the script too: without it every item shows and
   the note box is open. */
@media (scripting: enabled) {
  .sp-blk:not(.sp-placed) {
    display: none;
  }

  .sp-wplan:not(.sp-wplan-open) .sp-day-steps > li:nth-child(n + 4),
  .sp-wplan:not(.sp-wplan-open):has(.sp-day-steps > li:nth-child(3)) .sp-wplan-note,
  .sp-wplan:not(.sp-wplan-editing) .sp-wplan-box,
  .sp-wplan-editing .sp-wplan-note {
    display: none;
  }
}

@media (scripting: none) {
  .sp-hours,
  .sp-lines,
  .sp-wplan-add,
  .sp-flash-close {
    display: none;
  }

  .sp-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 120px;
    padding: 6px 4px;
  }

  .sp-blk {
    margin: 0;
    contain: none;
  }

  .sp-flash {
    padding-right: 18px;
  }
}

/* --- under the grid --- */

.sp-sched-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-sched-notes:not(:has(*)) {
  display: none;
}

.sp-sched-note {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 12px;
  background: var(--sp-paper);
  color: var(--sp-chalk-muted);
  font-family: var(--sp-font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.sp-sched-note b {
  color: var(--sp-ink);
  font-weight: 800;
}

.sp-sched-note-btn {
  cursor: pointer;
}

.sp-sched-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-sched-text {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
  line-height: 1.55;
}

.sp-sched-link {
  color: var(--sp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-sched-link:hover {
  color: var(--sp-hover);
}

/* --- the plan: the day's box, and the week's Plan row --- */

.sp-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-plan-one {
  gap: 8px;
}

.sp-plan-hint {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
}

.sp-plan-one .sp-plan-hint {
  font-size: 12px;
}

.sp-plan-title {
  font-family: var(--sp-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* A day's study blocks (_day_blocks.html), shared with the Planner's day cards: What's
   coming's step row, whose text is a button onto the deadline, a link to the course or
   plain text, two lines at most. A day with none takes no room. The course's dot is the
   week's Plan row's alone. */
.sp-day-steps:not(:has(*)) {
  display: none;
}

.sp-day-dot {
  display: none;
}

.sp-day-step {
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px 7px 10px;
}

.sp-day-text {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

button.sp-day-text,
a.sp-day-text {
  cursor: pointer;
}

button.sp-day-text:hover,
a.sp-day-text:hover {
  text-decoration: underline;
}

.sp-day-code {
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 800;
}

/* Struck through in the muted grey, as a ticked step on What's coming. */
.sp-step-done .sp-day-text {
  color: var(--sp-chalk-muted);
  text-decoration: line-through;
}

.sp-plan-box {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 104px;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 12px;
  background: var(--sp-chalk);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
}

.sp-plan-one .sp-plan-box {
  min-height: 84px;
}

.sp-plan-box::placeholder {
  color: var(--sp-ink-dim);
}

.sp-plan-box:focus {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.sp-plan-saved {
  min-height: 14px;
  color: var(--sp-chalk-muted);
  font-size: 11px;
  font-weight: 700;
}

/* The line appears only once there is something to say. */
.sp-plan-saved:empty {
  display: none;
}

/* One day of the week's Plan row (_schedule_plan_cell.html): compact step rows, a dot and
   one line each, the note as a pencil line, then "+N more" and "+ note" at the foot. */
.sp-wplan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 84px;
  padding: 6px 8px;
  border-left: 1px solid var(--sp-chalk-line);
}

.sp-wplan-today {
  background: var(--sp-today-tint);
}

.sp-wplan .sp-day-steps {
  gap: 3px;
}

.sp-wplan .sp-day-step {
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.sp-wplan .sp-step-check {
  width: 15px;
  height: 15px;
}

.sp-wplan .sp-day-dot {
  display: block;
  width: 8px;
  height: 8px;
}

.sp-wplan .sp-day-text {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The dot says which course to the eye; the code is still read aloud. */
.sp-wplan .sp-day-code {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The ✕ takes no room until the row is pointed at or tabbed into. */
.sp-wplan .sp-step-remove {
  display: none;
  width: 22px;
  height: 22px;
  margin: 0;
}

.sp-wplan .sp-day-step:hover .sp-step-remove,
.sp-wplan .sp-day-step:focus-within .sp-step-remove {
  display: inline-flex;
}

.sp-wplan-note {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 0 0 0 2px;
  border: 0;
  background: none;
  color: var(--sp-ink-line);
  font-family: var(--sp-font-body);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.sp-wplan-note .sp-icon {
  color: var(--sp-chalk-muted);
}

.sp-wplan-note-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-wplan-note[hidden],
.sp-wplan-more[hidden] {
  display: none;
}

.sp-wplan .sp-plan-box {
  min-height: 64px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 12px;
}

.sp-wplan-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: auto;
}

.sp-wplan-more,
.sp-wplan-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sp-font-body);
  font-size: 12px;
  cursor: pointer;
}

.sp-wplan-more {
  color: var(--sp-ink);
  font-weight: 800;
  text-decoration: underline;
}

.sp-wplan-add {
  color: var(--sp-chalk-muted);
  font-weight: 700;
}

.sp-wplan-add .sp-icon {
  stroke-width: 3;
}

/* --- needs your call --- */

.sp-call {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-call-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.sp-call-count {
  margin: 0;
  color: var(--sp-error);
  font-size: 13px;
  font-weight: 700;
}

.sp-call-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-call-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--sp-error);
  border-radius: 14px;
  background: var(--sp-error-wash);
}

.sp-call-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.sp-call-text {
  margin: 0;
  color: var(--sp-ink-line);
  font-size: 13px;
  line-height: 1.5;
}

.sp-call-card .sp-pillbtn-sm {
  min-height: 40px;
  padding: 0 14px;
}

/* --- the day --- */

.sp-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-strip-days {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.sp-strip-days-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sp-strip-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 4px 0;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 12px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  text-decoration: none;
}

.sp-strip-day-today {
  border-color: var(--sp-ink);
  background: var(--sp-lime);
}

.sp-strip-day-on {
  border-color: var(--sp-ink);
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

.sp-strip-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-strip-num {
  font-family: var(--sp-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.sp-dayline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.sp-dayline-date {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sp-today-tag {
  min-height: 22px;
  margin-left: 8px;
  padding: 0 8px;
  font-size: 11px;
  vertical-align: middle;
}

.sp-dayline-term {
  margin: 0 0 0 auto;
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 700;
}

.sp-dayline-due {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-chips .sp-chip {
  min-height: 34px;
  padding: 0 12px 0 10px;
  font-size: 13px;
}

.sp-dayview {
  --sp-gutter: 48px;
  overflow: hidden;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-dayview .sp-grid {
  --sp-slot: 16px;
}

.sp-dayview .sp-hours {
  border-right: 1px solid var(--sp-chalk-line);
  background: var(--sp-chalk);
}

.sp-dayview .sp-hour {
  padding-right: 6px;
}

.sp-dayview .sp-col {
  border-left: 0;
}

.sp-dayview .sp-block-code {
  font-size: 13px;
}

/* --- the month --- */

.sp-month {
  overflow: hidden;
  border: 1.5px solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-paper);
}

.sp-month-scroll {
  overflow-x: auto;
}

.sp-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 640px;
}

.sp-month-head {
  padding: 12px 10px;
  border-bottom: 1.5px solid var(--sp-ink);
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.sp-month-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 112px;
  padding: 8px;
  border-top: 1px solid var(--sp-chalk-line);
  cursor: pointer;
}

.sp-month-head + .sp-month-head,
.sp-month-cell {
  border-left: 1px solid var(--sp-chalk-line);
}

.sp-month-cell:nth-child(7n + 1) {
  border-left: 0;
}

/* The first week sits on the heads' rule: its cells are the 8th to the 14th children. */
.sp-month-cell:nth-child(-n + 14) {
  border-top: 0;
}

.sp-month-cell:hover {
  background: var(--sp-today-tint);
}

.sp-month-out {
  opacity: 0.5;
}

.sp-month-today {
  background: var(--sp-today-tint);
}

.sp-month-num {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  padding: 0 6px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--sp-font-display);
  font-size: 14px;
  font-weight: 800;
}

.sp-month-today .sp-month-num {
  border-color: var(--sp-ink);
  background: var(--sp-lime);
}

.sp-month-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.sp-month-items > * {
  max-width: 100%;
}

.sp-chip-sm {
  gap: 5px;
  max-width: calc(100% - 17px);
  min-height: 22px;
  padding: 0 8px 0 6px;
  font-size: 11px;
}

.sp-chip-sm .sp-dot {
  width: 7px;
  height: 7px;
}

.sp-month-note {
  overflow: hidden;
  color: var(--sp-chalk-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- the drawer: Schedule's #event-panel --- */

/* Tailwind places the shell (fixed, right, z-40); below 900px the brand makes it a sheet
   from the bottom. The unlayered rules win over Tailwind's layered utilities. */
.sp-drawer {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  max-height: 85vh;
  max-height: 85dvh;
}

.sp-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: none;
  background: color-mix(in srgb, var(--sp-ink) 35%, transparent);
  cursor: pointer;
}

body:has(#event-panel.sp-drawer > *) .sp-drawer-scrim {
  display: block;
}

/* The deadline and personal panels have no design yet: their frame, rounded for the sheet. */
.sp-drawer > .surface {
  border-radius: 20px 20px 0 0;
}

.sp-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 20px 16px 24px;
  border-top: 1.5px solid var(--sp-ink);
  border-radius: 20px 20px 0 0;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
}

.sp-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sp-drawer-titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sp-drawer-course {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 700;
}

.sp-drawer-course strong {
  color: var(--sp-ink);
  font-weight: 800;
}

.sp-drawer-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sp-drawer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.sp-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  min-height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.sp-tag-ink {
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

.sp-tag-quiet {
  border-color: var(--sp-chalk-line);
  color: var(--sp-chalk-muted);
  font-weight: 700;
}

.sp-tag-sm {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.sp-drawer-topic {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sp-chalk);
}

.sp-drawer-topic-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.sp-drawer-muted {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sp-drawer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.sp-drawer-note .sp-icon {
  margin-top: 2px;
}

.sp-drawer-desc {
  margin: 0;
  color: var(--sp-ink-line);
  font-size: 14px;
  line-height: 1.55;
}

.sp-drawer-sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 12px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 12px;
  font-size: 13px;
}

.sp-session-date {
  flex: none;
  min-width: 84px;
  font-weight: 800;
}

.sp-session-off {
  color: var(--sp-chalk-muted);
  text-decoration: line-through;
}

.sp-session-muted {
  color: var(--sp-chalk-muted);
}

.sp-session-topic {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-drawer-outline summary {
  list-style: none;
}

.sp-drawer-outline summary::-webkit-details-marker {
  display: none;
}

.sp-drawer-quote {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--sp-chalk-line);
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}

.sp-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.sp-drawer-foot .sp-pillbtn {
  padding: 0 16px;
  font-size: 14px;
}

.sp-drawer-report {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-chalk-muted);
  font-family: var(--sp-font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.sp-drawer-report:hover {
  color: var(--sp-ink);
}

@media (min-width: 900px) {
  .sp-sched {
    gap: 22px;
  }

  .sp-sched-title {
    font-size: 40px;
  }

  .sp-sched-h2 {
    font-size: 22px;
  }

  .sp-segment {
    gap: 4px;
    padding: 4px;
  }

  .sp-segment .sp-filter {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }

  .sp-sched-buttons .sp-pillbtn {
    padding: 0 16px;
    font-size: 14px;
  }

  .sp-sched-buttons .sp-pillbtn-lime {
    padding: 0 18px;
  }

  .sp-week-inner,
  .sp-month-grid {
    min-width: 0;
  }

  /* The week and the month take the design's width; the day keeps its own column. */
  .sp-page:has(.sp-tb) {
    max-width: 1360px;
    padding: 16px 24px 72px;
  }

  /*
   * The week fits the window. The column under the nav is the window's height, not its
   * minimum: a column flexbox with only a min-height grows to its content and the page
   * scrolls. In it the flash and the toolbar keep their height, and the card takes the
   * rest; in the card the heads, Due and Plan keep theirs, and the time area takes what is
   * left, scrolling inside itself when that is under the grid's 12px a row. The floor keeps
   * the pinned rows whole in a very short window, where the page scrolls instead.
   */
  .sp-page:has(.sp-fit) {
    padding-bottom: 16px;
  }

  .sp-fit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: max(520px, calc(100vh - var(--sp-appbar-h) - 32px));
  }

  .sp-fit > * {
    flex: none;
  }

  .sp-fit > .sp-week {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .sp-fit .sp-week-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  /* Both reserve a classic scrollbar's gutter, so the time area's columns cannot slide out
     from under the rows above when it scrolls. */
  .sp-fit .sp-pins {
    flex: none;
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  .sp-fit .sp-time {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .sp-fit .sp-grid {
    --sp-slot: minmax(12px, 1fr);
    flex: 1 0 auto;
    min-height: 440px;
  }

  .sp-sched-card {
    padding: 22px;
    border-radius: 20px;
  }

  .sp-plan {
    padding: 22px;
    border-radius: 20px;
  }

  .sp-call {
    gap: 12px;
  }

  .sp-call-count {
    font-size: 14px;
  }

  .sp-call-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }

  .sp-call-card {
    flex: 1 1 440px;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 16px;
  }

  .sp-call-name {
    font-size: 15px;
  }

  .sp-call-text {
    font-size: 14px;
  }

  /* From 900px the drawer is the design's side sheet. */
  .sp-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 440px;
    max-width: 100%;
    max-height: none;
  }

  .sp-drawer > .surface {
    border-radius: 16px 0 0 16px;
  }

  .sp-drawer-body {
    gap: 18px;
    padding: 28px;
    border-top: 0;
    border-left: 1.5px solid var(--sp-ink);
    border-radius: 0;
  }

  .sp-drawer-titles {
    gap: 6px;
  }

  .sp-drawer-course {
    font-size: 13px;
  }

  .sp-drawer-title {
    font-size: 32px;
  }

  .sp-drawer-topic {
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
  }

  .sp-drawer-topic-title {
    font-size: 16px;
  }

  .sp-drawer-foot {
    padding-top: 8px;
  }
}

/* ---------- Term plan: templates/planner/term_plan.html ---------- */

/*
 * No design file: What's coming's parts. The head (the counts, the proposal, the buttons),
 * then one white card of rows per week under the group head, then the shelf. Phones wrap a
 * row: the tick, the text, ✎ and ✕ on top; the day, "due …", new and the course
 * underneath, every wrapped line starting under the text.
 */
.sp-tplan {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.sp-tplan-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.sp-tplan-back {
  font-weight: 800;
}

.sp-tplan-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-tplan-summary {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
  line-height: 1.45;
}

.sp-tplan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sp-tplan-form {
  display: flex;
  margin: 0;
}

/* Phones: the name and Save plan take a row of their own. */
.sp-tplan-save {
  flex: 1 1 100%;
  align-items: center;
  gap: 8px;
}

.sp-tplan-name {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.sp-tplan-name:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sp-tplan-note {
  flex: 1 1 100%;
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* The proposal the last run wrote: What's coming's Keep/Discard strip, as a card. */
.sp-tplan-proposal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-tplan-proposal-text {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
  line-height: 1.45;
}

.sp-tplan-proposal .sp-tplan-actions {
  margin-top: 4px;
}

.sp-tplan-weeks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* "Week of 28 September" fills a phone's line, so "w10 · this week" wraps under it rather
   than squeezing the title onto two lines. */
.sp-tplan-weeks .sp-group-head {
  flex-wrap: wrap;
  row-gap: 2px;
}

/* A week's rows, or the shelf's: one white card, the rows split by hairlines. */
.sp-tplan-card {
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-plan-row,
.sp-shelf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 14px;
}

/* Phones: the row's left edge is the text's, and the tick hangs out into the padding, so
   every line that wraps starts under the text without a wrapper to indent it. */
.sp-plan-row {
  padding-left: 44px;
}

.sp-plan-check {
  margin-left: -30px;
}

.sp-plan-row + .sp-plan-row,
.sp-shelf-row + .sp-shelf-row {
  border-top: 1.5px solid var(--sp-chalk-line);
}

/* The day's own form: its input is the row's flex item. */
.sp-contents {
  display: contents;
}

/* Line one is the tick, the text, ✎ and ✕; the text takes what the three leave, so the
   rest cannot fit beside it and wraps. */
.sp-plan-text,
.sp-plan-edit {
  order: 1;
  flex: 1 1 calc(100% - 76px);
  min-width: 0;
}

.sp-plan-pencil {
  order: 2;
}

.sp-plan-remove {
  order: 3;
}

.sp-plan-date {
  order: 4;
  margin: 0;
}

.sp-plan-due {
  order: 5;
}

.sp-plan-new {
  order: 6;
}

.sp-plan-course {
  order: 7;
}

.sp-plan-text {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

button.sp-plan-text {
  cursor: pointer;
}

button.sp-plan-text:hover {
  text-decoration: underline;
}

/* Struck through in the muted grey, as a ticked step on What's coming. */
.sp-step-done .sp-plan-text {
  color: var(--sp-chalk-muted);
  text-decoration: line-through;
}

.sp-plan-date {
  min-height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 8px;
  background: var(--sp-paper);
  color: var(--sp-chalk-muted);
  font-family: var(--sp-font-body);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sp-plan-date:hover {
  border-color: var(--sp-ink);
}

.sp-plan-course {
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

a.sp-plan-course:hover {
  text-decoration: underline;
}

.sp-plan-due {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-chalk-muted);
  font-family: var(--sp-font-body);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.sp-plan-due:hover {
  color: var(--sp-ink);
  text-decoration: underline;
}

/* ✎ and the edit's cancel: the ✕'s size and grey. */
.sp-plan-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sp-chalk-muted);
  cursor: pointer;
}

.sp-plan-icon:hover {
  color: var(--sp-ink);
}

.sp-plan-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.sp-plan-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
}

.sp-shelf-name {
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 800;
}

.sp-shelf-meta {
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-shelf-actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sp-shelf-confirm {
  flex: 1 1 100%;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* A link beside a button in one row: the button's height, not the design's link box. */
.sp-shelf-actions a.sp-pillbtn {
  box-sizing: border-box;
}

.sp-pillbtn-quiet {
  border-color: var(--sp-chalk-line);
  color: var(--sp-chalk-muted);
}

.sp-pillbtn-quiet:hover {
  border-color: var(--sp-ink);
  color: var(--sp-ink);
}

/* The one destructive step: the warning colours, never a tinted card. */
.sp-pillbtn-warn {
  border-color: var(--sp-error);
  background: var(--sp-error-wash);
  color: var(--sp-error);
}

@media (min-width: 900px) {
  .sp-tplan {
    gap: 28px;
  }

  .sp-tplan-back {
    padding: 0 16px;
    font-size: 14px;
  }

  .sp-tplan-summary {
    font-size: 16px;
    line-height: 1.5;
  }

  .sp-tplan-save {
    flex: 0 1 auto;
    margin-left: auto;
  }

  .sp-tplan-name {
    flex: 0 1 13rem;
  }

  .sp-tplan-proposal {
    gap: 12px;
    padding: 22px;
    border-radius: 20px;
  }

  .sp-tplan-proposal-text {
    font-size: 15px;
  }

  .sp-tplan-weeks {
    gap: 28px;
  }

  .sp-tplan-card {
    border-radius: 20px;
  }

  /* One line, in the order the markup gives. */
  .sp-plan-row {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 18px;
  }

  .sp-plan-check {
    margin-left: 0;
  }

  .sp-plan-text,
  .sp-plan-edit,
  .sp-plan-remove,
  .sp-plan-date,
  .sp-plan-course,
  .sp-plan-due,
  .sp-plan-new,
  .sp-plan-pencil {
    order: 0;
  }

  .sp-plan-edit {
    flex: 1 1 auto;
  }

  /* The text keeps its own width and ✎ sits right after it; "due …", new and ✕ go to the
     far end, "due …" in a box wide enough for "due Mon 19 Oct" so the column holds. */
  .sp-plan-text {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp-plan-pencil {
    margin-right: auto;
  }

  .sp-plan-due {
    min-width: 7.5em;
    text-align: right;
  }

  /* An eight-character code's width, so the text starts in one column down the card. */
  .sp-plan-course {
    min-width: 92px;
  }

  .sp-shelf-row {
    gap: 8px 14px;
    padding: 12px 18px;
  }

  .sp-shelf-actions {
    flex: 0 1 auto;
    margin-left: auto;
  }

  .sp-shelf-confirm {
    flex: 0 1 auto;
  }
}

/* ---------- Planner: templates/planner/planner.html ---------- */

/*
 * No design file: Schedule's chips, arrows, plan box and drawer, What's coming's title,
 * pills and step rows, and Term plan's white card. The term's weeks sit above the week on
 * a phone, as a grid of chips, and from 900px as a list in a sticky column beside it; the
 * week is seven day cards.
 */
.sp-planner-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.sp-planner-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
}

.sp-planner-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sp-planner-summary {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
  line-height: 1.45;
}

.sp-planner-plan {
  font-weight: 800;
}

.sp-planner-link {
  color: var(--sp-ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-planner-link:hover {
  color: var(--sp-hover);
}

.sp-planner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sp-planner-week {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.sp-planner-weekhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.sp-planner-weektitles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.sp-planner-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* --- the week picker: chips on a phone, a list from 900px --- */

.sp-wk-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sp-wk-list {
  display: none;
}

.sp-wk {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 7px 10px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 12px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-size: 13px;
  text-decoration: none;
}

.sp-wk:hover {
  border-color: var(--sp-ink);
}

.sp-wk-num {
  color: var(--sp-chalk-muted);
  font-size: 11px;
  font-weight: 800;
}

.sp-wk-date {
  font-weight: 800;
  white-space: nowrap;
}

.sp-wk-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.sp-wk-labels {
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 600;
}

/* A vacation week, muted. */
.sp-wk-off .sp-wk-date,
.sp-wk-off .sp-wk-count {
  color: var(--sp-chalk-muted);
}

/* The week holding today: lime, as today is on Schedule's day strip. */
.sp-wk-now {
  border-color: var(--sp-ink);
  background: var(--sp-lime);
}

.sp-wk-now .sp-wk-num,
.sp-wk-now .sp-wk-labels {
  color: var(--sp-ink);
}

/* The week on screen: ink, as the strip's chosen day. */
.sp-wk-on {
  border-color: var(--sp-ink);
  background: var(--sp-ink);
  color: var(--sp-chalk);
}

.sp-wk-on .sp-wk-num,
.sp-wk-on .sp-wk-labels {
  color: var(--sp-ink-muted);
}

/* --- a day --- */

.sp-planner-days {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-pday {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 8px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

.sp-pday-date {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sp-pday .sp-today-tag {
  font-family: var(--sp-font-body);
  letter-spacing: 0;
}

/* A session the outline added: the warning colours, as Needs your call has them. */
.sp-chip-warn {
  border-color: var(--sp-error);
  background: var(--sp-error-wash);
  cursor: default;
}

/* Seven boxes on screen, so a shorter one than Schedule's, growing back while typed in. */
.sp-pday .sp-plan-box {
  min-height: 64px;
}

.sp-pday .sp-plan-box:focus {
  min-height: 112px;
}

.sp-pday .sp-plan-saved {
  margin-top: -6px;
}

@media (min-width: 900px) {
  .sp-planner-page {
    gap: 28px;
  }

  .sp-planner-summary {
    font-size: 16px;
    line-height: 1.5;
  }

  .sp-planner-plan {
    padding: 0 16px;
    font-size: 14px;
  }

  .sp-planner {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }

  /* align-self is load-bearing: a stretched grid item fills the row, leaving sticky
     nothing to move within. */
  .sp-planner-aside {
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .sp-wk-chips {
    display: none;
  }

  .sp-wk-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1.5px solid var(--sp-ink);
    border-radius: 18px;
    background: var(--sp-paper);
  }

  .sp-wk-list .sp-wk {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 9px 14px;
    border: 0;
    border-radius: 0;
    font-size: 14px;
  }

  .sp-wk-list .sp-wk + .sp-wk {
    border-top: 1px solid var(--sp-chalk-line);
  }

  .sp-wk-list .sp-wk:not(.sp-wk-on):not(.sp-wk-now):hover {
    background: var(--sp-chalk);
  }

  .sp-wk-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .sp-planner-week {
    gap: 16px;
  }

  .sp-pday {
    padding: 16px 20px 10px;
    border-radius: 20px;
  }
}

/* ---------- Courses: templates/courses/course_list.html ---------- */

/*
 * No design file: What's coming's title, pills, dots and weight pills, Term plan's white
 * card and its warning pill for the one destructive step. A card is the course's head,
 * the student's own half of it in one wrapping row, and the key events still coming.
 */
.sp-courses {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.sp-courses-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
}

.sp-courses-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sp-courses-summary {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
  line-height: 1.45;
}

.sp-courses-add {
  font-weight: 800;
}

.sp-courses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-ccard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

/* Archived: out of the calendar, so out of the way here, in the muted grey that still
   reads 4.5:1 rather than at a reduced opacity that would not. */
.sp-ccard-archived {
  border-color: var(--sp-chalk-line);
}

.sp-ccard-archived .sp-ccard-code,
.sp-ccard-archived .sp-ccard-slot {
  color: var(--sp-chalk-muted);
}

/* The dot sits on the code's line when the title wraps under it. */
.sp-ccard-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.sp-ccard-head > .sp-dot {
  margin-top: 6px;
}

.sp-ccard-title {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
}

.sp-ccard-code {
  color: var(--sp-ink);
  font-family: var(--sp-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sp-ccard-code:hover {
  text-decoration: underline;
}

.sp-ccard-name {
  min-width: 0;
  color: var(--sp-chalk-muted);
  font-weight: 600;
}

.sp-ccard-tag {
  flex: none;
}

.sp-ccard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.sp-ccard-field,
.sp-ccard-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.sp-ccard-label {
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

/* The colour picker: a radio per key, read aloud and reached by Tab, and the swatch beside
   it drawn in its place, ringed in ink while checked and in lime while focused. */
.sp-swatches {
  display: inline-flex;
}

.sp-swatch-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.sp-swatch {
  width: 16px;
  height: 16px;
}

.sp-swatch-input:checked + .sp-swatch {
  outline: 2px solid var(--sp-ink);
  outline-offset: 2px;
}

.sp-swatch-input:focus-visible + .sp-swatch {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

/* A native select, so the arrow is the browser's own. */
.sp-select {
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 10px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.sp-select:focus-visible,
.sp-cevent-input:focus-visible {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.sp-ccard-slot {
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sp-ccard-slot:hover {
  color: var(--sp-hover);
}

.sp-ccard-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.sp-ccard-delete {
  color: var(--sp-error);
}

.sp-ccard-delete:hover {
  border-color: var(--sp-error);
  color: var(--sp-error);
}

.sp-ccard-error {
  margin: 0;
  color: var(--sp-error);
  font-size: 13px;
  font-weight: 700;
}

/* --- the key events --- */

.sp-ccard-events {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  border-top: 1px solid var(--sp-chalk-line);
}

.sp-ccard-events > .sp-eyebrow {
  margin-bottom: 4px;
}

.sp-ccard-events > .sp-cevent-sub {
  margin-top: 14px;
}

.sp-cevent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sp-chalk-line);
}

.sp-cevent-date {
  flex: none;
  min-width: 5.5em;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sp-cevent-title {
  flex: 1 1 12em;
  min-width: 0;
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 600;
}

.sp-cevent-time {
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-cevent-weight {
  border-color: var(--sp-ink);
  color: var(--sp-ink);
}

/* The student's own date, where the outline gave none: lime, as a step of their own is. */
.sp-cevent-mine {
  border-color: var(--sp-ink);
  background: var(--sp-lime);
  color: var(--sp-ink);
}

.sp-cevent-flag {
  font-size: 14px;
}

.sp-cevent-flag:hover {
  color: var(--sp-ink);
}

.sp-cevent-error {
  flex: 1 1 100%;
}

.sp-cevent-dateform {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.sp-cevent-input {
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 10px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sp-cevent-removed {
  margin: 10px 0 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 600;
}

.sp-cevent-back {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sp-ink);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sp-cevent-back:hover {
  color: var(--sp-hover);
}

/* --- Delete's second step, in the card's place --- */

.sp-ccard-confirm {
  gap: 8px;
  border-color: var(--sp-error);
}

.sp-ccard-confirm-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sp-ccard-confirm-text {
  margin: 0;
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.5;
}

.sp-ccard-confirm-note {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* A link beside a button: the button's height, not a link's content box. */
.sp-ccard-cancel {
  box-sizing: border-box;
}

.sp-ccard-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

@media (min-width: 900px) {
  .sp-courses {
    gap: 28px;
  }

  .sp-courses-summary {
    font-size: 16px;
    line-height: 1.5;
  }

  .sp-courses-add {
    padding: 0 18px;
    font-size: 14px;
  }

  .sp-ccard {
    padding: 20px 22px;
    border-radius: 20px;
  }
}

/* ---------- A course: templates/ingestion/course_detail.html ---------- */

/*
 * No design file: Term plan's back pill, white cards under Syne headings, and the Courses
 * card's pills and rows. Read-only rows (the weekly pattern, the deadlines, the outlines)
 * split by hairlines; the student's own half (streams, the tutorial slot) as forms.
 */
.sp-cpage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sp-cpage-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 8px;
}

.sp-cpage-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sp-cpage-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-cpage-title > .sp-dot {
  width: 14px;
  height: 14px;
}

.sp-cpage-summary {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
  line-height: 1.45;
}

.sp-cpage-back {
  font-weight: 800;
}

.sp-csec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 18px;
  background: var(--sp-paper);
}

/* What the extractor was unsure of: the warning colours, as Needs your call has them. */
.sp-csec-warn {
  border-color: var(--sp-error);
  background: var(--sp-error-wash);
}

.sp-csec-warn .sp-csec-title {
  color: var(--sp-error);
}

.sp-csec-title {
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sp-csec-sub {
  margin: 8px 0 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 800;
}

.sp-csec-hint,
.sp-csec-empty {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sp-csec-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.45;
}

.sp-crows {
  display: flex;
  flex-direction: column;
}

.sp-crow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--sp-chalk-line);
  font-size: 14px;
}

.sp-crow:last-child {
  border-bottom: 0;
}

/* A stream the student does not attend: still the outline's, so still listed, muted. */
.sp-crow-off,
.sp-crow-off .sp-crow-day,
.sp-crow-off .sp-crow-venue {
  color: var(--sp-chalk-muted);
}

.sp-crow-group {
  border-color: var(--sp-ink);
  color: var(--sp-ink);
}

.sp-crow-off .sp-crow-group {
  border-color: var(--sp-chalk-line);
  color: var(--sp-chalk-muted);
}

.sp-crow-day {
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sp-crow-time,
.sp-crow-meta {
  color: var(--sp-chalk-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-crow-venue {
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 700;
}

.sp-crow-title {
  flex: 1 1 12em;
  min-width: 0;
  color: var(--sp-ink);
  font-weight: 600;
}

/* The outline's pattern paragraph: one line, the rest of the row's width. */
.sp-crow-note {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--sp-chalk-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-crow-file {
  flex: 1 1 10em;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-crow-active {
  border-color: var(--sp-ink);
  background: var(--sp-lime);
  color: var(--sp-ink);
}

.sp-crow-link {
  font-size: 13px;
}

/* How sure the extractor was of a deadline. */
.sp-sure-high {
  background: var(--sp-lime);
}

.sp-sure-mid {
  background: var(--sp-paper);
}

.sp-sure-low {
  background: var(--sp-error);
}

/* --- the student's half --- */

.sp-cpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}

.sp-cpick-label {
  min-width: 5.5em;
  font-size: 14px;
  font-weight: 700;
}

.sp-cpick-saved {
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

.sp-ctut {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.sp-ctut-tick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sp-ctut-gap {
  margin-top: 6px;
}

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

.sp-ctut-venue {
  flex: 0 1 10rem;
  width: auto;
  min-height: 36px;
}

.sp-ctut-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 4px;
}

.sp-cupload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 6px 0 0;
}

.sp-cupload .sp-csec-hint {
  flex: 1 1 100%;
}

/* A native file box, its button drawn as the brand's pill. */
.sp-file {
  max-width: 100%;
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 14px;
}

.sp-file::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--sp-font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sp-file:focus-visible {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.sp-cpage-delete {
  display: flex;
  margin-top: 8px;
}

@media (min-width: 900px) {
  .sp-cpage {
    gap: 20px;
  }

  .sp-cpage-summary {
    font-size: 16px;
    line-height: 1.5;
  }

  .sp-cpage-back {
    padding: 0 16px;
    font-size: 14px;
  }

  .sp-csec {
    padding: 20px 22px;
    border-radius: 20px;
  }

  .sp-crow {
    flex-wrap: nowrap;
  }
}

/* ---------- Add a course: templates/ingestion/add_course.html ---------- */

/*
 * No design file: the course page's head and white cards, the sign-in page's inputs.
 * Three ways in, cheapest first, each a card with an "or" between them; the pool's search
 * answers into a list that scrolls inside its card (catalogue/_results.html).
 */
.sp-addc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sp-addc-warn {
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--sp-error);
  border-radius: 14px;
  background: var(--sp-error-wash);
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.45;
}

.sp-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 700;
}

.sp-or::before,
.sp-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1.5px;
  background: var(--sp-chalk-line);
}

.sp-addc-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.sp-addc-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.sp-addc-pair > .sp-input {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

.sp-addc-paste {
  width: 100%;
  font-size: 14px;
}

.sp-addc-paste > summary {
  color: var(--sp-ink);
  font-weight: 700;
  cursor: pointer;
}

.sp-addc-text {
  margin-top: 10px;
  min-height: 160px;
}

.sp-addc-submit {
  padding: 0 18px;
  font-size: 14px;
}

/* --- the pool --- */

/* The pool scrolls inside its card, and says so from the first paint: macOS hides overlay
   scrollbars until the first scroll, so a box holding more than it shows would look like
   one holding everything. Its own thumb, on a reserved gutter, as .scroll-list draws it on
   warm paper. 16rem cuts the fourth course about halfway. Chrome (155, macOS) draws the
   ::-webkit-scrollbar thumb below only while scrollbar-color is declared and auto: with
   neither declared, or with a colour or scrollbar-width: thin, it falls back to the hidden
   overlay bar. So the colour and the thin width are Firefox's alone. */
.sp-pool {
  max-height: 16rem;
  overflow-y: auto;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 12px;
  scrollbar-gutter: stable;
  scrollbar-color: auto;
}

@supports not selector(::-webkit-scrollbar) {
  .sp-pool {
    scrollbar-width: thin;
    scrollbar-color: var(--sp-chalk-muted) transparent;
  }
}

.sp-pool::-webkit-scrollbar {
  width: 10px;
}

.sp-pool::-webkit-scrollbar-thumb {
  border: 2px solid var(--sp-paper);
  border-radius: 999px;
  background: var(--sp-chalk-muted);
}

.sp-pool::-webkit-scrollbar-thumb:hover {
  background: var(--sp-ink);
}

.sp-pool:empty {
  display: none;
}

.sp-pool-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}

.sp-pool-group + .sp-pool-group {
  border-top: 1px solid var(--sp-chalk-line);
}

.sp-pool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.sp-pool-code {
  font-size: 14px;
  font-weight: 800;
}

.sp-pool-title {
  flex: 1 1 10em;
  min-width: 0;
  color: var(--sp-chalk-muted);
  font-size: 14px;
  font-weight: 600;
}

.sp-pool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
}

.sp-pool-end {
  margin-left: auto;
}

.sp-pool-empty {
  margin: 0;
  padding: 12px;
  color: var(--sp-chalk-muted);
  font-size: 14px;
}

@media (min-width: 900px) {
  .sp-addc {
    gap: 20px;
  }
}

/* ---------- The upload's status: templates/ingestion/document_status.html ---------- */

/*
 * No design file: one white card, the course page's back pill under it. The card swaps
 * itself every 2s while the outline is queued or being read; a failure, or no worker to
 * read it, takes the warning colours.
 */
.sp-status-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 24px auto 0;
}

.sp-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 22px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 20px;
  background: var(--sp-paper);
}

.sp-status-warn {
  border-color: var(--sp-error);
  background: var(--sp-error-wash);
}

.sp-status-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--sp-font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.sp-status-warn .sp-status-title {
  color: var(--sp-error);
}

.sp-status-text {
  margin: 0;
  color: var(--sp-chalk-muted);
  font-size: 15px;
  line-height: 1.5;
}

.sp-status-warn .sp-status-text {
  color: var(--sp-ink);
}

.sp-status-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  font-weight: 700;
}

.sp-status-open {
  margin-top: 6px;
  font-size: 14px;
}

/* Working: three lime dots, rising in turn; still, where motion is turned down. */
.sp-working {
  display: inline-flex;
  flex: none;
  gap: 5px;
}

.sp-working > span {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--sp-ink);
  border-radius: 50%;
  background: var(--sp-lime);
  animation: sp-working 1.2s ease-in-out infinite;
}

.sp-working > span:nth-child(2) {
  animation-delay: 0.15s;
}

.sp-working > span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes sp-working {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-working > span {
    animation: none;
  }
}

@media (min-width: 900px) {
  .sp-status-page {
    margin-top: 48px;
  }

  .sp-status {
    padding: 28px 30px;
  }

  .sp-status-title {
    font-size: 32px;
  }
}

/* ---------- Settings: templates/accounts/settings.html ---------- */

/*
 * No design file: the course page's white cards under Syne headings, the sign-in page's
 * labels and inputs at the step row's 44px, native selects and the step row's checkbox.
 * One column of cards, a form each. Deleting the account and changing the email address
 * (templates/accounts/delete_confirm.html, templates/account/email.html) are one card each,
 * in a narrower column.
 */
.sp-set {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
}

.sp-set-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

.sp-set-wide {
  align-self: stretch;
}

/* Phones: a field a row. From 900px, two side by side, sitting on a shared baseline. */
.sp-set-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 12px 16px;
  width: 100%;
}

.sp-set-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
}

.sp-set-short {
  flex: none;
  width: 7rem;
}

.sp-set-grow {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

/* The selects stand as tall as the inputs and pills beside them. */
.sp-set-select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 10px;
}

/* A set of ticks under one name: preflight is underneath, so the fieldset's frame is
   taken off here rather than left to the browser. */
.sp-set-group {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sp-set-group > legend {
  display: block;
  margin: 0 0 4px;
  padding: 0;
}

.sp-set-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.sp-set-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* A tick beside a sentence or two: the box on the first line. */
.sp-set-tick-top {
  align-items: flex-start;
  min-height: 0;
  line-height: 1.45;
}

.sp-set-tick-top > .sp-step-check {
  margin-top: 1px;
}

.sp-set-fine,
.sp-set-note {
  color: var(--sp-chalk-muted);
  font-size: 13px;
  font-weight: 500;
}

.sp-set-note {
  display: block;
  margin-top: 4px;
  line-height: 1.45;
}

/* "digest at [07:00]", "remind me [3, 1] days before": the label wraps its control. */
.sp-set-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 700;
}

.sp-set-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.sp-set-text {
  margin: 0;
  color: var(--sp-ink);
  font-size: 15px;
  line-height: 1.45;
}

.sp-set-strong {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sp-set-flat {
  margin: 0;
}

.sp-set-link {
  color: var(--sp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sp-set-link:hover {
  color: var(--sp-hover);
}

/* A link the student made, in full, to copy: it wraps anywhere rather than run off. */
.sp-set-url {
  align-self: stretch;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--sp-chalk-line);
  border-radius: 10px;
  background: var(--sp-chalk);
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sp-set-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-set-code {
  color: var(--sp-ink);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sp-set-end {
  margin-left: auto;
}

.sp-set-email {
  justify-content: space-between;
  width: 100%;
}

.sp-set-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* --- one card: deleting the account, changing the email address --- */

.sp-set-narrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 24px auto 0;
}

.sp-set-narrow > .sp-csec {
  align-self: stretch;
}

/* Delete's second step as a card of its own: .sp-csec comes later in this sheet, and
   would otherwise put its ink border back. */
.sp-set-narrow > .sp-ccard-confirm {
  border-color: var(--sp-error);
}

.sp-set-card-title {
  margin: 0;
  color: var(--sp-ink);
  font-family: var(--sp-font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* An address on the account, current or pending, split by hairlines. */
.sp-set-address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sp-chalk-line);
}

.sp-set-address:last-child {
  border-bottom: 0;
}

@media (min-width: 900px) {
  .sp-set {
    gap: 20px;
  }

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

  .sp-set-narrow {
    margin-top: 48px;
  }

  .sp-set-card-title {
    font-size: 32px;
  }
}