/* ==========================================================================
   BUNKK APP LAYOUT — page scaffolding only.
   Requires tokens.css + components.css. Every value here is a token: no new
   colours, no new shadows. If a rule needs a hex, it belongs in tokens.css.
   ========================================================================== */

.wrap { max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.wrap--narrow { max-width: 460px; }

/* ---- Nav links ------------------------------------------------------------ */
.nav__links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.nav__link {
  font-family: var(--font-label); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border); border-radius: var(--radius-sm);
  background: var(--card);
}
.nav__link:hover { background: var(--soft-yellow); }
.nav__link.is-active { background: var(--ink); color: var(--ink-inverse); }

/* Setup menu. <details> gives the open/close for free; this only positions the
   panel and hides the default disclosure triangle. */
.nav__menu { position: relative; }
.nav__menu > summary { list-style: none; cursor: pointer; user-select: none; }
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu > summary::after { content: " \25BE"; }
.nav__menu-items { position: absolute; top: calc(100% + var(--sp-2)); left: 0;
  z-index: var(--z-dropdown); min-width: 200px;
  display: flex; flex-direction: column;
  background: var(--card); border: var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); overflow: hidden; }
.nav__menu-item { padding: var(--sp-3) var(--sp-4); text-decoration: none;
  color: var(--ink); font-size: var(--text-sm); font-weight: 700;
  border-bottom: 1.5px dashed var(--ink); }
.nav__menu-item:last-child { border-bottom: none; }
.nav__menu-item:hover { background: var(--soft-yellow); }

/* The Setup dropdown is desktop-only: below 640px the whole top nav gives way
   to the bottom tab bar, whose Setup tab opens the same links as a sheet. */

/* ---- Page head ------------------------------------------------------------ */
.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head__sub { color: var(--ink-muted); font-size: var(--text-lg); margin: 0; }

/* ---- Generic layout helpers ----------------------------------------------- */
.stack     { display: grid; gap: var(--sp-4); }
.stack--lg { display: grid; gap: var(--sp-5); }
.row       { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.row--between { display: flex; gap: var(--sp-4); flex-wrap: wrap;
  align-items: center; justify-content: space-between; }
.grid-stats {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.section-title {
  font-family: var(--font-display); font-size: var(--text-2xl);
  margin: var(--sp-7) 0 var(--sp-4);
}
.section-title:first-child { margin-top: 0; }

/* ---- Subject table extras -------------------------------------------------- */
/* components.css clips the wrap with `overflow: hidden` to keep the rounded
   border crisp. On a narrow phone that silently amputates the Status column
   instead of letting it scroll, so allow horizontal scrolling inside the wrap
   itself — the page body still never scrolls sideways. */
.table-wrap { overflow-x: auto; overflow-y: hidden; }
.subjects a.subj-link { text-decoration: none; display: block; }
.subjects .meter { min-width: 110px; }
.cell-right { text-align: right; }
.cell-center { text-align: center; }
/* The "Now" / "Projected" grouping above the column names. Dashed, because it
   labels a set of columns rather than naming one. */
.subjects th.col-group {
  font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  border-bottom: 1.5px dashed var(--ink-inverse);
}
.cell-num   { font-family: var(--font-mono); font-weight: 700; text-align: right; }

/* ---- Lecture drill-down list ----------------------------------------------- */
.lecture-list { display: grid; }
.lecture {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1.5px dashed var(--ink);
}
.lecture:last-child { border-bottom: none; }
.lecture__when { font-family: var(--font-mono); font-size: var(--text-sm); }
.lecture__trail {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted);
}
.lecture.is-vanished { opacity: 0.6; }
/* A planned lecture is struck through rather than recoloured, matching the day
   strip: the row still has to read as a class that exists. */
.lecture.is-planned .lecture__subject { text-decoration: line-through; }
.lecture.is-planned { opacity: .75; }
.lecture__subject { font-weight: 700; margin-left: var(--sp-3);
  color: var(--ink); text-decoration: none; }
.lecture__subject:hover { text-decoration: underline; }

/* The next day worth asking about, when the one you're looking at is empty. */
.next-up { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); text-decoration: none; color: var(--ink);
  margin-bottom: var(--sp-6); }

