/* ---------- buttons ----------
   The site's two button styles, loaded by the homepage (public/index.html) and every server-rendered page
   (src/portal-page.ts page()). Use them on <a> or <button>.

   When to use which: one primary per view, secondary for supporting actions.
   .btn-primary   Filled orange: the view's main action (the Library filter bar's Compare →). Never two in one view.
   .btn-secondary Cream with orange-ink text, a 1px border and a soft shadow: supporting actions and links onward
                  (Compare → on portal pages, Open in Compare, Details →, This week's changes →, Compare's PAGE links).

   Size, shape and colour come from the --btn-* tokens below. An instance that needs another size sets the tokens on
   itself (for example .details-link: 32px tall), so the class rules stay the same everywhere.
   Colours are the --cf-* palette in public/styles.css, written out because server-rendered pages don't load it.

   Brand orange: this is the one stylesheet every page loads, so the site's two orange tokens live here too.
   --brand       The primary button's orange. Fills, borders, focus rings, the hero motion and the voice button, and
                 orange text only when large (18.66px bold or 24px and up). #fff on it is 4.78:1.
   --brand-text  The same hue, darkened to reach 4.5:1 on every background it sits on: 5.87:1 on --cf-bg-100,
                 5.43:1 on --cf-bg-200, 4.52:1 on --cf-bg-300, 5.01:1 on the page (#e7dfd4), 5.78:1 on server pages
                 (#f4efe8). For all smaller orange text: the current nav item, links, accents.
   --brand-hover Hover and pressed fills, mixed from --brand. Tints, glows and shadows are color-mix() of --brand too. */
:root{
  --brand:#c44c1c;
  --brand-text:#9f3e17;
  --brand-hover:color-mix(in srgb,var(--brand) 86%,#000);
  --btn-font:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
  --btn-gap:6px;
  --btn-focus-ring:var(--brand);
  /* secondary */
  --btn-secondary-height:auto;
  --btn-secondary-pad-y:6px;
  --btn-secondary-pad-x:11px;
  --btn-secondary-font-size:12.5px;
  --btn-secondary-font-weight:600;
  --btn-secondary-line-height:1.2;
  --btn-secondary-radius:8px;
  --btn-secondary-bg:#f5f1e9;
  --btn-secondary-bg-hover:#ded4c6;
  --btn-secondary-fg:var(--brand-text);
  --btn-secondary-border:#d9cebd;
  --btn-secondary-shadow:0 1px 3px rgba(66,50,23,.12);
  /* primary: #fff on --brand is 4.78:1, on --brand-hover 6.1:1 */
  --btn-primary-min-height:36px;
  --btn-primary-pad-y:0;
  --btn-primary-pad-x:16px;
  --btn-primary-font-size:13px;
  --btn-primary-font-weight:700;
  --btn-primary-line-height:1;
  --btn-primary-radius:999px;
  --btn-primary-bg:var(--brand);
  --btn-primary-bg-hover:var(--brand-hover);
  --btn-primary-fg:#fff;
}

.btn-secondary{
  display:inline-flex;align-items:center;gap:var(--btn-gap);box-sizing:border-box;height:var(--btn-secondary-height);
  padding:var(--btn-secondary-pad-y) var(--btn-secondary-pad-x);
  border:1px solid var(--btn-secondary-border);border-radius:var(--btn-secondary-radius);
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);box-shadow:var(--btn-secondary-shadow);
  font:var(--btn-secondary-font-weight) var(--btn-secondary-font-size)/var(--btn-secondary-line-height) var(--btn-font);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease-out,transform 160ms ease-out;
}
.btn-secondary:hover{background:var(--btn-secondary-bg-hover)}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);box-sizing:border-box;
  min-height:var(--btn-primary-min-height);padding:var(--btn-primary-pad-y) var(--btn-primary-pad-x);
  border:1px solid var(--btn-primary-bg);border-radius:var(--btn-primary-radius);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  font:var(--btn-primary-font-weight) var(--btn-primary-font-size)/var(--btn-primary-line-height) var(--btn-font);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease-out,border-color .15s ease-out,transform .1s ease-out;
}
@media (hover:hover){.btn-primary:hover{background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover)}}
.btn-primary:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn-primary{transition:background-color .15s ease-out,border-color .15s ease-out}}

/* Pressed: a little smaller (transform only, on the compositor); the secondary doesn't scale with reduced motion. */
@media (prefers-reduced-motion:no-preference){.btn-secondary:active{transform:scale(.97)}}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--btn-focus-ring);outline-offset:2px}
.btn-primary[hidden],.btn-secondary[hidden]{display:none}