/* sincllm theme tokens. Positional tone scale (t-0 darkest .. t-9 lightest in DARK theme).
   Light theme swaps the ends, so any fg/bg pair flips together (contrast preserved).
   Default = dark (matches the black logo). Switch via html[data-theme]. */
:root, html[data-theme="dark"] {
  --t-0: #0c0c0c; --t-0-rgb: 12,12,12;
  --t-1: #161616;
  --t-2: #1d1d1b;
  --t-3: #2b2b29;
  --t-5: #7a7a78;
  --t-6: #adadab;
  --t-7: #c8c8c6; --t-7-rgb: 200,200,198;
  --t-9: #f2f2f0; --t-9-rgb: 242,242,240;
  color-scheme: dark;
}
html[data-theme="light"] {
  --t-0: #f7f7f5; --t-0-rgb: 247,247,245;
  --t-1: #efefec;
  --t-2: #e6e6e3;
  --t-3: #d4d4d1;
  --t-5: #6f6f6d;
  --t-6: #565654;
  --t-7: #3a3a38; --t-7-rgb: 58,58,56;
  --t-9: #0c0c0c; --t-9-rgb: 12,12,12;
  color-scheme: light;
}

/* floating toggle button (token-styled, adapts to theme) */
.sl-theme-toggle {
  position: fixed; bottom: 20px; left: 20px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--t-3); background: var(--t-1); color: var(--t-9);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: background 0.2s, transform 0.2s;
}
.sl-theme-toggle:hover { background: var(--t-2); transform: translateY(-2px); }
.sl-theme-toggle:focus-visible { outline: 2px solid var(--t-9); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sl-theme-toggle { transition: none; } }

/* ============================================================
   SINCLLM BACKGROUND TEXTURE — additive block, 2026-07-09
   Topographic map rendered as a fixed, full-viewport texture
   at roughly 18% effective opacity behind all page content.

   Technique: multi-layer background-image on body.
     Layer 1 (front): a solid-colour gradient at 0.82 alpha,
       drawn in the current theme's base colour. This acts as
       an opacity mask; the image shows through at ~18%.
     Layer 2 (back):  the topographic PNG, fixed-attached so
       it stays pinned while the page scrolls (parallax).

   To swap candidate: change the url() in the two body rules.
   To adjust intensity: change the 0.82 value (1 - desired_opacity).
   File lives at: /var/www/tokencalc/frontend/css/sincllm-theme.css
   Backup:        <same path>.bak-bg-20260709
   Images at:     /var/www/tokencalc/frontend/assets/bg/bg-dark.png
                  /var/www/tokencalc/frontend/assets/bg/bg-light.png
   ============================================================ */

/* Dark mode (default) — topographic on near-black */
body {
  background-image:
    linear-gradient(
      rgba(var(--t-0-rgb), 0.82),
      rgba(var(--t-0-rgb), 0.82)
    ),
    url(/assets/bg/bg-dark.png);
  background-size:   auto, cover;
  background-attachment: scroll, fixed;
  background-position:   0 0, center center;
  background-repeat:     repeat, no-repeat;
}

/* Light mode — topographic on off-white */
html[data-theme="light"] body {
  background-image:
    linear-gradient(
      rgba(var(--t-0-rgb), 0.82),
      rgba(var(--t-0-rgb), 0.82)
    ),
    url(/assets/bg/bg-light.png);
}

/* ============================================================
   SINCLLM BLOG POSTS — mobile table-overflow fix, 2026-07-09
   Additive. All 98 blog posts link to this file (before editorial.css).

   OBSERVED 2026-07-09: the build-vs-buy post table has
   scrollWidth=1448px inside clientWidth=358px at 390px viewport.
   Content is silently clipped; the right columns are invisible.
   Body document stays at 390px (no horizontal scroll indicator),
   so readers cannot discover the hidden content.

   FIX: table{display:block;overflow-x:auto} creates a scroll
   context on the table element. The <tbody>, <tr>, <td> children
   retain their table display values (user-agent stylesheet) and
   form an anonymous table inside the block, preserving column
   alignment. The block itself is constrained to 100% parent width
   and scrolls horizontally when table content exceeds it.

   Defensive img rule prevents any loose inline image from
   exceeding viewport width and causing silent horizontal overflow.

   Scope: max-width:700px only. Desktop (>700px) unchanged.
   ============================================================ */

/* Images never exceed viewport — defensive, all viewports */
img { max-width: 100%; height: auto; }

@media (max-width: 700px) {
  /* Wide tables scroll horizontally instead of overflowing silently */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}