/* Sage/mint reskin for the HoldFlow clone, in the register of treg.to:
   soft off-white ground, framed panels with rounded corners, jade accent.
   Injected per-request by serve-clone (--skin), so the captured bundle is untouched. */

:root {
  --bg:#f4f7f1;
  --paper:#eef3e9;
  --paper-2:#e5ece0;
  --block:#d8e1cf;
  --ink:#1b2420;
  --ink-2:#3f4b44;
  --muted:#6c7a72;
  --line:#38493f2b;
  --line-2:#38493f52;
  --hover:#38493f0d;
  --placeholder:#38493f66;
  --accent:#2f7d63;
  --accent-2:#a4d9c3;
  --on-accent:#fff;
  --night:#18211d;
  --up:#2f7d4a;
  --down:#c0492f;

  --skin-radius:20px;
  --skin-frame:1px solid #d5dfcd;
  --skin-shadow:0 1px 3px #33452208, 0 10px 30px #2b48380a;
  --skin-shadow-hover:0 8px 26px #3d542118;
}

/* The page itself goes transparent so the glyph-field canvas reads through it. */
html, body { background: transparent !important; }
body::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 55% at 50% 4%, #dcefe2 0%, transparent 60%),
    linear-gradient(#f2f7f0 0%, #e9f0e7 58%, #e3ebe2 100%);
}
#skin-field {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}
#skin-field .glyph-field { width:100%; height:100%; display:block; }
/* z-index:-1 gives #skin-field its own stacking context, so this scrim sits above
   the canvas but still below the page - it quiets the field behind headings. */
#skin-field::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 72% 42% at 50% 26%, #eff5edf0 0%, #eff5ed00 72%);
}

/* ── Framed panels ──────────────────────────────────────────────────────── */
/* The board, the stat strip and the how-it-works grid are all full-bleed
   bordered blocks in the original; give each one a card frame instead. */
#board > .grid,
main .grid.grid-cols-2.border,
main .border.border-line {
  border: var(--skin-frame) !important;
  border-radius: var(--skin-radius);
  background: #fffffff2;
  box-shadow: var(--skin-shadow);
  overflow: hidden;          /* so the inner cell borders clip to the rounded corner */
}

/* Stat cells sit flush inside the frame, separated by hairlines only. */
main .grid.grid-cols-2.border > * { background: transparent; }

/* Board header bar keeps its dark slab but follows the frame's corners. */
#board .on-dark, #board [class*="bg-night"] { border-radius: 0; }

/* Table rows: quieter separators, a warmer hover. */
#board table tr { transition: background .18s; }
#board table tbody tr:hover { background: #ffffff; }

/* Buttons and pills pick up the jade accent. */
.btn:not(.btn-ghost) { background: var(--accent); border-color: var(--accent); }
.btn-ghost { border-color: #cbd8c4; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Cards that already exist in the page get the same soft lift on hover. */
main a[href^="/t/"]:hover { background: #fff; }

/* The footer/hero dark slabs go deep evergreen rather than near-black. */
.on-dark { --bg: var(--night); }


/* ── Hero band: light field + sculpture ─────────────────────────────────── */
/* Matched on the band's own Tailwind class, not on anything JS adds, so the grid and
   the pixel field never get a frame of their own on a reload. The fill stands in for
   the shader until it has drawn - same gradient, so there is nothing to see. */
[class*="h-[140px]"] {
  height: 300px !important;
  /* Sampled from the shader's own output (average #274e3e, darker at the edges from
     its vignette), so the canvas fading in over this is not a step change. */
  background: radial-gradient(ellipse 110% 92% at 50% 47%, #2c5947 0%, #23483a 55%, #17302666 100%), #1d3b2f;
}
@media (min-width: 768px) { [class*="h-[140px]"] { height: 480px !important; } }

[class*="h-[140px]"] > :not(.skin-hero-field):not(.skin-hero-sculpture) { opacity: 0 !important; }

.skin-hero-field { position: absolute; inset: 0; z-index: 0; }
.skin-hero-field canvas { width: 100%; height: 100%; display: block; }

/* Both shaders fade over their CSS stand-in once they have actually drawn a frame. */
.skin-hero-field canvas,
.skin-footer-ripples canvas { opacity: 0; transition: opacity .45s ease; }
.skin-hero-field.skin-ready canvas,
.skin-footer-ripples.skin-ready canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .skin-hero-field canvas, .skin-footer-ripples canvas { transition: none; }
}

.skin-hero-sculpture { position: absolute; inset: 0; z-index: 1; cursor: grab; }
.skin-hero-sculpture:active { cursor: grabbing; }
.skin-hero-sculpture canvas { width: 100%; height: 100%; display: block; }

/* ── Footer: ripples in place of the pixel poster ───────────────────────── */
/* The poster was this band's only fill, so the gradient below both hides the flash
   and matches what the ripple shader paints under its rings. */
footer .on-dark.isolate { background: linear-gradient(#1d3b30, #121d18); }
footer .on-dark.isolate canvas.pixelated { opacity: 0; }
.skin-footer-ripples { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.skin-footer-ripples canvas { width: 100%; height: 100%; display: block; }


/* ── Header extras: contract-address chip, X link ───────────────────────── */
.skin-extras { display: flex; align-items: center; gap: 10px; }

.skin-ca {
  font: 10px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
  padding: 6px 9px; border-radius: 7px;
  border: 1px solid currentColor; color: inherit; opacity: .62;
}

.skin-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: inherit; opacity: .72; transition: opacity .18s, background .18s;
}
.skin-x:hover { opacity: 1; background: #ffffff1a; }
.skin-x svg { width: 15px; height: 15px; display: block; }

@media (max-width: 640px) { .skin-ca { display: none; } }


/* ── Pre-launch state ───────────────────────────────────────────────────── */
.skin-soon { opacity: .55; pointer-events: none; cursor: default; }

.skin-notice {
  max-width: 68ch; margin: 14px 0 0;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #ffffffa6;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}