/* shared/ocm.css
 *
 * The OCM research design system: tokens and the components every page
 * shares. Loaded first by the research hub, the article page, the homepage
 * widget and the saved page, so page stylesheets build on it and can refine
 * it. Colour lives here and nowhere else: change --ocm-accent-rgb and every
 * page follows.
 */
:root {
  /* Brand */
  --ocm-accent-rgb: 74, 222, 128;          /* #4ade80, the suite-wide OCM green */
  --accent: rgb(var(--ocm-accent-rgb));
  --accent-2: #22c55e;
  --accent-bright: var(--accent);
  --brand-green: #1F7120;
  --brand-green-hover: #165c17;
  --accent-glow: rgba(var(--ocm-accent-rgb), 0.15);
  --accent-dark: rgba(var(--ocm-accent-rgb), 0.08);
  --border-hover: rgba(var(--ocm-accent-rgb), 0.3);

  /* Surfaces: glass over the parent site's dark ground */
  --bg-base: transparent;
  --ground: #0a0a0f;                       /* used only when a page is opened on its own */
  --card-bg: rgba(20, 20, 25, 0.4);
  --card-hover: rgba(30, 30, 38, 0.7);
  --s2: rgba(24, 24, 29, 0.6);
  --s3: rgba(30, 30, 38, 0.8);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.05);

  /* Text */
  --text-main: #ffffff;
  --text-body: #e2e8f0;                    /* long-form reading text */
  --text-sub: #cbd5e1;                     /* secondary text */
  --text-dim: #94a3b8;                     /* meta, labels: 7:1 on the dark ground */
  --text-faint: #64748b;                   /* decoration only, never for words that matter */

  /* Category colours */
  --orange: #f7931a;
  --purple: #a78bfa;
  --blue: #60a5fa;
  --red: #f87171;
  --gold: #fbbf24;
  --gold-light: #ffe9a8;

  /* Type */
  --font: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Opened on its own (not inside onchainmind.io), a page paints the site's dark
   ground itself instead of showing white text on a white browser background.
   The class is set by a one-line script in each page's head. */
html.ocm-standalone, html.ocm-standalone body { background-color: var(--ground) !important; }

/* ---------------------------------------------------------------- base */
.ocm-hide { display: none !important; }
.ocm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------------------------------------------------------------- category tags */
.tag {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 4px 10px; border-radius: 6px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.toc  { background: rgba(var(--ocm-accent-rgb), 0.08); color: var(--accent); border: 1px solid rgba(var(--ocm-accent-rgb), 0.15); }
.tbtc { background: rgba(247, 147, 26, 0.08); color: var(--orange); border: 1px solid rgba(247, 147, 26, 0.16); }
.tmac { background: rgba(139, 92, 246, 0.08); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.15); }
.ttec { background: rgba(59, 130, 246, 0.08); color: var(--blue); border: 1px solid rgba(59, 130, 246, 0.15); }
.tder { background: rgba(239, 68, 68, 0.08); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.15); }
.tprem { background: rgba(255, 255, 255, 0.07); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); }
.tprem svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; fill: none; margin-right: 4px; }

/* Advanced Research (gold tier). Gold is --gold with --gold-light highlights. */
.tadv {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.20) 45%, rgba(251, 191, 36, 0.10));
  color: var(--gold); border: 1px solid rgba(251, 191, 36, 0.40);
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.35);
}
.tadv::before { content: '\2726'; margin-right: 5px; font-size: 0.9em; line-height: 1; animation: advTwinkle 2.6s ease-in-out infinite; }
.tadv::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 238, 180, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: advSheen 3.6s ease-in-out infinite;
}
@keyframes advSheen { 0%, 55% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
@keyframes advTwinkle { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------------------------------------------------------------- buttons */
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px; font-family: var(--font); font-weight: 700;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  font-size: 0.82rem; padding: 9px 16px;
}
.nav-btn-ghost { background: var(--s2); border: 1px solid var(--border-color); color: var(--text-sub); }
.nav-btn-ghost:hover { background: var(--s3); color: var(--text-main); border-color: rgba(255, 255, 255, 0.14); }

/* ---------------------------------------------------------------- subscribe card pieces */
.nlchk {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-dark); border: 1px solid rgba(var(--ocm-accent-rgb), 0.2);
}
.nlchk svg { width: 10px; height: 10px; stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- the visible-viewport layer
   OCM.vp.layer() (shared/ocm-core.js). position:fixed when the page scrolls
   itself; inside a full-height Framer embed it becomes position:absolute and
   follows the slice of the document the reader can see. Floating UI lives
   inside it with position:absolute, so it sits on screen either way. */
#ocm-vp {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9990; contain: layout style;
}
#ocm-vp.is-doc { position: absolute; will-change: transform; }
#ocm-vp.is-offscreen { visibility: hidden; }
#ocm-vp > * { pointer-events: auto; }

/* ---------------------------------------------------------------- motion */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--ocm-accent-rgb), 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(var(--ocm-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ocm-accent-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tadv::before, .tadv::after { animation: none !important; }
}