/* =====================================================================
   sim-future.css — Clean white-background simulator skin
   Simulator-page-only. Page chrome themed via body.sim-future; all
   simulator content themed under .sim-wrap. Load AFTER simulator.css.
   Clean, professional white design with brand accent colors.
   Respects prefers-reduced-motion; prints clean white for exam sheets.
   ===================================================================== */

body.sim-future {
  --fx-bg-0: #ffffff;
  --fx-bg-1: #f8f9fc;
  --fx-cyan: #2563eb;
  --fx-violet: #7c3aed;
  --fx-pink: #db2777;
  --fx-lime: #16a34a;
  --fx-amber: #d97706;
  --fx-ink: #1e293b;
  --fx-dim: #64748b;
  --fx-line: #e2e8f0;
  --fx-glass: #ffffff;
  --fx-glass-2: #f1f5f9;
  --fx-glow: 0 4px 24px -6px rgba(15,23,42,.08);

  color: var(--fx-ink);
  background: var(--fx-bg-1) !important;
  background-attachment: fixed !important;
}

/* ---------- page chrome: navbar + footer ---------- */
body.sim-future .navbar {
  background: rgba(255, 255, 255, .95) !important;
  border-bottom: 1px solid var(--fx-line) !important;
  backdrop-filter: blur(12px);
}
body.sim-future .navbar a,
body.sim-future .nav-links a { color: var(--fx-ink) !important; }
body.sim-future .navbar a:hover,
body.sim-future .nav-links a:hover { color: var(--fx-violet) !important; }
body.sim-future .site-footer {
  background: #0f172a !important;
  border-top: 1px solid var(--fx-line) !important;
  color: #94a3b8 !important;
}
body.sim-future .site-footer a { color: #94a3b8 !important; }
body.sim-future .site-footer a:hover { color: #fff !important; }
body.sim-future ::selection { background: rgba(124,58,237,.18); color: #1e293b; }

/* ---------- content wrap: clean white ---------- */
.sim-wrap {
  position: relative;
  background: transparent !important;
  font-feature-settings: "ss01" on;
}
/* Remove aurora + scanline overlays */
.sim-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: none;
  filter: none; animation: none;
}
.sim-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: none;
  mix-blend-mode: normal; opacity: 0;
}
.sim-wrap > * { position: relative; z-index: 1; }

/* ---------- headings / breadcrumb ---------- */
.sim-wrap .sim-top {
  background: #ffffff !important;
  border-bottom: 1px solid var(--fx-line) !important;
  backdrop-filter: none;
}
.sim-wrap .crumb, .sim-wrap .crumb a, .sim-wrap .muted { color: var(--fx-dim) !important; }
.sim-wrap .crumb a:hover { color: var(--fx-violet) !important; }
.sim-wrap h1, .sim-wrap h2, .sim-wrap h3 { color: var(--fx-ink); letter-spacing: .3px; }
.sim-wrap h1 {
  background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.sim-wrap .concept, .sim-wrap p, .sim-wrap li, .sim-wrap td, .sim-wrap label { color: var(--fx-ink); }

/* ---------- every panel/surface: clean white ---------- */
.sim-wrap .panel,
.sim-wrap .sim-about,
.sim-wrap .code-block,
.sim-wrap .out-block,
.sim-wrap .note-block,
.sim-wrap .howto,
.sim-wrap .mistakes,
.sim-wrap .exam-box,
.sim-wrap .viz,
.sim-wrap .steps-list li,
.sim-wrap .var-item,
.sim-wrap .preview-frame,
.sim-wrap .player-bar {
  background: #ffffff !important;
  border-color: var(--fx-line) !important;
  color: var(--fx-ink);
  box-shadow: var(--fx-glow);
  backdrop-filter: none;
}
.sim-wrap .panel { position: relative; overflow: hidden; border-radius: 16px; }
/* Accent top-bar on panels: subtle brand gradient */
.sim-wrap .panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan));
  opacity: .7;
  animation: none;
}
.sim-wrap .panel h2 .n { background: linear-gradient(120deg, var(--fx-violet), var(--fx-cyan)); color: #fff; }

/* "What you'll learn" + Simple Notes cards */
.sim-wrap .sim-about { border-radius: 14px; background: #f5f3ff !important; }
.sim-wrap .sim-about-label { color: var(--fx-violet) !important; }
.sim-wrap .note-def  { background: #eff6ff !important; color: #1d4ed8 !important; }
.sim-wrap .note-key  { background: #f0fdf4 !important; color: #166534 !important; }
.sim-wrap .note-warn { background: #fffbeb !important; color: #b45309 !important; }

/* badges */
.sim-wrap .badge-brand { background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan)); color: #fff; border: none; box-shadow: 0 4px 12px rgba(124,58,237,.25); }
.sim-wrap .badge-gray { background: #f1f5f9; color: var(--fx-ink); border: 1px solid var(--fx-line); }

/* ---------- form fields ---------- */
.sim-wrap .field label { color: var(--fx-dim); font-weight: 600; }
.sim-wrap .field input, .sim-wrap .field textarea, .sim-wrap .field select {
  background: #ffffff !important; color: var(--fx-ink) !important;
  border: 1px solid var(--fx-line) !important; border-radius: 12px;
  transition: border-color .18s, box-shadow .18s;
}
.sim-wrap .field input:focus, .sim-wrap .field textarea:focus, .sim-wrap .field select:focus {
  outline: none; border-color: var(--fx-violet) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.sim-wrap .help { color: var(--fx-dim); }

/* ---------- buttons ---------- */
.sim-wrap .btn { border-radius: 12px; border: 1px solid var(--fx-line); letter-spacing: .3px; transition: transform .12s, box-shadow .2s, filter .2s; }
.sim-wrap .btn:hover { transform: translateY(-1px); }
.sim-wrap .btn-primary, .sim-wrap .btn-success {
  background: linear-gradient(120deg, var(--fx-violet), var(--fx-cyan)) !important; color: #fff !important;
  border: none; font-weight: 700; box-shadow: 0 6px 20px rgba(124,58,237,.25);
}
.sim-wrap .btn-primary:hover, .sim-wrap .btn-success:hover { filter: brightness(1.06); box-shadow: 0 8px 28px rgba(124,58,237,.35); }
.sim-wrap .btn-dark, .sim-wrap .btn-light { background: #f8fafc !important; color: var(--fx-ink) !important; border: 1px solid var(--fx-line) !important; }
.sim-wrap .btn-dark:hover, .sim-wrap .btn-light:hover { background: #f1f5f9 !important; box-shadow: 0 4px 12px rgba(15,23,42,.08); }

/* ---------- step player ---------- */
.sim-wrap .pbtn { background: #f8fafc !important; border: 1px solid var(--fx-line) !important; color: var(--fx-ink); }
.sim-wrap .pbtn:hover { border-color: var(--fx-violet) !important; }
.sim-wrap .pbtn-main { background: linear-gradient(120deg, var(--fx-violet), var(--fx-cyan)) !important; color: #fff !important; border: none; box-shadow: 0 6px 18px rgba(124,58,237,.3); }
.sim-wrap .player-count { color: var(--fx-ink); }
.sim-wrap .player-track { background: #e2e8f0; }
.sim-wrap .player-track > span { background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan)); }

/* ---------- code / output ---------- */
.sim-wrap .code-block, .sim-wrap .out-block { background: #ffffff !important; }
.sim-wrap .ccode, .sim-wrap .pat { background: #1e293b !important; }
.sim-wrap pre, .sim-wrap .ccode, .sim-wrap code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;
}
.sim-wrap .out-block pre { color: #a7f3d0 !important; background: #0b1020 !important; }
.sim-wrap .code-block pre { color: #e2e8f0 !important; background: #1e293b !important; }
.sim-wrap .cap { background: #f8fafc !important; color: var(--fx-dim) !important; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; border-bottom-color: var(--fx-line) !important; }
.sim-wrap code { background: #f5f3ff; color: var(--fx-violet); border: 1px solid #e9e5f5; border-radius: 6px; padding: 1px 6px; }

/* ---------- variables / tags ---------- */
.sim-wrap .var-name { background: #f5f3ff !important; color: var(--fx-violet) !important; }
.sim-wrap .var-role { color: var(--fx-ink); }
.sim-wrap .kv .k { color: var(--fx-violet); font-weight: 700; }
.sim-wrap .tag-soft { background: #f5f3ff !important; color: var(--fx-violet) !important; border: 1px solid #e9e5f5 !important; }

/* ---------- tables / grids ---------- */
.sim-wrap .table, .sim-wrap table { border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden; border-radius: 12px; }
.sim-wrap .table th, .sim-wrap table th {
  background: #f8fafc !important; color: var(--fx-ink) !important;
  border-bottom: 1px solid var(--fx-line) !important; text-transform: uppercase; font-size: 12px; letter-spacing: 1px;
}
.sim-wrap .table td, .sim-wrap table td { color: var(--fx-ink) !important; border-bottom: 1px solid #f1f5f9 !important; background: #ffffff !important; }
.sim-wrap .table tr:hover td { background: #f8fafc !important; }

/* ---------- step list / mistakes / exam ---------- */
.sim-wrap .steps-list li { border-radius: 10px; }
.sim-wrap .steps-list li::before { background: linear-gradient(120deg, var(--fx-violet), var(--fx-cyan)) !important; color: #fff !important; }
.sim-wrap .steps-list li.step-row.active { box-shadow: 0 0 0 2px rgba(124,58,237,.3), 0 4px 16px rgba(124,58,237,.12) !important; background: #f5f3ff !important; }
.sim-wrap .mistakes { border-left: 3px solid var(--fx-pink) !important; }
.sim-wrap .mistakes li { color: var(--fx-ink); }
.sim-wrap .howto { border-left: 3px solid var(--fx-lime) !important; }
.sim-wrap .howto li { color: var(--fx-ink); }
.sim-wrap .howto code { background: #1e293b !important; color: #a7f3d0 !important; }
.sim-wrap .exam-box { border-left: 3px solid var(--fx-amber) !important; background: #fffbeb !important; white-space: pre-wrap; }
.sim-wrap .exam-box code { background: #1e293b !important; color: #a7f3d0 !important; }
.sim-wrap .viz-empty { color: var(--fx-dim); border-color: var(--fx-line) !important; }

/* =====================================================================
   FLOWCHART DIAGRAM  (.fx-flow) — the main visual for every Py/PHP sim
   ===================================================================== */
.fx-flow { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 4px 4px; }
.fx-node {
  position: relative; max-width: min(560px, 96%); width: max-content; min-width: 180px;
  text-align: center; padding: 12px 18px; border-radius: 14px;
  background: #ffffff; border: 1px solid var(--fx-line); color: var(--fx-ink);
  box-shadow: var(--fx-glow);
  font-size: 14px; line-height: 1.5;
}
.fx-node .fx-tx { display: inline; }
.fx-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px;
  border-radius: 7px; font-size: 12px; font-weight: 800; color: #fff; vertical-align: -4px;
  background: linear-gradient(120deg, var(--fx-violet), var(--fx-cyan));
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.fx-ic { margin-right: 6px; }

/* shapes */
.fx-start, .fx-end {
  border-radius: 999px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-size: 12px;
  min-width: 120px;
}
.fx-start { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.fx-end   { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.fx-step  { border-left: 3px solid var(--fx-cyan); }
.fx-out {
  border: 1px solid #fde68a; background: #fffbeb;
  box-shadow: var(--fx-glow);
  max-width: min(620px, 98%); width: auto; padding: 0; overflow: hidden;
}
.fx-out .fx-cap { display: block; text-align: left; padding: 6px 14px; font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--fx-amber); border-bottom: 1px solid var(--fx-line); }
.fx-out pre { margin: 0; padding: 12px 14px; text-align: left; color: #1e293b;
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; white-space: pre; overflow-x: auto; line-height: 1.55; }

/* connector with accent-colored downward arrow */
.fx-link { width: 2px; height: 26px; position: relative;
  background: linear-gradient(180deg, var(--fx-violet), var(--fx-cyan));
  box-shadow: none; }
.fx-link::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--fx-cyan);
  filter: none; }

.fx-node:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(124,58,237,.15); transition: transform .15s, box-shadow .2s; }

/* boxes / nodes / kv reused by some visuals */
.sim-wrap .box, .sim-wrap .node { background: #ffffff !important; border: 1px solid var(--fx-line) !important; color: var(--fx-ink) !important; box-shadow: var(--fx-glow); }
.sim-wrap .box.hit, .sim-wrap .node.active { border-color: var(--fx-violet) !important; box-shadow: 0 0 0 2px rgba(124,58,237,.2) !important; }
.sim-wrap .box .idx, .sim-wrap .idx { color: var(--fx-violet) !important; }

/* ---------- new extras: history / copy / nav / related ---------- */
.sim-wrap .hist-item { background: #ffffff !important; border-color: var(--fx-line) !important; }
.sim-wrap .hist-inp { color: var(--fx-dim) !important; }
.sim-wrap .hist-sum { color: var(--fx-lime) !important; }
.sim-wrap .sim-nav-prev, .sim-wrap .sim-nav-next { background: #ffffff !important; border-color: var(--fx-line) !important; }
.sim-wrap .sim-nav-prev:hover, .sim-wrap .sim-nav-next:hover { border-color: var(--fx-violet) !important; box-shadow: 0 4px 16px rgba(124,58,237,.12); }
.sim-wrap .sim-nav-arr { color: var(--fx-violet) !important; }
.sim-wrap .related-card { background: #f8fafc !important; border-color: var(--fx-line) !important; }
.sim-wrap .related-card:hover { background: #f5f3ff !important; border-color: var(--fx-violet) !important; }
.sim-wrap .related-code { color: var(--fx-violet) !important; }
.sim-wrap .exam-hidden-msg { background: #fffbeb !important; }
.sim-wrap [data-tooltip]::after { background: #0f172a; }

/* ---------- accessibility / print ---------- */
@media (prefers-reduced-motion: reduce) {
  .sim-wrap::before, .sim-wrap .panel::before, .fx-link { animation: none; }
}
@media print {
  body.sim-future { background: #fff !important; color: #000 !important; }
  .sim-wrap::before, .sim-wrap::after { display: none !important; }
  .sim-wrap h1 { -webkit-text-fill-color: #000; color: #000; }
  .sim-wrap .panel, .sim-wrap .out-block, .sim-wrap .code-block, .sim-wrap .exam-box, .sim-wrap .viz,
  .sim-wrap .steps-list li, .sim-wrap .var-item, .fx-node, .fx-out {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
    border: 1px solid #ccc !important; backdrop-filter: none !important;
  }
  .sim-wrap pre, .sim-wrap .out-block pre, .sim-wrap code, .fx-out pre { color: #000 !important; }
  .fx-link { background: #888 !important; }
}