/* =============================================================================
   PRISM THEME — the shared look of the site's public pages (theme.css).
   A page opts in with <html class="prism-theme"> plus
   {% include 'partials/theme_head.html' %} in <head> and
   {% include 'partials/ambient.html' %} right after <body>.

   Deep slate that's easy on the eyes, a slow ambient glow behind everything,
   solid surfaces a step lighter than the page, one accent colour, IBM Plex
   type, plain two-tone headings. Motion stays on the landing page; here the
   light is the only thing that moves.

   Pages built on landing.css (lp-* classes) pick most of this up through the
   --lp-* tokens; other pages use the --pt-* tokens below.
============================================================================= */
.prism-theme {
  /* page */
  --pt-bg: #0e1626;
  --pt-surface: #141e31;
  --pt-surface-2: #19253b;
  --pt-border: rgba(255,255,255,0.08);
  --pt-border-strong: rgba(255,255,255,0.14);
  /* text */
  --pt-text: #e8edf5;
  --pt-text-2: #b8c4d6;
  --pt-text-3: #8a9ab3;
  /* accent and states */
  --pt-accent: #5cc8f2;
  --pt-primary: #3b82f6;
  --pt-primary-hover: #2563eb;
  --pt-good: #34d399;
  --pt-warn: #fbbf24;
  --pt-bad: #f87171;
  --pt-radius: 12px;
  --pt-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pt-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* the same values for pages built on landing.css */
  --lp-bg: var(--pt-bg);
  --lp-surface: var(--pt-surface);
  --lp-surface-2: var(--pt-surface-2);
  --lp-border-dim: var(--pt-border);
  --lp-border: rgba(255,255,255,0.1);
  --lp-accent: var(--pt-accent);
  --lp-mono: var(--pt-mono);

  background: var(--pt-bg);
}
.prism-theme body {
  background: transparent !important;
  font-family: var(--pt-font);
  color: var(--pt-text);
}

/* ─── Headings: two solid tones, never gradient text ────────────────────────── */
.prism-theme .lp-h1-accent,
.prism-theme .lp-h2-accent {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
.prism-theme .lp-h1-accent { color: var(--pt-accent); }
.prism-theme .lp-h2-accent { color: var(--pt-text-3); }

/* ─── Buttons: colour change on hover, no glow, no lift ─────────────────────── */
.prism-theme .lp-btn-primary { box-shadow: none; }
.prism-theme .lp-btn-primary:hover { background: var(--pt-primary-hover); box-shadow: none; transform: none; }
.prism-theme .lp-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: var(--pt-text); }

