/*
 * The design tokens, shared by every surface.
 *
 * There are three front ends here — the landing page, the candidate's assessment and the
 * recruiter's console — and they must read as one product. They want different *density*:
 * a page you skim, a stage you sit inside, an instrument you read results off. What they
 * share is the palette, the faces, and the same idea of what a rule or a shadow is.
 * Splitting the tokens out is what stops them drifting into three apps with a common name.
 *
 * ── Why this palette changed ──────────────────────────────────────────────
 *
 * The previous one was a warm room: plaster walls, a wooden desk, brick for the one bold
 * colour. That was right for a product named after the company you sit inside.
 *
 * This is not a room, it is an instrument — the thing a hiring team measures a candidate
 * with. Cool paper, graphite ink, and a considered indigo for anything that acts. The warmth
 * survives as *bronze*, used sparingly, to keep the product from looking like every other
 * blue instrument on the internet.
 *
 * The bronze was originally argued from the old name: to assay is to test a metal for what
 * it is actually made of, so one metallic note belonged. The product is Trial Day now and
 * that argument has gone with the name. The colour is kept anyway, and this note exists so
 * nobody later finds a rationale that no longer parses and quietly deletes the token.
 *
 * It earns its place on its own terms. Every restrained blue-and-grey instrument on the
 * internet looks like every other one, and a single warm accent is the cheapest thing that
 * makes a page recognisable at a glance. It is also the only colour here that is neither
 * good news nor bad news, which is what makes it usable for a mark, a rule or a quiet
 * emphasis without implying a verdict — and this product spends most of its time reporting
 * judgements about people, where an accidental verdict is the expensive mistake.
 *
 * The restraint is deliberate and not merely taste. This page carries a judgement about a
 * person's career. It should look like a measurement, not a dashboard competing for
 * attention.
 *
 * Committed single-theme, still on purpose. A dark variant is a second design to keep
 * honest, and there is no evidence anyone reads hiring reports at night in the dark.
 */

:root {
  /* ── surfaces, coolest to deepest ─────────────────────────────────── */
  --paper:   #f1f3f6;   /* the page itself */
  --room:    #e4e8ee;   /* a panel set into it */
  --room-2:  #d8dee7;   /* the deep edge of a panel, and scrollbar thumbs */
  --card:    #ffffff;
  --sunken:  #f7f9fb;   /* an inset well: quoted text, a written answer */

  /* ── ink ──────────────────────────────────────────────────────────── */
  --ink:     #151a21;   /* graphite, not black — black on white is harsher than it reads */
  --ink-2:   #454f5d;
  --ink-3:   #76818f;   /* the quietest legible grey on --paper; do not go lighter */
  --rule:    #dce1e8;
  --rule-2:  #c5ccd7;   /* a rule that has to be seen rather than felt */

  /*
   * The one colour that acts. Everything clickable is this and nothing else is, which is
   * what lets a recruiter find the action on a page they have never seen before.
   */
  --accent:   #2a4bb5;
  --accent-2: #1c3585;
  --accent-bg:#e8edfa;

  /*
   * Bronze — the one warm note. Decorative and never the only signal for anything, because
   * it sits too close to the warning colour for someone who cannot separate the two.
   */
  --bronze:   #96693a;
  --bronze-2: #7a5229;
  --bronze-bg:#f4ede2;

  /*
   * Held for the surfaces that still name them. The room this product used to be had a
   * wooden desk in it; these now point at the metal, so nothing renders un-themed while
   * those two references remain.
   */
  --desk:    var(--bronze);
  --desk-2:  var(--bronze-2);
  --indigo:  var(--accent);

  /* ── meaning ──────────────────────────────────────────────────────────
   * Never carried by colour alone anywhere in the product — every band that uses these
   * also carries a word. Roughly one in twelve men cannot separate the red from the green.
   */
  --teal:    #1f6b64;   /* informational, and the second interactive tone */
  --teal-bg: #e0efec;
  --warn:    #8a5a06;
  --warn-bg: #f8eed7;
  --bad:     #983039;
  --bad-bg:  #f9e7e8;
  --good:    #2f6a49;

  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Cool-shifted to match the paper. A warm shadow on a cool surface reads as a smudge. */
  --shadow: 0 1px 2px rgba(18, 26, 38, .05), 0 6px 18px rgba(18, 26, 38, .07);
}

* { box-sizing: border-box; }

/* ── the boot screen ─────────────────────────────────────────────────────
 *
 * In tokens.css rather than in either page's own stylesheet, because both the assessment
 * and the report use it and it has to arrive with the first stylesheet either of them
 * loads. It is the only thing on screen for the first few seconds of every visit.
 *
 * Quiet on purpose. A large spinner insists that something is wrong; a small mark and a
 * sentence say that something is happening, which is the truth.
 * --------------------------------------------------------------------- */

.booting {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 40px 24px;
  text-align: center;
}
.booting-mark {
  width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font: 600 24px/1 Georgia, "Times New Roman", serif;
  animation: booting-pulse 1.9s ease-in-out infinite;
}
.booting-line {
  margin: 0; font: 500 16px/1.4 var(--sans); color: var(--ink);
}
.booting-sub {
  margin: 0; max-width: 30rem;
  font: 400 13.5px/1.6 var(--sans); color: var(--ink-3);
}
.booting .dots i {
  font-style: normal; opacity: 0.25;
  animation: booting-dot 1.4s infinite;
}
.booting .dots i:nth-child(2) { animation-delay: 0.2s; }
.booting .dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes booting-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.93); opacity: 0.75; }
}
@keyframes booting-dot {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/*
 * Somebody who has asked for less movement gets none of it. The mark and the dots are
 * decoration; the sentence carries the meaning and stays either way.
 */
@media (prefers-reduced-motion: reduce) {
  .booting-mark, .booting .dots i { animation: none; }
  .booting .dots i { opacity: 0.5; }
}