/**
 * support.css — "Support the studio" tip jar.
 * ------------------------------------------------------------------
 * Loaded AFTER styles.css and home.css; overrides only what this page needs.
 * Every colour, radius and shell width below is a home.css token (--hv-*) so
 * the page reads as native drooly.ai rather than a bolted-on payment page.
 *
 * Scoped to `body.support-page` — nothing here can leak onto another surface.
 *
 * VISUAL HONESTY RULES ENCODED HERE (they are not decoration):
 *  - No amount gets a "recommended" treatment: .sup-amount has ONE style, and
 *    there is deliberately no .is-popular / .is-featured variant to reach for.
 *  - No :checked / [aria-pressed] preselect styling, because no amount is
 *    preselected. No dark-pattern default.
 *  - The "What this doesn't buy" block (.sup-nots) is styled at full body
 *    weight, never as fine print. If it ever gets shrunk to 12px grey text,
 *    the page has started lying.
 *  - The closed state is the default in CSS as well as in markup: controls read
 *    inert until [data-support-state="open"] is set by a live server check.
 *
 * Contract notes carried from hard-won bugs in this repo:
 *  - never a bare `1fr` in grid-template-columns (that is minmax(auto, 1fr)
 *    and blows out narrow viewports) — always minmax(0, 1fr).
 *  - coarse-pointer rules are or-shaped, never (pointer: coarse) alone.
 *  - every tappable clears 44px on BOTH axes: min-width AND min-height. The
 *    one-axis floor has shipped broken three separate times here.
 */

body.support-page {
  background: var(--hv-espresso);
  color: var(--hv-ink);
}

/* ---------------------------------------------------------------- header -- */

body.support-page .sup-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-left: auto;
}

body.support-page .sup-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px floor on BOTH axes. Not one, both. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--hv-ink-dim);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

body.support-page .sup-nav a:hover { color: var(--hv-ink); }

body.support-page .sup-nav a:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----------------------------------------------------------------- main -- */

body.support-page .sup-main {
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}

body.support-page .sup-hero { padding-top: 40px; }

body.support-page .sup-lede { max-width: 46ch; }
body.support-page .sup-ask { max-width: 52ch; }

body.support-page .sup-block { padding-block: 44px; }

body.support-page .sup-block .hv-h2 { margin-bottom: 4px; }

/* --------------------------------------------------------- state banner -- */

/*
 * The closed banner is the resting state and is styled as a plain factual
 * notice, not a warning and not a teaser. It says nothing can take your money,
 * because nothing can.
 */
body.support-page .sup-state-note {
  margin: 28px 0 0;
  padding: 16px 18px;
  max-width: 60ch;
  border: 1px solid rgba(249, 240, 226, 0.16);
  border-left: 4px solid var(--hv-s3);
  border-radius: var(--hv-round-sm);
  background: rgba(0, 0, 0, 0.24);
  color: var(--hv-ink-dim);
  font-size: 1rem;
  line-height: 1.6;
}

body.support-page .sup-state-note strong { color: var(--hv-ink); }
body.support-page .sup-state-note.is-open { border-left-color: var(--hv-s4); }

/* Belt and braces with the `hidden` attribute support.js toggles: even if a
   stylesheet elsewhere resets [hidden], the wrong-state copy stays hidden. */
body.support-page [data-support-when][hidden] { display: none !important; }

/* ------------------------------------------------------------- amounts -- */

body.support-page .sup-amounts-note { max-width: 56ch; }

/*
 * minmax(0, 1fr), never a bare 1fr: a bare 1fr is minmax(auto, 1fr) and the
 * "$25" / "Any amount" cells would refuse to shrink below their content on a
 * 320px phone, blowing the grid out of the viewport.
 */
body.support-page .sup-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

body.support-page .sup-amounts > li { margin: 0; min-width: 0; }

