/* Three screens, three layouts: the intro, the waiting room, and the run.
 *
 * Waiting and running are deliberately *not* the same page with a different
 * widget — waiting is a centred, near-empty screen about a number going down;
 * running is a dial plus a stream of evidence. Moving between them is a
 * transition, not a reflow.
 */

/* ================================================================== intro */
.intro {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: var(--s-9) 0 var(--s-7);
}
.intro-inner { display: grid; gap: var(--s-6); justify-items: center; text-align: center; }

.intro-lede { display: grid; gap: var(--s-3); justify-items: center; }
.intro-lede .sub { max-width: 22em; }

/* Three steps side by side. The row *is* the explanation — each one is a noun,
   not a sentence. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  width: 100%;
  max-width: 380px;
}
.step { display: grid; gap: 7px; justify-items: center; position: relative; }
.step-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  animation: step-glow 4.2s var(--ease) infinite;
}
.step:nth-child(2) .step-dot { animation-delay: 1.4s; }
.step:nth-child(3) .step-dot { animation-delay: 2.8s; }
@keyframes step-glow {
  0%, 22%, 100% { box-shadow: 0 0 0 0 rgba(224, 95, 124, 0); border-color: var(--accent-line); }
  8% { box-shadow: 0 0 0 6px rgba(224, 95, 124, 0.10); border-color: var(--accent); }
  16% { box-shadow: 0 0 0 0 rgba(224, 95, 124, 0); border-color: var(--accent); }
}
.step-label { font-size: 12.5px; color: var(--text-soft); }
.step + .step::before {
  content: "";
  position: absolute;
  top: 17px;
  right: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 1px;
  background: var(--accent-line);
}

.intro-actions { display: grid; gap: var(--s-3); justify-items: center; }

.intro-foot {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 12.5px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-2));
}
.intro-foot button, .intro-foot a { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.intro-foot button:hover, .intro-foot a:hover { color: var(--accent); }

/* The follow invitation: a heading, two facts, one button. Sizes and colour do
   the separating so it never becomes a wall of text to skim past. */