/* ---- Empty state ------------------------------------------------------------ */
.empty { text-align: center; padding: var(--sp-7) var(--sp-5); }
.empty h2 { font-family: var(--font-display); margin: var(--sp-4) 0 var(--sp-2); }

/* ---- Upload flow ------------------------------------------------------------ */
/* The dropzone is a <label> so the whole block opens the file picker and stays
   keyboard-reachable. Labels are inline by default, which would break the
   border into fragments — force the block box the design system assumes. */
.dropzone { display: block; }
.dropzone input[type="file"] { display: none; }
.upload-result { margin-top: var(--sp-5); }
.proposal {
  border: var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-4); background: var(--soft-purple); margin-bottom: var(--sp-3);
}
.proposal__q { font-weight: 700; margin-bottom: var(--sp-2); }

/* The account that already owns this student number, named inside the refusal
   so the one person who can act on it has somewhere to go. */
.claimed { margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--card); border: var(--border); border-radius: var(--radius-sm);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.claimed__who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.claimed__who b { font-size: var(--text-lg); }
.claimed__action { margin: 0; }
.claimed__note { flex-basis: 100%; font-size: var(--text-xs); color: var(--ink-muted); }

/* ---- Semester calendar ------------------------------------------------------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
/* A Monday-to-Friday timetable has nothing to say about Saturdays, and giving
   them a column each spends two sevenths of the grid saying "no class". */
.cal--5 { grid-template-columns: repeat(5, 1fr); }
.cal__dow {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  text-align: center; color: var(--ink-muted); padding-bottom: var(--sp-1);
}
.cal__blank { aspect-ratio: 1; }
.cal__day {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700;
  background: var(--card); color: var(--ink);
  border: var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cal__day:hover:not(.is-out) { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.cal__day:active:not(.is-out) { transform: translate(2px, 2px); box-shadow: none; }
.cal__day.is-holiday { background: var(--danger-fill); }
.cal__day.is-out {
  background: var(--paper); color: var(--ink-muted); cursor: default;
  box-shadow: none; border-style: dashed; opacity: 0.55;
}
.cal__tag {
  font-family: var(--font-label); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}

/* ---- Day strip verdicts (Phase 2 hero) --------------------------------------- */
.hero-verdict {
  border: var(--border-heavy); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5); background: var(--card);
}
.hero-verdict__label {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.hero-verdict__word {
  font-family: var(--font-display); font-size: var(--text-hero); line-height: 1;
  margin: var(--sp-2) 0;
  /* "PLANNED" is one long unbreakable word, and at 64px it ran off the side of
     a phone. The hero is the one thing on this page that must always be
     readable in full, so it gives up size before it gives up fitting. */
  overflow-wrap: break-word;
}
.hero-verdict--skip { background: var(--safe-fill); }
.hero-verdict--partial { background: var(--warn-fill); }
.hero-verdict--go { background: var(--danger-fill); }
.hero-verdict--off { background: var(--soft-cyan); }
/* A decision already taken is neither advice nor an alarm, so it gets the
   pending purple rather than a borrowed green — until it turns out to have cost
   more than the day had, which is the one case worth shouting about. */
.hero-verdict--planned { background: var(--pending-soft); }
.hero-verdict--planned.is-over,
.hero-verdict--skip.is-over,
.hero-verdict--partial.is-over { background: var(--danger-fill); }
.hero-verdict__meta {
  display: block; font-size: var(--text-sm); margin-top: var(--sp-2);
  font-family: var(--font-mono);
}

/* ---- Bottom tab bar (phones only) -------------------------------------------- */
/* The top nav wrapped into three rows on a phone and spent a third of the screen
   before the page started. Below 640px the four destinations move to a fixed bar
   at the bottom, where a thumb already is. */
.tabbar { display: none; }
/* In the dropdown a flex column stacks these links; in the sheet nothing does,
   so they are blocks here or they run together on one line. */
.setup-sheet .nav__menu-item { display: block; padding-inline: 0;
  font-size: var(--text-base); border-bottom: 1.5px dashed var(--ink); }
.setup-sheet .nav__menu-item:last-of-type { border-bottom: none; }
/* Takes the sheet's opening focus, so the first link doesn't open ringed. */
.setup-sheet .modal__title:focus { outline: none; }

/* ---- Phone ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Clear of the bar, and of the home indicator under it. */
  .wrap { padding: var(--sp-5) var(--sp-4)
                  calc(var(--sp-7) + 64px + env(safe-area-inset-bottom)); }
  .nav { flex-wrap: nowrap; gap: var(--sp-2); }
  .nav__links { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
    background: var(--card); border-top: var(--border-heavy);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar__item {
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-3) 0; border: none; background: transparent;
    font-family: var(--font-label); font-weight: 700; font-size: var(--text-xs);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--ink); text-decoration: none; cursor: pointer;
  }
  .tabbar__item.is-active { background: var(--ink); color: var(--ink-inverse); }
  .setup-sheet { width: min(92vw, 420px); }
  /* Toasts sit above the bar rather than under it. */
  .toast-host { bottom: calc(64px + env(safe-area-inset-bottom) + var(--sp-3)); }
  .page-head h1 { font-size: var(--text-2xl); }
  .hero-verdict__word { font-size: var(--text-4xl); }
  .lecture { grid-template-columns: 1fr auto; }
  .lecture__trail { grid-column: 1 / -1; }
  /* The subject table drops its least-load-bearing columns before it scrolls. */
  .subjects .col-optional { display: none; }
}