/*
 * ONE style for every amount. There is no featured variant on purpose — a
 * "most popular" badge would not be true, and a pre-highlighted amount is a
 * dark-pattern default.
 */
body.support-page .sup-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  /* 44px floor on BOTH axes (the recurring mirror-bug); the real box is 76px. */
  min-width: 44px;
  min-height: 76px;
  padding: 14px 12px;
  border: 1px solid rgba(249, 240, 226, 0.22);
  border-radius: var(--hv-round);
  background: rgba(249, 240, 226, 0.05);
  color: var(--hv-ink);
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

body.support-page .sup-amount-figure {
  font-family: var(--hv-serif);
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

body.support-page .sup-amount-sub {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hv-ink-mute);
}

/* Closed: reads inert, and genuinely is — the markup carries no href. */
body.support-page[data-support-state="closed"] .sup-amount {
  opacity: 0.55;
  cursor: default;
  border-style: dashed;
}

body.support-page[data-support-state="open"] .sup-amount:hover {
  border-color: var(--hv-mint);
  background: rgba(127, 232, 208, 0.1);
  transform: translateY(-2px);
}

body.support-page .sup-amount:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 3px;
}

body.support-page .sup-cta-state {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--hv-ink-mute);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------- lists -- */

/*
 * Full body weight. "What this doesn't buy" is the product, not fine print:
 * same size and contrast as everything else on the page.
 */
body.support-page .sup-list {
  margin: 18px 0 0;
  padding: 0;
  max-width: 62ch;
  list-style: none;
}

body.support-page .sup-list > li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--hv-ink-dim);
  font-size: 1rem;
  line-height: 1.65;
}

body.support-page .sup-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--hv-s1);
}

body.support-page .sup-list-plain > li::before { background: var(--hv-s5); }
body.support-page .sup-list > li strong { color: var(--hv-ink); }

body.support-page .sup-nots {
  border-top: 1px solid rgba(249, 240, 226, 0.14);
  border-bottom: 1px solid rgba(249, 240, 226, 0.14);
}

body.support-page .sup-nots-why {
  max-width: 58ch;
  color: var(--hv-ink-mute);
}

/* Inline links are still tap targets: 44px on both axes. */
body.support-page .sup-inline-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--hv-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.support-page .sup-inline-link:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- ctas --- */

body.support-page .sup-btn {
  min-width: 44px;
  min-height: 56px;
}

/* --------------------------------------------------------------- foot --- */

body.support-page .sup-foot {
  padding: 34px 0 12px;
  border-top: 1px solid rgba(249, 240, 226, 0.14);
  color: var(--hv-ink-mute);
  font-size: 0.86rem;
  line-height: 1.7;
}

body.support-page .sup-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--hv-ink-dim);
  text-decoration: none;
}

body.support-page .sup-foot a:hover { color: var(--hv-ink); text-decoration: underline; }

body.support-page .sup-foot a:focus-visible {
  outline: 3px solid var(--hv-mint);
  outline-offset: 3px;
  border-radius: 4px;
}

body.support-page .sup-foot-fine { max-width: 68ch; color: var(--hv-ink-mute); }

/* ------------------------------------------------------------- phones --- */

/*
 * OR-shaped gate, never `(pointer: coarse)` alone: a coarse-only gate misses
 * narrow mouse windows and a width-only gate misses wide touch devices. Both
 * arms, always.
 */
@media (max-width: 900px), (pointer: coarse) {
  body.support-page .sup-hero { padding-top: 28px; }
  body.support-page .sup-block { padding-block: 34px; }

  body.support-page .sup-nav { gap: 2px 8px; }

  /* Roomier taps on touch. Both axes stay above the floor. */
  body.support-page .sup-amount {
    min-width: 44px;
    min-height: 84px;
  }

  body.support-page .sup-amounts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  }
}