/* ─── Navbar and footer ─────────────────────────────────────────────────────── */
.prism-theme .an-toolbar {
  background: var(--pt-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.prism-theme .landing-footer { background: #0b1220; }
.prism-theme main { position: relative; z-index: 0; }

/* ─── Ambient light: slow glows behind every section ────────────────────────── */
.lp-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--pt-bg, #0e1626);
}
.lp-ambient i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
  translate: 0 var(--sy, 0px);
  will-change: transform;
}
.lp-ambient i:nth-child(1) {
  width: 46vw; height: 46vw; left: -12vw; top: 8vh;
  background: radial-gradient(circle, #1d4ed8, transparent 65%);
  animation: lp-drift-a 32s ease-in-out infinite alternate;
}
.lp-ambient i:nth-child(2) {
  width: 40vw; height: 40vw; right: -10vw; top: 38vh;
  background: radial-gradient(circle, #0e7490, transparent 65%);
  opacity: 0.42;
  animation: lp-drift-b 38s ease-in-out infinite alternate;
}
.lp-ambient i:nth-child(3) {
  width: 30vw; height: 30vw; left: 35vw; bottom: -12vh;
  background: radial-gradient(circle, #0f766e, transparent 65%);
  opacity: 0.35;
  animation: lp-drift-c 44s ease-in-out infinite alternate;
}
/* Calm variant for reading-heavy pages: dimmer, no drift */
.lp-ambient--calm i { opacity: 0.35 !important; animation: none !important; }
@keyframes lp-drift-a { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes lp-drift-b { to { transform: translate(-16vw, -18vh) scale(0.9); } }
@keyframes lp-drift-c { to { transform: translate(-14vw, -26vh) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .lp-ambient i { animation: none; } }

/* ─── Shared building blocks for pages not built on landing.css ─────────────── */
.prism-theme .pt-card {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
}
.prism-theme ::selection { background: rgba(92,200,242,0.3); }

/* ─── Guide pages (/system-design/*, interview prep) on the theme ───────────── */
.prism-theme .seo-main {
  /* the ambient layer is the backdrop now; keep only the faint grid */
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
.prism-theme .seo-article h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--pt-text);
  font-weight: 700;
}
.prism-theme .seo-article h2,
.prism-theme .seo-article strong,
.prism-theme .seo-card-title,
.prism-theme .seo-stat-strip strong { color: var(--pt-text); }
.prism-theme .seo-article,
.prism-theme .seo-lede { color: var(--pt-text-2); }
.prism-theme .seo-toc,
.prism-theme .seo-component,
.prism-theme .seo-insight-card,
.prism-theme .seo-card a,
.prism-theme .seo-quiz,
.prism-theme .seo-table {
  background: var(--pt-surface) !important;
  border-color: var(--pt-border) !important;
}
.prism-theme .seo-component:hover,
.prism-theme .seo-insight-card:hover,
.prism-theme .seo-card a:hover { border-color: rgba(92,200,242,0.45) !important; }

/* Guide pages: no pill above the headline, no numbered circles, no boxed TOC */
.prism-theme .seo-eyebrow {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-family: var(--pt-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--pt-accent);
}
.prism-theme .seo-eyebrow::before { display: none; }
.prism-theme .seo-article h1 { letter-spacing: -0.025em; margin-top: 0.3rem; }
.prism-theme .seo-toc {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--pt-border) !important;
  border-bottom: 1px solid var(--pt-border) !important;
  border-radius: 0;
  padding: 1rem 0;
}
.prism-theme .seo-toc .seo-label,
.prism-theme .seo-toc > p:first-child,
.prism-theme .seo-toc > strong:first-child {
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--pt-text-3);
}
.prism-theme .seo-toc a { color: var(--pt-text-2); text-decoration: none; }
.prism-theme .seo-toc a:hover { color: var(--pt-accent); }
.prism-theme .seo-insight-badge {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--pt-mono);
  font-size: var(--t-small);
  color: var(--pt-accent) !important;
}
.prism-theme .seo-card-icon { display: none; }
.prism-theme .seo-article p a,
.prism-theme .seo-article li a {
  color: var(--pt-text);
  text-decoration-color: rgba(92,200,242,0.45);
  text-underline-offset: 3px;
}
.prism-theme .seo-article p a:hover,
.prism-theme .seo-article li a:hover { color: var(--pt-accent); }

/* ─── App-shell pages (pricing, profile, my evaluations) ────────────────────── */
/* They scroll inside their own container, which painted its own background
   over the ambient light. */
.prism-theme body.page-pricing,
.prism-theme body.page-profile,
.prism-theme body.page-evaluations,
.prism-theme .pricing-scroll,
.prism-theme .profile-scroll,
.prism-theme .evals-scroll,
.prism-theme .pricing-shell,
.prism-theme .profile-shell,
.prism-theme .evals-shell { background: transparent !important; }
.prism-theme .an-avatar { background: var(--pt-surface-2); color: var(--pt-accent); border-color: rgba(92,200,242,0.4); }
.prism-theme .an-avatar:hover { border-color: var(--pt-accent); box-shadow: 0 0 0 3px rgba(92,200,242,0.15); transform: none; }

/* Pricing */
.prism-theme .pr-hero-eyebrow { font-family: var(--pt-mono); font-size: var(--t-small); color: var(--pt-accent); }
.prism-theme .pr-hero-eyebrow svg { display: none; }
.prism-theme .pr-hero-title { letter-spacing: -0.025em; }
.prism-theme .pr-hero-title .accent { color: var(--pt-accent); }
.prism-theme .pr-dur-btn.active { background: var(--pt-primary); }
.prism-theme .pr-dur-badge { color: var(--pt-accent); background: rgba(92,200,242,0.12); }
.prism-theme .pr-beta-banner-inner { background: var(--pt-surface); border-color: var(--pt-border-strong); }
.prism-theme .pr-card,
.prism-theme .pr-pillar {
  background: var(--pt-surface);
  border-color: var(--pt-border);
  backdrop-filter: none;
  box-shadow: none;
}
.prism-theme .pr-card:hover { box-shadow: none; border-color: var(--pt-border-strong); }
.prism-theme .pr-card--pe { background: var(--pt-surface); border-color: rgba(92,200,242,0.4); box-shadow: 0 0 0 1px rgba(92,200,242,0.12); }
.prism-theme .pr-card--pe:hover { border-color: rgba(92,200,242,0.6); }
.prism-theme .pr-card-tier { letter-spacing: 0.04em; }
.prism-theme .pr-card--pe .pr-card-tier { color: var(--pt-accent); }
.prism-theme .pr-card-cta--primary { background: var(--pt-primary); box-shadow: none; }
.prism-theme .pr-card-cta--primary:hover { background: var(--pt-primary-hover); }
.prism-theme .pr-pillar-icon { display: none; }
.prism-theme .pr-feature-list li.dim { color: var(--pt-text-3); }
.prism-theme .pr-feat-icon--dim { color: #3b4a63; }
.prism-theme .pr-footer-cta-box {
  background: var(--pt-surface);
  border: 1px solid rgba(92,200,242,0.3);
  box-shadow: none;
}

/* Profile */
.prism-theme .page-profile .profile-content,
.prism-theme .page-profile .prof-modal {
  --pf-surface: var(--pt-surface);
  --pf-line: var(--pt-border);
  --pf-accent: var(--pt-accent);
  --pf-text: var(--pt-text-2);
  font-family: var(--pt-font);
}
.prism-theme .page-profile .prof-link,
.prism-theme .page-profile .prof-empty a,
.prism-theme .page-profile .prof-continue-phase { color: var(--pt-accent); }
.prism-theme .page-profile .prof-link:hover { color: #9be0f8; }
.prism-theme .page-profile .prof-bar-fill { background: var(--pt-accent); }
.prism-theme .page-profile .prof-avatar { background: var(--pt-surface-2); color: var(--pt-accent); box-shadow: inset 0 0 0 2px rgba(92,200,242,0.35); }
.prism-theme .page-profile .prof-edit-btn:hover,
.prism-theme .page-profile a.prof-stat:hover { border-color: rgba(92,200,242,0.45); }
.prism-theme .page-profile .prof-btn-primary { background: var(--pt-primary); }
.prism-theme .page-profile .prof-btn-primary:hover { background: var(--pt-primary-hover); }
.prism-theme .page-profile .prof-day.is-active .prof-day-dot { background: var(--pt-accent); border-color: var(--pt-accent); }
.prism-theme .page-profile .prof-day.is-today .prof-day-dot { box-shadow: 0 0 0 2px rgba(92,200,242,0.45); }
.prism-theme .page-profile .prof-recent-row:hover { background: rgba(92,200,242,0.05); }
/* the number carries each stat; no icon tile above it */
.prism-theme .page-profile .prof-stat-icon { display: none; }

/* My evaluations */
.prism-theme body.page-evaluations {
  --ev-surface: var(--pt-surface);
  --ev-surface-hover: var(--pt-surface-2);
  --ev-line: var(--pt-border);
  --ev-accent: var(--pt-accent);
  font-family: var(--pt-font);
}
.prism-theme .page-evaluations .evals-list .eval-card:hover { background: rgba(92,200,242,0.05); }
.prism-theme .page-evaluations .evals-list .eval-card:hover .eval-row-open { color: var(--pt-accent); }
.prism-theme .page-evaluations .evals-page-num.active { background: var(--pt-primary); border-color: var(--pt-primary); }
.prism-theme .page-evaluations .evals-sort-select:focus,
.prism-theme .page-evaluations .psel-btn:focus-visible { box-shadow: 0 0 0 3px rgba(92,200,242,0.25); }
.prism-theme .page-evaluations .psel-btn:hover { border-color: rgba(92,200,242,0.5); }
.prism-theme .page-evaluations .psel-opt.is-active { background: rgba(92,200,242,0.12); }
.prism-theme .page-evaluations .psel-opt.is-selected,
.prism-theme .page-evaluations .psel-opt svg { color: var(--pt-accent); }
.prism-theme .seo-insight-card { display: block !important; }
.prism-theme .seo-insight-badge { display: block !important; margin: 0 0 0.35rem !important; }

/* =============================================================================
   GUIDE PAGE GRAPHICS (templates/seo/_viz.html) — informative SVGs with light
   motion: interview clock + sketch, rubric radar, 45-minute timeline, 4-week
   plan, difficulty meters, roadmap phase track.
============================================================================= */
.sv { margin: 0; }
.sv svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv text { font-family: var(--pt-font); }
.sv .sv-mono, .sv .sv-lbl { font-family: var(--pt-mono); }
.sv .sv-lbl { font-size: 10px; fill: var(--pt-text); text-anchor: middle; }
.sv .sv-dim { fill: var(--pt-text-3); font-size: 10px; }
.sv figcaption { margin-top: 0.6rem; font-size: var(--t-small); color: var(--pt-text-3); text-align: center; }

/* Hero split: copy left, graphic right */
.prism-theme .seo-hero--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.sv-hero { filter: drop-shadow(0 30px 60px rgba(2,6,23,0.5)); }
.sv-board { fill: var(--pt-surface); stroke: var(--pt-border-strong); }
.sv-q { fill: var(--pt-text-2); font-size: 14px; font-style: italic; }
.sv-hero .n { fill: #1b2740; stroke: rgba(92,200,242,0.7); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: sv-pop 9s ease-in-out infinite; }
.sv-hero .n.db { stroke: #fb923c; }
.sv-hero .n1 { animation-delay: 0.2s; } .sv-hero .n2 { animation-delay: 0.6s; } .sv-hero .n3 { animation-delay: 1s; } .sv-hero .n4 { animation-delay: 1.2s; } .sv-hero .n5 { animation-delay: 1.6s; }
.sv-hero .w { fill: none; stroke: rgba(92,200,242,0.55); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sv-draw 9s ease-in-out infinite; }
.sv-hero .w1 { animation-delay: 0.5s; } .sv-hero .w2, .sv-hero .w3 { animation-delay: 0.9s; } .sv-hero .w4, .sv-hero .w5 { animation-delay: 1.4s; }
.sv-hero .req { fill: #e0f7ff; filter: drop-shadow(0 0 4px #5cc8f2); }
.sv-clock .trk { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.sv-clock .arc { fill: none; stroke: var(--pt-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; transform: rotate(-90deg); transform-origin: 362px 56px; animation: sv-clock 9s linear infinite; }
.sv-clock text { fill: var(--pt-text); font-size: 12px; }
@keyframes sv-pop { 0% { transform: scale(0.4); opacity: 0; } 8%, 88% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes sv-draw { 0%, 6% { stroke-dashoffset: 1; } 20%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sv-clock { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }

/* Hub hero */
.sv-hub .hn rect { fill: #1b2740; stroke: rgba(92,200,242,0.6); stroke-width: 1.4; }
.sv-hub .hn:nth-child(n+11) rect { stroke: rgba(92,200,242,0.6); }
.sv-hub .w { fill: none; stroke: rgba(92,200,242,0.4); stroke-width: 1.5; }
.sv-hub .hn { animation: sv-breathe 4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.4s); }
.sv-hub .req-q { fill: #fbbf24; filter: drop-shadow(0 0 4px #fbbf24); }
@keyframes sv-breathe { 50% { opacity: 0.75; } }

/* Rubric radar beside the cards */
.prism-theme .seo-split { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr); gap: 2rem; align-items: center; }
.prism-theme .seo-insight-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sv-radar .rg { fill: none; stroke: rgba(255,255,255,0.08); }
.sv-radar .rl { fill: var(--pt-text-2); font-size: 11px; }
.sv-radar .rv { fill: rgba(92,200,242,0.18); stroke: var(--pt-accent); stroke-width: 2; transform-origin: 160px 150px; animation: sv-grow 1.4s cubic-bezier(.2,.8,.2,1) both; }
.sv-radar .rp { fill: var(--pt-accent); }
@keyframes sv-grow { from { transform: scale(0.2); opacity: 0; } }

/* 45-minute timeline */
.sv-timeline { margin: 1.5rem 0 2rem; }
.sv-timeline .seg rect { fill: rgba(92,200,242,calc(0.12 + var(--i) * 0.05)); stroke: rgba(92,200,242,0.45); }
.sv-timeline .seg:nth-child(5) rect { fill: rgba(251,191,36,0.2); stroke: rgba(251,191,36,0.6); }
.sv-timeline .sn { fill: var(--pt-accent); font-family: var(--pt-mono); font-size: 12px; }
.sv-timeline .st { fill: var(--pt-text); font-size: 12px; font-weight: 600; }
.sv-timeline .sm { fill: var(--pt-text-3); font-family: var(--pt-mono); font-size: 11px; }
.sv-timeline .tr { stroke: rgba(52,211,153,0.6); stroke-dasharray: 3 5; }
.sv-timeline .tl { fill: #34d399; font-size: 11px; font-family: var(--pt-mono); }
.sv-timeline .now { fill: #fff; filter: drop-shadow(0 0 6px #5cc8f2); animation: sv-sweep 12s linear infinite; }
@keyframes sv-sweep { from { transform: translateX(0); } to { transform: translateX(897px); } }

/* 4-week plan */
.sv-plan { margin: 1rem 0 1.5rem; }
.sv-plan .pl { fill: none; stroke: var(--pt-accent); stroke-width: 2.5; stroke-linecap: round; }
.sv-plan .pl-glow { fill: none; stroke: var(--pt-accent); stroke-width: 10; opacity: 0.15; filter: blur(5px); }
.sv-plan .pl-pulse { fill: #e0f7ff; filter: drop-shadow(0 0 8px #5cc8f2); }
.sv-plan .pn { fill: var(--pt-bg); stroke: var(--pt-accent); stroke-width: 2.5; }
.sv-plan .pw { fill: var(--pt-accent); font-family: var(--pt-mono); font-size: 12px; }
.sv-plan .pt { fill: var(--pt-text); font-size: 13px; font-weight: 600; }

/* Difficulty meter on question cards */
.sv-diff { display: inline-flex; align-items: center; gap: 3px; margin-top: 0.6rem; }
.sv-diff i { width: 14px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.sv-diff em { margin-left: 0.5rem; font-style: normal; font-family: var(--pt-mono); font-size: var(--t-caption); color: var(--pt-text-3); }
.sv-diff--1 i:nth-child(-n+1) { background: #34d399; }
.sv-diff--2 i:nth-child(-n+2) { background: #fbbf24; }
.sv-diff--3 i:nth-child(-n+3) { background: #f87171; }

/* Roadmap phase track on concept pages */
.sv-phases ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; margin: 1.4rem 0 0; padding: 0; counter-reset: ph; }
.sv-phases li { position: relative; padding-top: 1.1rem; font-size: var(--t-caption); color: var(--pt-text-3); counter-increment: ph; }
.sv-phases li::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.1); }
.sv-phases li.is-done::before, .sv-phases li.is-here::before { background: var(--pt-accent); }
.sv-phases li i { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--pt-bg); border: 2px solid rgba(255,255,255,0.2); }
.sv-phases li.is-done i { border-color: var(--pt-accent); background: var(--pt-accent); }
.sv-phases li.is-here i { border-color: var(--pt-accent); box-shadow: 0 0 0 4px rgba(92,200,242,0.2); animation: sv-here 2s ease-in-out infinite; }
.sv-phases li span { display: block; padding-right: 0.8rem; }
.sv-phases li.is-here span { color: var(--pt-text); font-weight: 600; }
.sv-phases li b { display: block; margin-top: 0.2rem; font-family: var(--pt-mono); font-weight: 500; color: var(--pt-accent); }
@keyframes sv-here { 50% { box-shadow: 0 0 0 7px rgba(92,200,242,0.08); } }

@media (max-width: 900px) {
  .prism-theme .seo-hero--split, .prism-theme .seo-split { grid-template-columns: 1fr; }
  .prism-theme .seo-insight-grid--2 { grid-template-columns: 1fr !important; }
  .sv-timeline .st { font-size: 15px; } .sv-timeline .sm { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv-phases li i { animation: none !important; }
  .sv-hero .w { stroke-dashoffset: 0; }
}
.sv-hub { transform: scale(1.12); transform-origin: center; }
.sv-hub .sv-lbl { font-size: 11px; }

/* Logo: the bright logo on dark, the deeper prism_dark_logo on light */
html:not([data-theme="light"]) .logo-on-light { display: none !important; }
html[data-theme="light"] .logo-on-dark { display: none !important; }