/* ---- Today: the week navigator ------------------------------------------ */
.week-nav { display: flex; align-items: stretch; gap: var(--sp-2); }
/* min-width:0 lets the grid shrink below its content width instead of pushing
   the "next" arrow off the side of a phone. */
.week-nav__days { display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2); flex: 1; min-width: 0; }
.week-nav__day { display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: var(--sp-2) 0; text-decoration: none; color: var(--ink);
  background: var(--card); border: var(--border); border-radius: var(--radius-sm); }
.week-nav__day:hover { background: var(--soft-yellow); }
.week-nav__dow { font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.week-nav__date { font-size: var(--text-lg); font-weight: 700; }
/* Today gets an outline, the focused day gets the fill — so when they differ
   you can still see where "now" is. */
.week-nav__day.is-today { box-shadow: var(--shadow-sm); }
.week-nav__day.is-focus { background: var(--ink); color: var(--ink-inverse); }
.week-nav__day.is-focus:hover { background: var(--ink); }

/* On a phone the arrows cost more width than they earn: every day in the row
   is already a tap target, which is the faster gesture there anyway. */
@media (max-width: 520px) {
  .week-nav__arrow { display: none; }
  .week-nav__days { gap: var(--sp-1); }
  .week-nav__date { font-size: var(--text-base); }
}

/* ---- Subjects editor ---------------------------------------------------- */
.subject-edit { display: grid; gap: var(--sp-3);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 100px; align-items: start; }
@media (max-width: 639px) {
  .subject-edit { grid-template-columns: 1fr; }
}

/* Six rotating tints. A subject list is a list of distinct things, and reading
   it as one white ribbon is why nobody could find the row they meant to edit. */
.card--tint-1 { background: var(--soft-yellow); }
.card--tint-2 { background: var(--soft-purple); }
.card--tint-3 { background: var(--soft-cyan); }
.card--tint-4 { background: var(--soft-green); }
.card--tint-5 { background: var(--soft-pink); }
.card--tint-6 { background: var(--soft-orange); }
/* The fields stay on paper inside a tinted card, or the tint fights the text
   you are trying to type. */
.card[class*="card--tint-"] .input { background: var(--card); }

/* ---- Setup hub ---------------------------------------------------------- */
.setup-grid { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.setup-tile { display: block; text-decoration: none; color: inherit;
  border: var(--border); border-radius: var(--radius-sm); padding: var(--sp-4);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease); }
.setup-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.setup-tile:active { transform: translate(2px, 2px); box-shadow: none; }
.setup-tile__title { font-weight: 800; margin-bottom: var(--sp-1); }
.setup-tile__note { font-size: var(--text-sm); color: var(--ink-muted); }


/* ---- Timetable grid ----------------------------------------------------- */
.tt { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2); align-items: start; }
.tt__col { display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--card); border: var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-2); min-height: 120px; }
.tt__dow { font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); text-align: center; }
.tt__blocks { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.tt__block { display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  border: var(--border); border-radius: var(--radius-sm);
  background: var(--soft-yellow); padding: var(--sp-2);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease); }