@media (max-width: 420px) {
  body.support-page .sup-amounts { grid-template-columns: minmax(0, 1fr); }
  body.support-page .sup-amount-figure { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.support-page .sup-amount { transition: none; }
  body.support-page[data-support-state="open"] .sup-amount:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Crypto tip cards — metallic, 3D on pointer, honest underneath.
 * The shine is decoration only: it never obscures the address, never animates
 * the address itself, and the "buys nothing" warnings below keep full contrast.
 * Tilt is progressive enhancement (support.js) and is disabled outright for
 * prefers-reduced-motion; every card is fully usable with no JS and no motion.
 * ------------------------------------------------------------------------- */
.sup-chains {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  perspective: 1000px;
}

.sup-chain-card {
  --edge: rgba(255, 255, 255, .16);
  --glow: rgba(255, 255, 255, .10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 20px;
  border-radius: var(--hv-round, 18px);
  border: 1px solid var(--edge);
  background:
    linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 34%, rgba(0,0,0,.28) 100%),
    linear-gradient(200deg, #23201c 0%, #17140f 60%, #100e0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 12px 30px rgba(0,0,0,.42);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.sup-chain-card.is-btc { --edge: rgba(247,147,26,.42); --glow: rgba(247,147,26,.26); color: #F7931A; }
.sup-chain-card.is-eth { --edge: rgba(98,126,234,.42); --glow: rgba(98,126,234,.26); color: #627EEA; }
.sup-chain-card.is-sol { --edge: rgba(153,69,255,.45); --glow: rgba(20,241,149,.24); color: #9945FF; }

.sup-chain-card:hover,
.sup-chain-card:focus-within {
  border-color: var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 18px 44px rgba(0,0,0,.5),
    0 0 34px var(--glow);
}

/* Sweeping specular highlight — follows the pointer via --mx/--my from JS,
   and sits at a pleasant default when there is no pointer at all. */
.sup-chain-sheen {
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mx, 30%) var(--my, 18%),
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.06) 26%,
    transparent 58%
  );
  transition: opacity .35s ease;
  opacity: .85;
}

.sup-chain-head { display: flex; align-items: center; gap: 12px; }
.sup-chain-logo { flex: none; display: inline-flex; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
.sup-chain-names { display: flex; flex-direction: column; line-height: 1.15; }
.sup-chain-net {
  font-family: var(--hv-serif, "EB Garamond", Georgia, serif);
  font-size: 1.28rem; font-weight: 600; color: var(--hv-ink, #f8f0e2);
}
.sup-chain-sym {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hv-ink-mute, #a99b85);
}

/* The address must always be plainly readable and fully selectable — it is the
   thing being trusted. No truncation, no ellipsis, no marquee. */
.sup-chain-addr {
  display: block;
  margin: 16px 0 14px;
  padding: 12px 13px;
  border-radius: var(--hv-round-sm, 11px);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.09);
  text-decoration: none;
}
.sup-chain-addr code {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--hv-ink-dim, #d9cbb4);
  overflow-wrap: anywhere;
  user-select: all;
}
.sup-chain-addr:hover code,
.sup-chain-addr:focus-visible code { color: var(--hv-ink, #f8f0e2); }

.sup-chain-copy {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  color: var(--hv-ink, #f8f0e2);
  font: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.sup-chain-copy:hover { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); border-color: var(--edge); }
.sup-chain-copy:active { transform: translateY(1px); }
.sup-chain-copy:focus-visible { outline: 2px solid var(--hv-mint, #7fe8d0); outline-offset: 3px; }

.sup-chain-warn { margin-top: 20px; }

/* ------------------------------------------------------------------------
 * One-click send: amount chips + send/copy action row.
 * Honesty rules carried over from the card amounts above: ONE chip style,
 * no featured/popular variant, nothing preselected (aria-pressed="false" in
 * markup; JS may set true only after a human taps). 44px on BOTH axes.
 * ---------------------------------------------------------------------- */
.sup-chain-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.sup-chain-chip {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px floor on BOTH axes — the one-axis floor has shipped broken here. */
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .3);
  color: var(--hv-ink-dim, #d9cbb4);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.sup-chain-chip:hover { border-color: var(--edge); color: var(--hv-ink, #f8f0e2); }

.sup-chain-chip[aria-pressed="true"] {
  border-color: var(--edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow: 0 0 18px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: var(--hv-ink, #f8f0e2);
}

.sup-chain-chip:focus-visible {
  outline: 2px solid var(--hv-mint, #7fe8d0);
  outline-offset: 2px;
}

.sup-chain-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px;
}

.sup-chain-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px rgba(0, 0, 0, .35);
  color: var(--hv-ink, #f8f0e2);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.sup-chain-send:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 24px rgba(0, 0, 0, .4), 0 0 26px var(--glow);
}
.sup-chain-send:active { transform: translateY(1px); }
.sup-chain-send:focus-visible { outline: 2px solid var(--hv-mint, #7fe8d0); outline-offset: 3px; }

/* Wallet feedback line. Reserved space so messages don't shove the layout. */
.sup-chain-status {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--hv-ink-mute, #a99b85);
}

@media (prefers-reduced-motion: reduce) {
  .sup-chain-card { transition: none !important; transform: none !important; }
  .sup-chain-sheen { transition: none; }
  .sup-chain-chip,
  .sup-chain-send { transition: none; }
  .sup-chain-send:active { transform: none; }
}

/* ==========================================================================
 * Channel-state labels in the section headings.
 *
 * The page has two payment channels in two different states, and the headings
 * carry that fact so a skim-reader gets it without reading the banner. Muted
 * for the dead channel, live-coloured for the working one — but the words say
 * it too, because colour alone is not information.
 * ====================================================================== */
body.support-page .sup-h2-state {
  display: inline;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hv-ink-mute, #a99b85);
  white-space: nowrap;
}
body.support-page .sup-h2-state.is-live { color: var(--hv-mint, #7fe8d0); }

/* The crypto banner is the one true statement on the page that never depends
 * on a fetch, so it gets the affirmative treatment unconditionally. */
body.support-page .sup-state-note.sup-state-crypto {
  border-left-color: var(--hv-mint, #7fe8d0);
}

/* ==========================================================================
 * "Four ways to pay" ladder.
 * Ordered because it IS an order: each rung is the fallback for the one above.
 * ====================================================================== */
body.support-page .sup-chain-how {
  margin: 18px 0 26px;
  padding: 0 0 0 1.2em;
  display: grid;
  gap: 8px;
  color: var(--hv-ink-dim, #d9cbb4);
  font-size: .92rem;
  line-height: 1.6;
}
body.support-page .sup-chain-how strong { color: var(--hv-ink, #f8f0e2); }

/* ==========================================================================
 * QR disclosure on each chain card.
 *
 * <details> and not a JS toggle: it works with scripting off, it is a native
 * accessible control, and it keeps three 180px images from tripling the height
 * of the page on a phone. The summary is a real 44px-both-axes target.
 * ====================================================================== */
body.support-page .sup-chain-qr { margin-top: 12px; }

body.support-page .sup-chain-qr > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .3);
  color: var(--hv-ink-dim, #d9cbb4);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  list-style: none;
}
body.support-page .sup-chain-qr > summary::-webkit-details-marker { display: none; }
body.support-page .sup-chain-qr > summary:hover { border-color: var(--edge); color: var(--hv-ink, #f8f0e2); }
body.support-page .sup-chain-qr > summary:focus-visible {
  outline: 2px solid var(--hv-mint, #7fe8d0);
  outline-offset: 2px;
}

/* White plate behind the symbol: scanners want maximum contrast, and a dark
 * page would otherwise invert it into something many readers refuse. */
body.support-page .sup-chain-qr img {
  display: block;
  width: 180px;
  height: 180px;
  max-width: 100%;
  margin: 12px auto 0;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}

/* ==========================================================================
 * Open-source card.
 *
 * The commit list inside this is static markup written at build time by
 * scripts/build-oss-card.mjs. There is no widget, no iframe and no external
 * script — so there is no loading state to style, and deliberately no skeleton
 * or spinner rule here to reach for.
 * ====================================================================== */
body.support-page .oss-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .07), transparent 60%),
    rgba(0, 0, 0, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .35);
  padding: 22px;
}

body.support-page .oss-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}
body.support-page .oss-mark { color: var(--hv-ink, #f8f0e2); display: block; }
body.support-page .oss-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--hv-ink, #f8f0e2);
}
body.support-page .oss-sub,
body.support-page .oss-body {
  margin: 0;
  color: var(--hv-ink-dim, #d9cbb4);
  font-size: .92rem;
  line-height: 1.6;
}
body.support-page .oss-body { margin: 0 0 16px; }

body.support-page .oss-repos {
  display: grid;
  /* minmax(0,…) not a bare 1fr: a bare track is minmax(auto,1fr) and refuses
     to shrink below its content, which is how repo names blew out on mobile. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 0.5fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

body.support-page .oss-repo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
body.support-page .oss-repo:hover { border-color: var(--edge); background: rgba(255, 255, 255, .06); }
body.support-page .oss-repo:focus-visible { outline: 2px solid var(--hv-mint, #7fe8d0); outline-offset: 2px; }
body.support-page .oss-repo-name {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  font-weight: 700;
  color: var(--hv-ink, #f8f0e2);
  overflow-wrap: anywhere;
}
body.support-page .oss-repo-blurb {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--hv-ink-mute, #a99b85);
}

body.support-page .oss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
body.support-page .oss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  color: var(--hv-ink, #f8f0e2);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.support-page .oss-btn.is-ghost {
  background: rgba(0, 0, 0, .3);
  border-color: rgba(255, 255, 255, .14);
  color: var(--hv-ink-dim, #d9cbb4);
}
body.support-page .oss-btn:hover { border-color: var(--edge); color: var(--hv-ink, #f8f0e2); }
body.support-page .oss-btn:focus-visible { outline: 2px solid var(--hv-mint, #7fe8d0); outline-offset: 3px; }

body.support-page .oss-commits-title {
  margin: 0 0 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-ink-mute, #a99b85);
}

body.support-page .oss-commits {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

body.support-page .oss-commit-link {
  display: grid;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
body.support-page .oss-commit-link:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
body.support-page .oss-commit-link:focus-visible { outline: 2px solid var(--hv-mint, #7fe8d0); outline-offset: 2px; }

body.support-page .oss-commit-msg {
  color: var(--hv-ink, #f8f0e2);
  font-size: .84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
body.support-page .oss-commit.is-auto .oss-commit-msg { color: var(--hv-ink-dim, #d9cbb4); }

body.support-page .oss-commit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--hv-ink-mute, #a99b85);
}
body.support-page .oss-commit-repo { color: var(--hv-ink-dim, #d9cbb4); }
body.support-page .oss-commit-sha {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  color: var(--hv-ink-dim, #d9cbb4);
  font-size: .95em;
}
/* Not decoration: this tag is the difference between "we ship constantly" and
   the truth, which is that a sweeper commits the tree on a timer. */
body.support-page .oss-commit-tag {
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .9em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hv-ink-mute, #a99b85);
}

body.support-page .oss-foot,
body.support-page .oss-empty {
  margin: 0;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--hv-ink-mute, #a99b85);
}
body.support-page .oss-foot .oss-commit-tag { text-transform: none; }

@media (max-width: 900px), (pointer: coarse) {
  body.support-page .oss-card { padding: 18px 16px; }
  body.support-page .oss-repos { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.support-page .oss-repo,
  body.support-page .oss-commit-link,
  body.support-page .oss-btn { transition: none; }
}