/* twisk — the original Slide blue over BOTH light and dark themes (the toggle
   still works): #0a0a0a with light text on the light theme, #ffffff with dark
   text on the dark theme (the default). Values from the first captured snapshot. */

/* LIGHT (and the fallback before the theme attribute is set) */
:root{
  --color-accent:#0a0a0a !important;
  --color-accent-rgb:10, 10, 10 !important;
  --color-accent-muted:rgba(10, 10, 10, .85) !important;
  --color-accent-line:rgba(10, 10, 10, .4) !important;
  --color-accent-active-line:rgba(10, 10, 10, .5) !important;
  --color-accent-foreground:#f6f6f4 !important;
  --color-accent-foreground-rgb:246, 246, 244 !important;
  --color-inverted-foreground:#f6f6f4 !important;
  --color-inverted-body:rgba(246, 246, 244, .9) !important;
  --color-inverted-muted:rgba(246, 246, 244, .825) !important;
  --color-inverted-faint:rgba(246, 246, 244, .6) !important;
  --color-inverted-soft:rgba(246, 246, 244, .75) !important;
  --color-inverted-line:rgba(246, 246, 244, .3) !important;
  --color-inverted-hairline:rgba(246, 246, 244, .15) !important;
  --color-inverted-active-line:rgba(246, 246, 244, .75) !important;
  /* NOT !important: blue is the default accent, but a holder's chosen colour
     arrives as an inline --slide-accent on their public pay page, and forcing it
     here made unlocking a colour do nothing at all. */
  --slide-accent:#0a0a0a;
}

/* DARK: black + white, lighter blue with dark text on it */
:root[data-theme="dark"]{
  --color-accent:#ffffff !important;
  --color-accent-rgb:255, 255, 255 !important;
  --color-accent-muted:rgba(255, 255, 255, .85) !important;
  --color-accent-line:rgba(255, 255, 255, .4) !important;
  --color-accent-active-line:rgba(255, 255, 255, .5) !important;
  --color-accent-foreground:#0e0e0d !important;
  --color-accent-foreground-rgb:14, 14, 13 !important;
  --color-inverted-foreground:#000000 !important;
  --color-inverted-body:rgba(0, 0, 0, .9) !important;
  --color-inverted-muted:rgba(0, 0, 0, .72) !important;
  --color-inverted-faint:rgba(0, 0, 0, .6) !important;
  --color-inverted-soft:rgba(0, 0, 0, .75) !important;
  --color-inverted-line:rgba(0, 0, 0, .3) !important;
  --color-inverted-hairline:rgba(0, 0, 0, .15) !important;
  --color-inverted-active-line:rgba(0, 0, 0, .75) !important;
  --slide-accent:#ffffff;
  --color-background:#000000 !important;
  --color-foreground:#ffffff !important;
  --color-foreground-rgb:255, 255, 255 !important;
  --color-body:#e4e4e4 !important;
  --color-muted:#a0a0a0 !important;
  --color-faint:#6e6e6e !important;
  --color-soft:rgba(255, 255, 255, .64) !important;
  --color-hairline:rgba(255, 255, 255, .12) !important;
  --color-error:#ff5a52 !important;
  color-scheme:dark !important;
}

/* LIGHT: white + near-black */
:root[data-theme="light"]{
  --color-background:#ffffff !important;
  --color-foreground:#0a0a0a !important;
  --color-foreground-rgb:10, 10, 10 !important;
  --color-body:#2a2a2a !important;
  --color-muted:#5a5a5a !important;
  --color-faint:#8a8a8a !important;
  --color-soft:rgba(10, 10, 10, .64) !important;
  --color-hairline:rgba(10, 10, 10, .12) !important;
  --color-error:#c81e1e !important;
  color-scheme:light !important;
}

/* body follows whichever theme's tokens are active */
html, body{ background:var(--color-background) !important; color:var(--color-foreground) !important; }

/* twisk mark: artwork is black on transparent — recolor to white on the dark theme so it stays visible. */
:root[data-theme="dark"] img[src*="twisk-mark"]{ filter: invert(1); }

/* The accent-picker card is back, gated on holding $twisk rather than $SLIDE.
   It used to be hidden here because it advertised a token this app had nothing
   to do with. Locked dots stay visible on purpose: they are the advert. */
.slide-accents{ display:flex; gap:.55rem; justify-content:center; margin:.35rem 0 .1rem; }
.slide-accent-dot{ width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; transition:transform .12s ease, border-color .12s ease, opacity .12s ease; }
.slide-accent-dot:hover:not(:disabled){ transform:scale(1.12); }
.slide-accent-dot.is-on{ border-color:var(--color-foreground); }
.slide-accent-dot:disabled{ cursor:not-allowed; opacity:.45; }

/* De-duplicate the logo: hide the copy in the sticky "attached" header that slides in on scroll. */
.site-attached-header .slide-brandmark { display: none !important; }

/* --- Header lockups -------------------------------------------------------
   Marketing pages: the mark alone. The header used to stack a 22px <img> and
   the large masked brand-mark, with a wordmark beside them; now only the mark
   is shown, so the small duplicate and the text both go. The sticky header
   reuses these classes, so one set of rules covers both. */
.site-header__brand .slide-brandmark { display: none !important; }
.site-header__brand { display: inline-flex !important; align-items: center !important; gap: 0 !important; }

/* Put the "twisk" span back to screen-reader-only: it stays the accessible name
   for the link while the mark carries the brand visually. */
.site-header__brand .site-header__sr-only {
  position: absolute !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
}

/* The mark is a masked element filled with currentColor, so it flips to black
   ink by itself wherever the chartreuse reveal band crosses the header. */
.site-header__brand-mark {
  width: 2rem !important; height: 2rem !important; flex: 0 0 auto !important;
}

/* App pages (dashboard / send / receive / activity): the wordmark alone, no
   rabbit. The markup is <a class="slide-top__brand"><img>twisk</a>, so the image
   is hidden and the bare text node is collapsed with font-size:0, then the
   supplied wordmark artwork is painted as a currentColor mask — which keeps it
   white on the dark theme and black on the light one. */
.slide-top__brand {
  display: inline-block !important;
  width: 3.2rem !important; height: 1.4rem !important;
  font-size: 0 !important; line-height: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("/brand/twisk-wordmark.png") left center / contain no-repeat !important;
  mask: url("/brand/twisk-wordmark.png") left center / contain no-repeat !important;
}
.slide-top__brand .slide-brandmark { display: none !important; }

/* twisk is black and white end to end: coin art loses its colour too. */
img[src*="/brand/coin-"]{ filter:grayscale(1) contrast(1.15) !important; }
/* The wordmark is five letters wide. */
.slide-top__brand{ width:3.6rem !important; height:.98rem !important; }