/* The rating flow (index.html, flow.js) on the house report tokens: a bar with the steps, then either the intro, one
   variant filling the screen with its rating below it, or the closing screen. */
.fl { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; --fl-top: 52px; }
.fl [hidden] { display: none !important; }
.fl main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fl-top { flex: none; min-height: var(--fl-top); display: flex; align-items: center; gap: 16px; padding: 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--brand); color: var(--brand-fg); }
.fl-top .eyebrow { color: var(--brand-fg-2); }
.fl-top a { margin-left: auto; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.fl-top a:focus-visible, .fl-dots button:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }
/* the steps: a number per variant, filled once it has a rating; one beyond the first unrated cannot be opened */
.fl-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.fl-dots button { width: 30px; height: 30px; border: 1.5px solid rgba(241, 248, 239, 0.45); border-radius: 50%; background: none; color: var(--brand-fg); font: 600 0.8rem/1 var(--font-mono); cursor: pointer; }
.fl-dots button.is-rated { background: var(--brand-fg); color: var(--brand); border-color: var(--brand-fg); }
.fl-dots button[aria-current] { border-color: var(--pop); box-shadow: 0 0 0 2px var(--pop); }
.fl-dots button:disabled { opacity: 0.4; cursor: default; }

.fl-intro, .fl-done { flex: 1; display: flex; align-items: center; padding-block: 48px; }
.fl-intro .wrap, .fl-done .wrap { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.fl-intro h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); font-weight: 800; line-height: 1.05; max-width: 18ch; }
.fl-intro h1 em { font-style: normal; background: var(--pop); color: var(--pop-ink); padding: 0 0.18em; border-radius: 4px; }
.fl-intro .meta { color: var(--fg-3); margin-top: 6px; }
.fl-go, .fl-next, .fl-back, .fl-again { min-height: 56px; padding: 0 26px; border-radius: 14px; border: 2px solid var(--brand); font: 700 1.05rem/1 var(--font-body); cursor: pointer; }
.fl-go, .fl-next, .fl-again { background: var(--brand); color: var(--brand-fg); }
.fl-go { align-self: flex-start; margin-top: 8px; }
.fl-back { background: none; color: var(--fg); border-color: var(--line-strong); }
.fl-next:disabled { opacity: 0.4; cursor: default; }
.fl :is(.fl-go, .fl-next, .fl-back, .fl-again, .fl-open, .fl-after a):focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; }
.fl :is(h2, .fl-name):focus { outline: none; }
.fl-after { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }

/* a variant: its name, the live frame taking what is left of the screen, the rating below it */
.fl-stage { flex: 1; display: flex; flex-direction: column; min-height: calc(100dvh - var(--fl-top)); }
.fl-head { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px max(16px, env(safe-area-inset-left, 0px)); }
.fl-head h2 { font-size: 1.25rem; }
.fl-line { color: var(--fg-2); font-size: 0.95rem; flex: 1 1 320px; }
.fl-open { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.fl-frame { flex: 1 1 auto; min-height: 340px; width: 100%; border: 0; border-block: 1px solid var(--line); background: #e6f1e3; }
.fl-rate { flex: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 14px max(16px, env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--card); }
.fl-rate .qv { flex: 1 1 560px; }
/* in the flow a rating is the visitor's own: the team's counts and comments wait for the closing screen */
.fl-rate .qv-btn b, .fl-rate .qv-list { display: none; }
.fl-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fl-nav button { min-height: 68px; }
.fl-hint { font-size: 0.9rem; color: var(--fg-3); }

@media (max-width: 720px) {
  .fl-top .eyebrow { display: none; }
  .fl-head { padding-block: 8px; }
  .fl-line { flex-basis: 100%; font-size: 0.88rem; }
  .fl-open { display: none; }
  .fl-frame { min-height: 300px; }
  .fl-rate { padding-top: 10px; gap: 8px; }
  .fl-rate .qv-btn, .fl-rate .qv-form input, .fl-rate .qv-form button, .fl-nav button { min-height: 52px; }
  .fl-nav { width: 100%; }
  /* the closing table keeps its four columns on a phone */
  .fl-done :is(th, td) { padding-inline: 8px; }
  .fl-done th { font-size: 0.62rem; letter-spacing: 0.04em; }
  .fl-nav .fl-hint { flex: 1; }
}