/* ASCII theme (first rendition): the whole site as a monospace, white-and-grey "terminal page".
   Loads just before dark-mode.generated.css / dark-mode.css (tests/dark-mode.mjs requires those two to stay last),
   so the rules that must beat them use !important or a higher-specificity selector (html:root...).
   The page is always light (theme.js ASCII_LIGHT_ONLY). Pictures and videos keep their original look.
   Delete this file and its <link> to undo. */

/* ---------- colour tokens ---------- */
html:root {
  --ink: #3b3b3b;
  --muted: #8a8a8a;
  --line: #c9c9c9;
  --paper: #ffffff;
  --soft: #f3f3f3;
  --accent: #3b3b3b;
  --warm: #6b6b6b;
  --primary: #3b3b3b;
  --secondary: #8a8a8a;
  --document: #ffffff;
  --ascii-font: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--ascii-font);
}
html:root body.tma-v2 {
  --v-bg: #ffffff; --v-text: #3b3b3b; --v-ink: #3b3b3b; --v-muted: #8a8a8a;
  --v-surface: #ffffff; --v-surface-2: #f3f3f3; --v-line: #c9c9c9; --v-line-strong: #3b3b3b;
  --v-button: #3b3b3b; --v-button-ink: #ffffff; --v-button-hover: #8a8a8a;
  --v-accent: #3b3b3b; --v-accent-soft: #f3f3f3; --v-shadow: none; --v-radius: 0; --v-radius-sm: 0;
}
html:root body[data-page-type="homepage"] { --warm: #8a8a8a; }

/* ---------- page: flat, monospace, faint "+" character grid ---------- */
html:root, html:root body {
  background-color: var(--paper);
  color: var(--ink);
}
html:root body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='16' y='20' font-family='monospace' font-size='11' text-anchor='middle' fill='%23b8b8b8' fill-opacity='.45'%3E%2B%3C/text%3E%3C/svg%3E");
  background-attachment: fixed;
  letter-spacing: -0.01em;
}
/* Big colour fields (page sections, hero, header) become plain paper so the grid shows through. */
body :is(header, main, section, footer, nav):not([class*="modal"]):not([class*="overlay"]):not([class*="demo"]) {
  background-image: none !important;
}

/* ---------- type: everything monospace ---------- */
html:root :where(body, button, input, textarea, select, h1, h2, h3, h4, h5, h6, p, a, li, label, span, div, td, th, summary) {
  font-family: var(--ascii-font) !important;
}
h1, h2, h3, h4 { letter-spacing: -0.03em !important; font-weight: 600 !important; }
h1 { font-size: clamp(28px, 4.4vw, 50px) !important; line-height: 1.08 !important; }
h1::before, h2::before, h3::before {
  color: var(--muted);
  font-weight: 400;
}
h1::before { content: "# " / ""; }
h2::before { content: "## " / ""; }
h3::before { content: "### " / ""; }

/* ---------- shape: no rounded corners, shadows, blur or glossy effects ---------- */
*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- boxes: dashed "drawn with characters" outlines (the FAQ and the parts inside the pricing cards stay plain) ---------- */
:where([class*="card"], [class*="panel"], [class*="box"], [class*="tile"], [class*="step"], details,
  .ext-demo, .hero__cli-panel, .pricing-card, .website-support__panel, table, fieldset, blockquote):not([class*="faq"]):not([class*="faq"] *):not([class*="pricing-card__"]) {
  border-color: var(--line) !important;
  border-style: dashed !important;
  border-width: 1px !important;
  background-color: var(--paper) !important;
}
:where(.pricing-card--featured, .pricing-card--free) { border-style: solid !important; border-color: var(--ink) !important; }
hr { border: 0 !important; border-top: 1px dashed var(--line) !important; background: none !important; height: 0; }

/* ---------- buttons: [ Like This ] ---------- */
.button, a.button, button.button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  min-height: 40px;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: none !important;
  transform: none !important;
}
.button::before { content: "[ " / ""; color: var(--muted); }
.button::after  { content: " ]" / ""; color: var(--muted); }
.button--primary, a.button--primary {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
.button--primary::before, .button--primary::after { color: inherit; opacity: .6; }
.button:hover, a.button:hover, button.button:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  transform: none !important;
}
.button:hover::before, .button:hover::after { color: inherit; }
.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1px dashed var(--ink) !important;
  outline-offset: 3px !important;
}

/* ---------- inputs ---------- */
input, textarea, select {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  caret-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }

/* ---------- links and lists ---------- */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { background: var(--ink); color: var(--paper) !important; text-decoration: none; }
a.button:hover, nav a.button:hover { text-decoration: none; }
/* header links ("How it works", "Pricing", ...): readable at rest and a clear inverted hover (the site's own hover is a faint grey) */
html:root .site-header nav > a:not(.nav-account):not(.button) { color: #5a5a5a !important; }
html:root .site-header nav > a:not(.nav-account):not(.button):hover,
html:root .site-header nav > a:not(.nav-account):not(.button):focus-visible {
  background: var(--ink) !important;
  color: var(--paper) !important;
  text-decoration: none;
}
ul:not([class]) { list-style: "> "; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- brand: blinking cursor ---------- */
.brand::after {
  content: "_" / "";
  margin-left: 2px;
  animation: ascii-blink 1.1s steps(1) infinite;
}
@keyframes ascii-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand::after { animation: none; } }

/* ---------- footer rule ---------- */
footer { border-top: 1px dashed var(--line) !important; }

/* ---------- white and grey only: the page is always light, so the theme toggle is hidden ---------- */
html:root { color-scheme: light !important; }
.theme-toggle { display: none !important; }

/* ---------- downloads / library app (signed-in page): white and grey colour tokens ---------- */
html:root .local-library, html:root .cloud-connect-dialog,
html:root[data-theme="dark"] .local-library, html:root[data-theme="dark"] .cloud-connect-dialog {
  --ll-bg: #ffffff; --ll-label: #3b3b3b; --ll-secondary: #6a6a6a; --ll-tertiary: #9a9a9a;
  --ll-separator: rgba(0, 0, 0, .16); --ll-hover: rgba(0, 0, 0, .06);
  --ll-selected: #e4e4e4; --ll-selected-ink: #1f1f1f; --ll-accent: #3b3b3b; --ll-fill: #f3f3f3;
  --ll-danger: #555555; --ll-thumb: #e9e9e9; --ll-shadow: none;
  --ll-smoke: rgba(255, 255, 255, .95); --ll-smoke-cool: rgba(150, 150, 150, .55); --ll-smoke-warm: rgba(185, 185, 185, .5);
  --ll-frost: rgba(255, 255, 255, .3); --ll-haze: #dcdcdc;
  font-family: var(--ascii-font);
}
.local-library__select { accent-color: #3b3b3b !important; }

/* ---------- no hover pop-ups: no floating labels above logos, no lifting, zooming or sliding on hover ---------- */
.headline-source-logo::before, .headline-source-logo::after { content: none !important; display: none !important; }
html:root :is(a, button, summary, img, video, article, .hero__demo, .supports__clip, .headline-source-logo, [class*="card"], [class*="tile"], [class*="clip"]):hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}