.tt__block:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
/* A break is visibly not a class: dashed, muted, and it carries no budget. */
.tt__block--break { background: transparent; border-style: dashed;
  box-shadow: none; color: var(--ink-muted); }
.tt__block--break:hover { transform: none; box-shadow: none; background: var(--paper); }
/* A line break is legal after the en dash, which used to split 08:00–09:00
   across two lines whenever a column got narrow. It never should. */
.tt__time { font-size: var(--text-xs); white-space: nowrap; }
.tt__name { font-weight: 700; font-size: var(--text-sm); word-break: break-word; }
/* A slot the college runs two courses in. Outlined rather than recoloured: it
   is a fact about the timetable, not a status. */
.tt__block.is-overlap { outline: 2px dashed var(--warn-deep); outline-offset: 2px; }
.tt__hint { display: block; font-size: var(--text-xs); color: var(--ink-muted); }
.tt__add { font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  background: transparent; border: 1.5px dashed var(--ink); color: var(--ink-muted);
  border-radius: var(--radius-sm); padding: var(--sp-2); cursor: pointer; }
.tt__add:hover { background: var(--soft-yellow); color: var(--ink); }
/* Stands in for the Save button once the editor saves on its own. Quiet by
   design — it reports, it doesn't ask. */
.tt-status { font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-muted); }
.tt-status[data-state="saving"] { color: var(--ink); }
.tt-status[data-state="error"] { color: var(--danger-deep); }

/* Seven columns stop being readable well before phone width — and below about
   1000px a column is narrower than the time range it has to hold, so drop to
   two before that rather than squeezing. */
@media (max-width: 1000px) {
  .tt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below the tab-bar breakpoint the grid becomes one day at a time: seven
   stacked full-width lists made Friday a very long scroll. The tabs are hidden
   above this width, where all seven columns fit side by side. */
.tt-daytabs { display: none; }
@media (max-width: 640px) {
  /* Seven tabs across 375px: `display: flex` rather than the component's
     inline-flex so they share the width instead of running off the side, and
     the padding gives way before the labels do. */
  .tt-daytabs { display: flex; width: 100%; margin-bottom: var(--sp-4); }
  .tt-daytabs .tabs__tab { flex: 1; padding: var(--sp-2) 0; min-width: 0; }
  .tt { grid-template-columns: 1fr; }
  .tt__col { display: none; }
  .tt__col.is-day { display: flex; }
}

/* <dialog> centres itself but needs its backdrop and margins set. */
dialog.modal { margin: auto; }
dialog.modal::backdrop { background: rgba(17, 17, 17, .45); }


/* ---- Plan: the horizon as month grids, and the skip ladder --------------- */
/* A term is seventy-odd teaching days. As a row of chips that was a wall of
   identical cells to scroll past; as a month grid it reads at a glance.
   Verdict colours are scoped under .plan-month so nothing leaks into the
   semester calendar, which uses the same .cal markup for a different job. */
.plan-legend { margin-bottom: var(--sp-4); }
.plan-month { margin-bottom: var(--sp-4); }
.plan-month .cal__day { aspect-ratio: auto; min-height: 44px; }
.plan-month .cal__day.verdict--skip { background: var(--safe-fill); }
.plan-month .cal__day.verdict--partial { background: var(--warn-fill); }
.plan-month .cal__day.verdict--go { background: var(--danger-fill); }
.plan-month .cal__day.verdict--planned { background: var(--pending-soft); }
.plan-month .cal__day.verdict--off {
  background: var(--paper); border-style: dashed; color: var(--ink-muted);
}
.plan-month .cal__day.is-over { background: var(--danger-fill); }
/* Today keeps the emphasis the strip's "TODAY" ribbon used to carry. */
.plan-month .cal__day.is-today { box-shadow: var(--shadow-md); }

.ladder { display: flex; flex-direction: column; gap: var(--sp-2);
  margin: var(--sp-3) 0; }
.ladder__rung { display: grid; grid-template-columns: 44px 80px 1fr auto;
  align-items: center; gap: var(--sp-3);
  border: var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); background: var(--card); }
