/* The site's buttons, shared by the homepage and the scorecard (moved here unchanged from the homepage, 6 Oct 2026).
   Each page defines the colour tokens these use: --amber, --amber-hi, --ink, --text, --muted, --line-2, --panel-2, --dim. */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--ink);font-weight:600;font-size:14px;padding:8px 16px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:background .2s}
.btn:hover{background:var(--amber-hi)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--muted);background:var(--panel-2)}
.btn.sm,.btn.btnxs{font-size:12px;padding:6px 8px;border-radius:8px}
/* the seam sweep, on primary actions and the header button: an amber outline and a faint amber tint at rest; under
   the pointer (and when focused, or pressed on a touch screen) amber sweeps in from the left behind a thin brighter
   line and the label inverts. One layer (::before) carries the fill, the line and a copy of the label (data-label,
   kept in step by the script) in the inverted colour, revealed from the left by --sw: the label turns exactly where
   the fill has reached, so every part of it keeps its contrast mid-sweep. The outline is an inset shadow, so no
   button changes size. On paper (and the phone's bar over paper): deep amber ink, the sweep in dark ink. */
@property --sw{syntax:"<length-percentage>";inherits:true;initial-value:0%}
.btn.sweep{--sw-ink:var(--amber);--sw-fill:var(--amber);--sw-line:var(--amber-hi);--sw-on:var(--ink);--sw-ring:inset 0 0 0 1.5px var(--sw-ink);
  position:relative;isolation:isolate;background:color-mix(in srgb,var(--sw-ink) 8%,transparent);color:var(--sw-ink);box-shadow:var(--sw-ring);
  -webkit-tap-highlight-color:transparent;   /* the sweep is the press's feedback; the browser's own tint would muddy it */
  transition:--sw .45s cubic-bezier(.2,.9,.25,1),transform .2s ease,opacity .2s ease}
.btn.sweep::before{content:attr(data-label);position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:inherit;gap:inherit;
  padding:inherit;border-radius:inherit;white-space:nowrap;color:var(--sw-on);pointer-events:none;
  background:linear-gradient(90deg,var(--sw-fill) calc(var(--sw) - 2px),var(--sw-line) calc(var(--sw) - 2px),var(--sw-line) var(--sw),transparent var(--sw));
  clip-path:inset(0 calc(100% - var(--sw)) 0 0)}
.btn.ghost.sweep{border-color:transparent}
@media (hover:hover){ .btn.sweep:hover{--sw:calc(100% + 2px);background:color-mix(in srgb,var(--sw-ink) 8%,transparent)} }
.btn.sweep:focus-visible,.btn.sweep.tap{--sw:calc(100% + 2px)}
.btn.sweep.tap{transition:--sw .18s cubic-bezier(.2,.9,.25,1),transform .2s ease,opacity .2s ease}
/* after a touch press the fill stays a moment, then fades out where it is (rather than wiping back), and is reset unseen */
.btn.sweep.tap.swept{transition:transform .2s ease,opacity .2s ease}   /* a held click let go: the fill is whole at once */
.btn.sweep.tap.tapout::before{opacity:0;transition:opacity .25s ease}
.btn.sweep.tap.tapout .arrow{transform:none}
.btn.sweep.tapend,.btn.sweep.tapend::before,.btn.sweep.tapend .arrow{transition:none}
.btn.sweep:focus-visible{outline:2px solid var(--sw-ink);outline-offset:3px}
.btn.sweep:active{transform:scale(.98)}
.btn.sweep .arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.9,.25,1)}
@media (hover:hover){ .btn.sweep:hover .arrow{transform:translateX(4px)} }
.btn.sweep:focus-visible .arrow,.btn.sweep.tap .arrow{transform:translateX(4px)}
/* disabled: a muted outline, no tint, no sweep */
.btn.sweep:disabled,.btn.sweep[aria-disabled="true"]{--sw:0%;background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1.5px var(--line-2);opacity:1;cursor:not-allowed;transform:none}
.btn.sweep:disabled::before,.btn.sweep[aria-disabled="true"]::before{display:none}
.btn.sweep[aria-disabled="true"]:focus-visible{outline-color:var(--line-2)}
@media (prefers-reduced-motion:reduce){ .btn.sweep,.btn.sweep.tap,.btn.sweep .arrow{transition:none} }
/* the large size: the homepage's first module action (15px, 14px above and below, about 48px tall); the scorecard's buttons */
.btn.lg{padding-top:14px;padding-bottom:14px;font-size:15px;line-height:20px}