.ask { display: grid; gap: var(--s-5); }
.ask-title { font-size: 18px; font-weight: 680; letter-spacing: -0.01em; padding-right: 28px; }
.ask-rows { display: grid; gap: var(--s-4); }
.ask-row { display: flex; gap: var(--s-3); align-items: flex-start; }
.ask-icon {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
/* 16px left too much air inside a 34px tile and made the chip read as a smudge */
.ask-icon .icon { width: 19px; height: 19px; }
.ask-icon.is-alt {
  background: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--blue-500);
}
.ask-copy b { display: block; font-size: 14px; font-weight: 660; line-height: 1.5; }
.ask-copy span { display: block; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.ask-skip { font-size: 12.5px; color: var(--text-faint); text-align: center; margin-top: -8px; }

/* the "how does it score" sheet — details on demand, not on the page */
.explain { display: grid; gap: var(--s-4); }
.explain h2 { font-size: 17px; font-weight: 650; }
.explain dl { display: grid; gap: var(--s-3); }
.explain dt { font-size: 13.5px; font-weight: 640; }
.explain dd { font-size: 13.5px; color: var(--text-soft); line-height: 1.65; }

/* ========================================================== waiting room */
.wait {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: var(--s-8) 0;
}
.wait-inner { display: grid; gap: var(--s-6); justify-items: center; text-align: center; width: 100%; }

.wait-who { display: grid; gap: var(--s-3); justify-items: center; }
.wait-name { font-size: 16px; font-weight: 620; max-width: 14em; }

/* The queue card says, in words, exactly what is happening and what the button
   will do. This is the one screen where a sentence beats a diagram: people are
   being asked to wait, and they deserve to be told why and for how long. */
.qcard {
  width: 100%;
  max-width: 340px;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.qcard-head { display: flex; align-items: center; gap: var(--s-2); font-size: 14px; font-weight: 650; }
.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
.qcard-why {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-faint);
  margin-top: -4px;
}
.qcard-rows { display: grid; gap: 6px; }
.qcard-row { font-size: 14px; color: var(--text-soft); }
.qcard-row b {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0 3px;
}
.qcard-hint { font-size: 13px; line-height: 1.65; color: var(--text-muted); }
.qcard-hint strong { color: var(--accent); font-weight: 700; }

/* Stays put once earned: a user coming back from the author's page must be able
   to see how far the follow moved them, however long the round trip took. */
.qcard-won {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 13px;
  line-height: 1.55;
}
.qcard-won .icon { margin-top: 1px; }
.qcard-won b { display: block; font-weight: 680; }
.qcard-won span { color: var(--text-muted); }

.wait-status { display: grid; gap: var(--s-3); justify-items: center; width: 100%; max-width: 300px; }
.wait-status p { font-size: 13.5px; color: var(--text-muted); min-height: 20px; }

/* ==================================================================== run */
.run { padding: var(--s-7) 0 var(--s-8); }
.run-grid { display: grid; gap: var(--s-6); }

@media (min-width: 940px) {
  .col-run { max-width: var(--col-wide); }
  .run-grid {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
  }
  .run-side { position: sticky; top: var(--s-6); }
}

.run-side { display: grid; gap: var(--s-5); justify-items: center; text-align: center; }
/* Holds whatever the column ends with: first a placeholder for the result, then
   the result itself. Reserving the space means nothing jumps when it lands. */
.rail-tail { display: grid; gap: var(--s-5); justify-items: center; width: 100%; }
.rail-tail:empty { display: none; }
.rail-pending {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  width: 100%;
  max-width: 240px;
  opacity: 0.65;
}
.rail-pending-lines { display: grid; gap: 9px; width: 100%; justify-items: center; }
.rail-pending-lines .sk-line { margin: 0; }
.stream { display: grid; gap: var(--s-3); min-width: 0; }

.who { display: grid; gap: var(--s-2); justify-items: center; }
.who-name { font-size: 15px; font-weight: 620; max-width: 14em; }

/* dial */
.dial { position: relative; width: 168px; height: 168px; }
/* The page behind drifts through pink and blue, so the ring cannot rely on it:
   the plate gives the dial its own white ground and makes the number crisp. */
.dial::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(60, 26, 40, 0.10), inset 0 0 0 1px rgba(60, 26, 40, 0.05);
}
.dial svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: #eddfe6; stroke-width: 9; }
.dial-value {
  fill: none;
  stroke: url(#dialGradient);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.dial.is-working .dial-value {
  stroke-dasharray: 56 271;
  stroke-dashoffset: 0;
  transition: none;
  animation: dial-spin 1.5s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes dial-spin { to { transform: rotate(360deg); } }
.dial-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.dial-num {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dial-num.is-pending { font-size: 30px; color: var(--text-faint); letter-spacing: 0.12em; }
.dial-unit { font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.08em; }
.dial-num.is-pop { animation: dial-pop 560ms var(--ease-out); }
@keyframes dial-pop {
  0% { transform: scale(1); }
  36% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* status: one line and a hairline. Nothing else. */
.status { display: grid; gap: var(--s-2); width: 100%; max-width: 240px; }
.status-line { font-size: 13px; color: var(--text-muted); min-height: 20px; }

.verdict { display: grid; gap: var(--s-2); justify-items: center; }
.verdict-title { font-size: 17px; font-weight: 660; }
.verdict-comment { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; max-width: 20em; }

.confidence { display: grid; gap: 9px; width: 100%; max-width: 240px; }
.confidence-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 12px;
  color: var(--text-faint);
}
.confidence-head b { color: var(--text-soft); font-weight: 620; }

.actions { display: grid; gap: var(--s-2); width: 100%; max-width: 240px; }

/* ============================================================ sheet bodies */
/* The score is never a dialog — these are the consent and explainer sheets. */
.sheet-body { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.sheet-title { font-size: 17px; font-weight: 660; }
.sheet-actions { display: grid; gap: var(--s-2); width: 100%; margin-top: var(--s-2); }

/* ================================================================= notice */
.notice {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: var(--s-9) 0;
}
.notice-inner { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.notice-inner .icon { color: var(--text-faint); width: 28px; height: 28px; }
.notice-inner p { max-width: 24em; color: var(--text-soft); font-size: 14px; }