/* ── LK Forge Physics suite — accent tints + interactive-sim UI ──────
   Base tokens, header, nav and footer come from shared.css. This file
   re-tints per page via body[data-tool] and styles the canvas "lab"
   chrome (stage, toolbar, sliders, readouts) shared by every sim and
   its /embed/ widget. Suite accent = electric indigo. */

/* Suite hub + per-tool accents */
body[data-tool="physics-hub"]     { --accent:#4f46e5; --accent-h:#4338ca; --accent-bg:#e0e7ff; --accent-fg:#3730a3; --ring:79,70,229; }
body[data-tool="game-of-life"]    { --accent:#16a34a; --accent-h:#15803d; --accent-bg:#dcfce7; --accent-fg:#166534; --ring:22,163,74; }
body[data-tool="orbit-simulator"] { --accent:#7c3aed; --accent-h:#6d28d9; --accent-bg:#ede9fe; --accent-fg:#5b21b6; --ring:124,58,237; }
body[data-tool="double-pendulum"] { --accent:#ea580c; --accent-h:#c2410c; --accent-bg:#ffedd5; --accent-fg:#9a3412; --ring:234,88,12; }
body[data-tool="simple-harmonic-motion"] { --accent:#2563eb; --accent-h:#1d4ed8; --accent-bg:#dbeafe; --accent-fg:#1e40af; --ring:37,99,235; }
body[data-tool="double-slit-experiment"] { --accent:#d946ef; --accent-h:#c026d3; --accent-bg:#fae8ff; --accent-fg:#a21caf; --ring:217,70,239; }
body[data-tool="wave-on-a-string"] { --accent:#e11d48; --accent-h:#be123c; --accent-bg:#ffe4e6; --accent-fg:#9f1239; --ring:225,29,72; }
body[data-tool="falling-sand"]    { --accent:#d97706; --accent-h:#b45309; --accent-bg:#fef3c7; --accent-fg:#92400e; --ring:217,119,6; }
body[data-tool="fluid-sim"]       { --accent:#0891b2; --accent-h:#0e7490; --accent-bg:#cffafe; --accent-fg:#155e75; --ring:8,145,178; }
body[data-tool="lorenz-attractor"] { --accent:#9333ea; --accent-h:#7e22ce; --accent-bg:#f3e8ff; --accent-fg:#6b21a8; --ring:147,51,234; }
body[data-tool="bifurcation-diagram"] { --accent:#0d9488; --accent-h:#0f766e; --accent-bg:#ccfbf1; --accent-fg:#115e59; --ring:13,148,136; }
body[data-tool="reaction-diffusion"] { --accent:#db2777; --accent-h:#be185d; --accent-bg:#fce7f3; --accent-fg:#9d174d; --ring:219,39,119; }
body[data-tool="charged-particle"] { --accent:#059669; --accent-h:#047857; --accent-bg:#d1fae5; --accent-fg:#065f46; --ring:5,150,105; }

/* ── Hero (tool pages) ───────────────────────────────────────────── */
.tool-hero { max-width: 940px; margin: 0 auto; padding: 36px 20px 4px; }
.tool-hero .hero-head { display: flex; align-items: center; gap: 16px; }
.tool-hero .hero-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: #0f0e1d; display: flex; align-items: center; justify-content: center; }
.tool-hero .hero-icon svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; }
.tool-hero .subtitle { color: var(--muted); font-size: 1.02rem; margin-top: 12px; max-width: 760px; }
.tool-hero .subtitle a { color: var(--accent); font-weight: 600; }
@media (max-width: 560px) { .tool-hero .hero-icon { width: 48px; height: 48px; } .tool-hero .hero-icon svg { width: 26px; height: 26px; } }

/* ── Hub grid (index landing cards) ──────────────────────────────── */
main { max-width: 940px; margin: 0 auto; padding: 8px 20px 0; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); gap: 18px; margin-top: 8px; }
.hub-card { display: block; text-decoration: none; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); transition: transform .18s, border-color .18s, box-shadow .18s; }
.hub-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); text-decoration: none; }
.hub-card .hub-icon { width: 48px; height: 48px; border-radius: 12px; background: #0f0e1d; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hub-card .hub-icon svg { width: 25px; height: 25px; stroke: var(--accent); fill: none; }
.hub-card h2 { font-size: 1.15rem; color: var(--text); margin-bottom: 6px; }
.hub-card p { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.hub-card .hub-open { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--accent); }
.hub-card .hub-tag { position: absolute; top: 18px; right: 18px; font-size: .72rem; font-weight: 700; color: var(--accent-fg); background: var(--accent-bg); padding: 2px 9px; border-radius: 999px; }
.hub-card .hub-tag-featured { position: absolute; top: 18px; left: 18px; right: auto; color: #fff; background: var(--accent); }
/* Per-card accents so each lab keeps its colour on the hub. */
.hub-card.t-life     { --accent:#16a34a; --accent-bg:#dcfce7; --accent-fg:#166534; }
.hub-card.t-orbit    { --accent:#7c3aed; --accent-bg:#ede9fe; --accent-fg:#5b21b6; }
.hub-card.t-pendulum { --accent:#ea580c; --accent-bg:#ffedd5; --accent-fg:#9a3412; }
.hub-card.t-shm      { --accent:#2563eb; --accent-bg:#dbeafe; --accent-fg:#1e40af; }
.hub-card.t-slit     { --accent:#d946ef; --accent-bg:#fae8ff; --accent-fg:#a21caf; }
.hub-card.t-string   { --accent:#e11d48; --accent-bg:#ffe4e6; --accent-fg:#9f1239; }
.hub-card.t-sand     { --accent:#d97706; --accent-bg:#fef3c7; --accent-fg:#92400e; }
.hub-card.t-fluid    { --accent:#0891b2; --accent-bg:#cffafe; --accent-fg:#155e75; }
.hub-card.t-lorenz   { --accent:#9333ea; --accent-bg:#f3e8ff; --accent-fg:#6b21a8; }
.hub-card.t-bifurc   { --accent:#0d9488; --accent-bg:#ccfbf1; --accent-fg:#115e59; }
.hub-card.t-reaction { --accent:#db2777; --accent-bg:#fce7f3; --accent-fg:#9d174d; }
.hub-card.t-charged  { --accent:#059669; --accent-bg:#d1fae5; --accent-fg:#065f46; }

/* ── Sections ────────────────────────────────────────────────────── */
.section { max-width: 940px; margin: 16px auto; padding: 20px; }
.section > h2 { margin-bottom: 6px; }
.steps { display: grid; gap: 14px; margin-top: 14px; }

/* ── Sim "lab" chrome (tool pages + embeds) ──────────────────────── */
.sim-wrap { max-width: 940px; margin: 20px auto 0; padding: 0 20px; }
.sim-stage {
  position: relative; background: #0a0a16; border: 1px solid #1e1f3a;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  touch-action: none;
}
.sim-canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.sim-hint { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; color: rgba(255,255,255,.6); font-family: var(--mono); pointer-events: none; background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 6px; }

.sim-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.sim-btn {
  min-height: 42px; padding: 9px 16px; font-family: inherit; font-size: .9rem; font-weight: 700;
  color: var(--text); background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.sim-btn:hover { border-color: var(--accent); color: var(--accent); }
.sim-btn:active { transform: scale(.97); }
.sim-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 120px; }
.sim-btn.primary:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.sim-btn[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-fg); }

.sim-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); }
.ctrl { display: flex; flex-direction: column; gap: 6px; }
.ctrl label { font-size: .8rem; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.ctrl label b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.ctrl input[type="range"] { width: 100%; accent-color: var(--accent); height: 22px; }
.ctrl select { min-height: 40px; padding: 8px 10px; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; }

.sim-readout { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.stat { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.stat .s-label { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.stat .s-val { display: block; font-family: var(--mono); font-size: 1.15rem; font-weight: 600; color: var(--text); margin-top: 3px; }

.tool-back { display: inline-flex; align-items: center; gap: 6px; max-width: 940px; margin: 18px auto 0; padding: 0 20px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.tool-back a { color: var(--accent); font-weight: 700; }

/* ── Preset callout / citable stat ───────────────────────────────── */
.key-callout { max-width: 940px; margin: 20px auto; padding: 18px 22px; background: var(--accent-bg); border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: var(--radius); color: var(--accent-fg); }
.key-callout strong { color: var(--accent-fg); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq { max-width: 940px; margin: 16px auto; padding: 0 20px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq summary { padding: 14px 18px; cursor: pointer; font-weight: 700; color: var(--text); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: '\2013'; }
.faq .faq-body { padding: 0 18px 16px; font-size: .92rem; color: var(--muted); line-height: 1.7; }
.faq .faq-body a { color: var(--accent); }

/* ── Embed-only trim ─────────────────────────────────────────────── */
body.lk-embed { background: transparent; }
body.lk-embed .sim-wrap { margin-top: 0; padding: 12px; }
body.lk-embed .embed-attrib { display: block; text-align: right; max-width: 940px; margin: 8px auto 4px; padding: 0 14px; font-size: .78rem; font-weight: 700; color: var(--muted); }

/* ── Two-nav: section dropdowns (top) + sticky rail (≥900). Every lab is a
   real <a href> in BOTH navs; CSS/JS only show/hide. Breakpoints: <680
   hamburger (existing mobile menu), 680–899 section dropdowns only,
   ≥900 dropdowns + left rail. ── */
.nav-group { position: relative; display: none; align-items: center; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: 7px 12px; border: 1.5px solid var(--border); border-radius: var(--radius);
  color: var(--text); background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, transform .1s;
}
.nav-group-btn .caret { font-size: .9em; transition: transform .18s; }
.nav-group-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.nav-group-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-group-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-group.is-current .nav-group-btn { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.nav-group-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 8px);
  flex-direction: column; gap: 2px; min-width: 210px; max-height: 76vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.14); z-index: 200;
}
.nav-group.open .nav-group-menu { display: flex; }
@media (hover: hover) { .nav-group:hover .nav-group-menu { display: flex; } }
.nav-group-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; text-decoration: none; }
.nav-group-menu a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.nav-group-menu a.active { background: var(--accent); color: #fff; }

.calc-layout { display: block; }
.calc-rail { display: none; }
.calc-content { min-width: 0; }
.rail-title { font-family: 'Orbitron', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 4px; }
.rail-group { margin-top: 8px; }
.rail-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.rail-link { display: block; padding: 8px 10px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.rail-link:hover { background: var(--surface2); text-decoration: none; }
.rail-link.active { background: var(--accent); color: #fff; }

@media (min-width: 680px) {
  .site-nav .nav-group { display: inline-flex; }
}
@media (min-width: 900px) {
  .calc-layout { display: flex; align-items: flex-start; }
  .calc-rail {
    display: block; position: sticky; top: 56px; align-self: flex-start;
    flex: 0 0 200px; width: 200px; height: calc(100vh - 56px); overflow-y: auto;
    background: var(--surface); padding: 16px 12px 32px; border-right: 1px solid var(--border);
  }
  .calc-rail::-webkit-scrollbar { width: 8px; }
  .calc-rail::-webkit-scrollbar-track { background: transparent; }
  .calc-rail::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, 0.35); border-radius: 999px; }
  .calc-content { flex: 1 1 auto; }
}