.ladder__through { font-size: var(--text-xs); color: var(--ink-muted);
  white-space: nowrap; }
.ladder__rung--safe   { background: var(--safe-soft); }
.ladder__rung--warn   { background: var(--warn-soft); }
.ladder__rung--danger { background: var(--danger-soft); }
.ladder__n { font-family: var(--font-display); font-size: var(--text-lg); }
.ladder__pct { font-weight: 700; }
.ladder__note { font-size: var(--text-sm); }


/* ---- Calendar: absence counts, checkpoints, the horizon edge ------------ */
.cal__day { position: relative; }
.cal__count { position: absolute; top: 2px; right: 3px;
  font-size: var(--text-xs); font-weight: 700; line-height: 1;
  background: var(--pending-fill); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius-pill);
  padding: 1px 5px; }
/* A checkpoint is a deadline, not a state of the day, so it marks the edge
   rather than filling the cell — the fill still has to mean holiday. */
.cal__day.is-checkpoint { border-left: 5px solid var(--warn-fill); }
/* Past the horizon the day is still tappable; it just isn't spending from the
   budget currently on screen. */
.cal__day.is-beyond { opacity: .7; }

#day-sheet { min-width: min(420px, 92vw); }
#day-sheet .lecture { cursor: pointer; }
#day-sheet .lecture .mono { white-space: nowrap; }
/* A break is in the list so the day reads like the day; it has nothing to tick,
   so it must not look like it does. */
#day-sheet .lecture--break { cursor: default; opacity: .7;
  border-style: dashed; background: transparent; }
/* The recommended half-day, offered as one tap above the boxes it would tick. */
.sheet-partial { display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: flex-start; margin-bottom: var(--sp-4); padding: var(--sp-3);
  background: var(--soft-cyan); border: var(--border);
  border-radius: var(--radius-sm); }
.sheet-partial__note { font-size: var(--text-sm); }
/* The day's verdict, above its classes: the sheet is where the decision gets
   made and it was the one surface that never said what the day was worth. */
.sheet-verdict { font-size: var(--text-sm); margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3); border: var(--border);
  border-radius: var(--radius-sm); background: var(--paper); }
.sheet-verdict:empty { display: none; }
.sheet-verdict.verdict--skip { background: var(--safe-soft); }
.sheet-verdict.verdict--partial { background: var(--warn-soft); }
.sheet-verdict.verdict--go { background: var(--danger-soft); }
.sheet-verdict.verdict--planned { background: var(--pending-soft); }
.sheet-verdict.is-over { background: var(--danger-fill); }
/* Two classes timetabled into the same hour is the college's doing, not a bug
   in the list — say so rather than showing two rows that look like one mistake. */
#day-sheet .lecture--clash { border-left: 5px solid var(--warn-fill); }


/* ---- Guessing an unmarked lecture --------------------------------------- */
.guess { display: inline-flex; border: var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--card); }
.guess__btn { font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  padding: var(--sp-1) var(--sp-3); cursor: pointer; background: transparent;
  border: none; border-right: var(--bw) solid var(--ink); color: var(--ink-muted); }
.guess__btn:last-child { border-right: none; }
.guess__btn:hover:not(:disabled) { background: var(--soft-yellow); color: var(--ink); }
.guess__btn:disabled { opacity: .5; cursor: default; }
/* A guess is purple everywhere, matching the pending colour it replaces —
   never green or red, which are reserved for what the college actually said. */
.guess__btn[aria-pressed="true"] { background: var(--pending-fill); color: var(--ink); }