/* ===========================================================================
   **What a control does, and what a link looks like — said once for all four
   pages.**

   The front page's stylesheet came from the design and the other three are
   written by hand, so these rules lived in whichever sheet needed them first.
   Then the three pages were given the front page's theme button — the same
   markup, sun and moon and all — and it arrived without its behaviour, because
   the rules were in the sheet those pages do not load. A control that looks
   identical and answers differently is worse than two that look different.
   =========================================================================== */
a {
  /* **The look of the two in the footer**, which is the one asked for: the muted
     text colour at rest, the accent under the pointer, and no rule under it
     either way. A link that carries its own colour in its `style` attribute —
     the bar's items, a card's headline — is a control rather than a word in a
     sentence and keeps it; this is the rule for the words. */
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); }
/* **The pairing, not just the colour.** Those two words read as links because
   the sentence around them is *faint* and they are *muted* — a two-tone the
   footer has and a muted paragraph does not, which is why a link inside one came
   out the exact colour of its own sentence and stopped looking like a link at
   all. So wherever a sentence holds a word-link, the sentence takes the fainter
   tone and the link keeps the muted one: the same two colours, in the same
   relation, everywhere. A sentence with no link in it is untouched.

   `!important` because the tone it is replacing is written in the element's
   `style` attribute, which no rule beats otherwise — the same reason the hovers
   above carry it. */
p:has(> a), span:has(> a), figcaption:has(> a), li:has(> a) { color: var(--text-faint) !important; }

/* ---- what the prototype wrote inline ----
   **`!important`, and it is not a shortcut.** The design keeps an element's
   resting look in its `style` attribute — the medium gives it nowhere else — and
   applied a hover by *writing into that same attribute*. Lifted out to a class,
   the rule then loses to the inline declaration it is meant to override, which
   is silent: the page looks right and nothing answers the pointer. Reported as
   "the buttons aren't animated at all". */
.hv1:hover { color: var(--text) !important; background: var(--glass-hover) !important; }
.hv2:hover { background: var(--glass-hover) !important; }
.hv3:hover { background: var(--accent-hover) !important; }
/* **A card lifts; it does not draw a line round itself.** The design tinted the
   border towards the accent as well, and on a grid of twelve that is twelve
   outlines chasing the pointer. The lift and the shadow already say "this one",
   and they say it the way the app does. */
.hv4:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
.hv5:hover { filter: brightness(0.96) !important; }
.hv6:hover { color: var(--accent) !important; }

/* ---- and a control moves the way the app's controls move ----
   The design gave every control `--dur-instant` (0.09s) and a hover that changes
   a colour and nothing else. The app's `.ui-btn` takes `--dur-fast`, eases its
   transform on `--ease-spring`, lifts a pixel and casts `--shadow-sm`, and
   presses to `translateY(0) scale(0.97)`. At 0.09s with no lift the difference
   is not subtle — reported as "the buttons still don't animate like they do in
   the app". `.hv4` is a card and keeps its own two-pixel lift; `.hv6` is a word
   in a sentence and lifts nothing. */
.hv1, .hv2, .hv3, .hv4, .hv5 {
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring) !important;
}
.hv1:hover, .hv2:hover, .hv3:hover, .hv5:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* The press comes last, because `:active` is also `:hover` and the lift must
   give way to it. The scales are the design's own; the app presses to 0.97 and
   these sit either side of it. */
.ac1:active { transform: scale(0.94) !important; box-shadow: none !important; }
.ac2:active { transform: scale(0.96) !important; box-shadow: none !important; }
.ac3:active { transform: scale(0.97) !important; box-shadow: none !important; }
.ac4:active { transform: translateY(0) scale(0.98) !important; box-shadow: none !important; }

/* ---- the whole download card is the download ----
   Reported: it should be clickable all over. The headline link stretches an
   invisible box over its card, which is the pattern that keeps one anchor and
   one accessible name rather than wrapping the card in a second link. The
   format links inside — `.msi`, `.deb`, `.rpm` — are lifted above it so they
   still answer for themselves. */
.dl-card { position: relative; cursor: pointer; }
.dl-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dl-card a:not(.dl-main), .dl-card span, .dl-card em { position: relative; z-index: 1; }
.dl-card a:not(.dl-main) { pointer-events: auto; }
/* The card's own hover answers wherever the pointer is on it, because the whole
   of it is now the target. */
.dl-card:hover .dl-main { color: var(--accent) !important; }

/* ---- moving between pages ----
   **A move between two pages is a move, not a reload.** The page fades up as it
   arrives and fades down as it leaves, so the four of them read as one place
   rather than four documents that replace each other.

   The arrival is a CSS **animation**, not a transition, because it has to be in
   force at the first paint: a starting state written by script arrives after the
   page has already been drawn at full strength, which is a flash and then a
   fade. And its fill is `backwards` rather than `both` — a filled animation owns
   the property for ever, and the leaving transition below is on the same one.

   Only the leaving half needs script, and it is additive: with none, a link is
   an ordinary link. */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body {
  animation: page-in var(--dur-base) var(--ease-out) backwards;
}
:root[data-leaving] body {
  opacity: 0;
  transition: opacity 0.16s var(--ease-in);
}