/* The "Reviews since" control and the recalculating state (period-control.js), one look on every page that prices an
   Atlas: the quote page, a game's page and the compare page (TASK-143). Built on the site's tokens; a page that sets the
   control on a dark ground sets the tokens there (game-page.css). The page places the panel (its margins); this is the
   panel itself.

   A choice of which reviews to order (Travis, 5 Oct: easy to miss, on a line by itself; TASK-142): the options' look with
   the gold edge of a choice that is on, the label and the date at a real size, and one sentence under them saying the
   date can be changed. Wide, the label, the date and "Use all reviews" share a line; in a narrow panel (a phone, a narrow
   column) the label and "Use all reviews" share the top line over the full-width date, so a date picked or cleared never
   adds a line. */
.qc-period{container-type:inline-size;display:flex;flex-direction:column;padding:16px 20px 16px 23px;border:1px solid var(--rule);border-radius:2px;background:var(--panel);box-shadow:inset 3px 0 0 var(--gold)}
.qc-period.is-saved{box-shadow:none}
.qc-period-row{display:grid;grid-template-columns:auto minmax(320px,auto) minmax(0,1fr);grid-template-areas:"label pick all";align-items:center;gap:10px 16px}
.qc-period-label{grid-area:label;font:600 17px/1.3 var(--font-sans);color:var(--ink)}
/* the button and its date field in one box, so the calendar opens under the button; the box is the button's size */
.qc-period-pickbox{grid-area:pick;position:relative;display:flex;min-width:0}
.qc-period-row>.qc-period-value{grid-area:pick}
.qc-period-value{font:500 17px/1.3 var(--font-sans);color:var(--ink)}
.qc-period-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 16px;border:1px solid var(--ink);border-radius:2px;background:transparent;font:500 17px/1.3 var(--font-sans);color:var(--ink);text-align:left;cursor:pointer}
.qc-period-pick:hover:not(:disabled){background:var(--paper-2)}
.qc-period-pick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qc-period-pick:disabled{cursor:default;opacity:.6}
.qc-period-pick svg{flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* the date field the button opens: rendered (showPicker needs that), out of sight and out of reach */
.qc-period-input{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
/* a browser without showPicker gets the field itself, beside the date in words */
.qc-period-pickbox.is-native{flex-wrap:wrap;align-items:center;gap:8px 14px}
.qc-period-input.is-native{position:static;width:auto;height:44px;padding:0 10px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);font:16px var(--font-sans);color:var(--ink);opacity:1;pointer-events:auto}
.qc-period-all{grid-area:all;justify-self:start;padding:0 0 1px;border:0;border-bottom:1px solid currentColor;background:none;font:600 15px/1.3 var(--font-sans);color:var(--ink);white-space:nowrap;cursor:pointer}
.qc-period-all:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qc-period-all:disabled{cursor:default;opacity:.6}
.qc-period-hint{margin:10px 0 0;font:15px/1.45 var(--font-sans);color:var(--ink-soft);text-wrap:pretty}
.qc-period-msg{margin:0;font:14px/1.45 var(--font-sans);color:var(--ink-soft);text-wrap:pretty}
/* the status line is always there (so what it says is announced) and takes no room while it says nothing */
.qc-period-msg:not(:empty){margin-top:8px}
.qc-period-msg.is-error{color:var(--complaint)}
@container (max-width:560px){
  .qc-period-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label all" "pick pick"}
  .qc-period-all{justify-self:end}
  .qc-period-pick{gap:10px;padding:10px 14px;font-size:16px}
}
/* Narrower than the default's words on one line ("each game's release (all reviews)", 242px at 16px): the button keeps
   room for two lines whatever it says, so a date (one line) never shrinks it under the visitor's thumb. */
@container (max-width:305px){
  .qc-period-pick{min-height:66px}
}
@media(max-width:700px){.qc-period{padding:14px 16px 14px 19px}}

/* ---- Recalculating (TASK-142): while the games are read again the page holds still. A figure keeps its old words,
   hidden, so it keeps its size, with a small spinner and "Recalculating…" laid over it (the page places the mark on its
   own figures). The new figures fade in. No spin and no fade with reduced motion. ---- */
.is-recalc{position:relative;visibility:hidden}
.is-recalc>.q-recalc{visibility:visible}
.q-recalc{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font:500 16px/1.4 var(--font-sans);letter-spacing:0;color:var(--ink-soft)}
.q-spin{flex:none;box-sizing:border-box;width:1.05em;height:1.05em;border:2px solid var(--rule);border-top-color:var(--gold);border-radius:50%;animation:q-spin .75s linear infinite}
@keyframes q-spin{to{transform:rotate(1turn)}}
.is-fresh{animation:q-settle .3s ease-out}
@keyframes q-settle{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.q-spin,.is-fresh{animation:none}}