/* ------------------------------------------------------------------------
   Portrai skin for VGL-stGen demo.
   Loaded AFTER style.css. Re-maps the demo's generic shadcn tokens to the
   real Portrai design-system values (tokens.css) and nudges a few components
   so the page reads as part of portrai.io. Structure + JS are untouched.
   ------------------------------------------------------------------------ */

:root {
  /* Brand - exact Portrai blue (was a near-blue oklch approximation) */
  --color-primary: #0d91e3;
  --color-primary-foreground: #fafafa;
  --color-primary-hover: #0b82cc;
  --color-primary-subtle: #eff9fe;          /* --brand-accent-bg */

  /* Surface + text - Portrai warm-neutral ramp (was pure oklch greys) */
  --color-background: #ffffff;
  --color-foreground: #171717;              /* text-primary */
  --color-card: #ffffff;
  --color-popover: #ffffff;
  --color-popover-foreground: #171717;
  --color-secondary: #f7f7f7;               /* surface-muted */
  --color-muted: #f7f7f7;
  --color-muted-foreground: #525252;        /* text-secondary */
  --color-accent: #f7f7f7;
  --color-border: #e5e5e5;                  /* border-default */
  --color-input: #e5e5e5;
  --color-ring: #c4c9d0;                    /* benchmark non-me bars: neutral */

  /* Radius - Portrai scale 6/8/12/16 (was 6/8/10/14) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadow - Portrai */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);

  /* Type - Portrai: Inter for Latin, JetBrains Mono for code/genes */
  --font-sans: 'Inter', 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Portrai extras used below */
  --brand-soft: #6ec4ff;
  --surface-inverse: #071022;
}

:root[data-theme="dark"] {
  --color-background: #0a0a0a;
  --color-foreground: #fafafa;
  --color-card: #1e1e1e;
  --color-popover: #1e1e1e;
  --color-popover-foreground: #fafafa;
  --color-secondary: #171717;
  --color-muted: #171717;
  --color-muted-foreground: #a3a3a3;
  --color-accent: #262626;
  --color-border: #2a2a2a;
  --color-input: #2a2a2a;
  --color-ring: #3a3f46;
  --color-primary: #0d91e3;               /* brand fixed in both modes */
  --color-primary-foreground: #fafafa;
  --color-primary-subtle: #0c2236;        /* --brand-accent-bg dark */
}

/* ---- Topbar: Portrai header feel ------------------------------------- */
.topbar { height: 60px; }
.brand { font-weight: 700; letter-spacing: -0.01em; }
.brand span {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted-foreground);
}
.toc a { font-weight: 500; }

/* ---- Hero: Portrai dark band (navy #071022) + brand eyebrow ----------- */
.hero {
  background: var(--surface-inverse);
  --color-muted-foreground: rgb(255 255 255 / 0.75);   /* --text-inverse-dek */
}
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(7,16,34,0.82) 0%, rgba(7,16,34,0.5) 45%, rgba(7,16,34,0.15) 100%),
    linear-gradient(0deg, var(--surface-inverse) 0%, transparent 24%);
}
/* Portrai section eyebrow, injected without touching the markup */
.hero-inner::before {
  content: "Portrai / Tech Showcase";
  display: block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-soft);
  margin-bottom: 18px;
}
.hero h1 { letter-spacing: -0.035em; }
.hero-tag { font-weight: 600; }
.hero .btn.primary:hover { background: var(--color-primary-hover); }
.hero .btn.ghost { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.22); }
.hero .btn.ghost:hover { background: rgb(255 255 255 / 0.12); }

/* ---- Buttons: Portrai brand hover (solid, not opacity fade) ---------- */
.btn { font-weight: 500; }
.btn.primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn.primary:hover { background: var(--color-primary-hover); }

/* ---- Section headings: Portrai scale (bigger, bolder, tight) --------- */
.chapter { padding: 72px 0 16px; }
.chapter h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 12px; text-wrap: balance;
}
.intro { font-size: 1.0625rem; line-height: 1.6; color: var(--color-muted-foreground); }

/* ---- Cards + panels: Portrai radius-xl, subtle border, lift on hover -- */
.start-card, .panel, .convo { border-color: var(--color-border); }
.start-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.start-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.start-card h3 { font-weight: 700; letter-spacing: -0.01em; }
.start-card .go { font-weight: 600; }
.start-card .go::after { content: " \2192"; }

/* ---- Segmented controls: Portrai pill group ------------------------- */
.seg { border-radius: var(--radius-full, 9999px); padding: 4px; background: var(--color-muted); }
.seg button { border-radius: var(--radius-full, 9999px); font-weight: 500; }
.seg button.on { box-shadow: var(--shadow-sm); font-weight: 600; }

/* ---- "How it compares": Portrai Button group (Default + Outline) ----
   Selected = Default (solid brand blue); the rest = Outline (bordered).  */
#benchSeg { background: transparent; padding: 0; gap: 8px; }
#benchSeg button {
  border: 1px solid var(--color-border); background: var(--color-background);
  color: var(--color-foreground); border-radius: var(--radius-md);
  min-height: 38px; padding: 0 16px; font-weight: 500; box-shadow: none;
}
#benchSeg button:hover { background: var(--color-muted); color: var(--color-foreground); }
#benchSeg button.on {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-primary-foreground); box-shadow: none; font-weight: 600;
}
#benchSeg button.on:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* ---- Compare slider: dark stage so the tissue images read clearly ---- */
.compare { background: #0b1220; }
/* H&E + single-cell: faint-black stage behind the image (requested) */
#slideCompare, #scCompare { background: #16181d; }
/* H&E is an opaque tissue photo (white baked in), so a backdrop cannot show
   through - lift the pale tissue with a gentle contrast/saturation boost. */
#slideCompare .stage > img { filter: saturate(1.18) contrast(1.1); }

/* ---- Benchmark: brand bar for VGL row, neutral for the rest --------- */
.brow.me .bn { font-weight: 700; }
.brow .bt { border-radius: var(--radius-full, 9999px); }
.brow .bt i { border-radius: var(--radius-full, 9999px); }

/* ---- Gene chips / mono bits: Portrai mono + brand-tinted active ------ */
.chips button.on { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.genes span.hit { border-color: var(--color-primary); color: var(--color-primary); }

/* ---- Footer: Portrai spacing ---------------------------------------- */
.foot { margin-top: 64px; font-weight: 500; }
.foot a { font-weight: 600; }