/* ── 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; }
/* Chemistry cluster (seeded 2026-09-06 — analytical-chem models) */
body[data-tool="chemistry-hub"]   { --accent:#0d9488; --accent-h:#0f766e; --accent-bg:#ccfbf1; --accent-fg:#115e59; --ring:13,148,136; }
body[data-tool="beers-law"]       { --accent:#7c3aed; --accent-h:#6d28d9; --accent-bg:#ede9fe; --accent-fg:#5b21b6; --ring:124,58,237; }
body[data-tool="photometric-error"] { --accent:#0891b2; --accent-h:#0e7490; --accent-bg:#cffafe; --accent-fg:#155e75; --ring:8,145,178; }
body[data-tool="calibration-methods"] { --accent:#d97706; --accent-h:#b45309; --accent-bg:#fef3c7; --accent-fg:#92400e; --ring:217,119,6; }
body[data-tool="transmission-fitting"] { --accent:#16a34a; --accent-h:#15803d; --accent-bg:#dcfce7; --accent-fg:#166534; --ring:22,163,74; }
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="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; }
body[data-tool="photoelectric-effect"] { --accent:#eab308; --accent-h:#ca8a04; --accent-bg:#fef9c3; --accent-fg:#854d0e; --ring:234,179,8; }
body[data-tool="free-body-diagram"] { --accent:#dc2626; --accent-h:#b91c1c; --accent-bg:#fee2e2; --accent-fg:#991b1b; --ring:220,38,38; }
body[data-tool="bohr-model"] { --accent:#4338ca; --accent-h:#3730a3; --accent-bg:#e0e7ff; --accent-fg:#312e81; --ring:67,56,202; }
body[data-tool="ideal-gas"] { --accent:#c026d3; --accent-h:#a21caf; --accent-bg:#fae8ff; --accent-fg:#86198f; --ring:192,38,211; }
body[data-tool="doppler-effect"] { --accent:#0ea5e9; --accent-h:#0284c7; --accent-bg:#e0f2fe; --accent-fg:#075985; --ring:14,165,233; }
body[data-tool="refraction"] { --accent:#06b6d4; --accent-h:#0891b2; --accent-bg:#cffafe; --accent-fg:#155e75; --ring:6,182,212; }
body[data-tool="electromagnetic-induction"] { --accent:#65a30d; --accent-h:#4d7c0f; --accent-bg:#ecfccb; --accent-fg:#3f6212; --ring:101,163,13; }
body[data-tool="radioactive-decay"] { --accent:#f97316; --accent-h:#c2410c; --accent-bg:#ffedd5; --accent-fg:#9a3412; --ring:249,115,22; }
body[data-tool="quantum-tunneling"] { --accent:#8b5cf6; --accent-h:#7c3aed; --accent-bg:#ede9fe; --accent-fg:#6d28d9; --ring:139,92,246; }
body[data-tool="carnot-cycle"] { --accent:#b45309; --accent-h:#92400e; --accent-bg:#fef3c7; --accent-fg:#78350f; --ring:180,83,9; }
body[data-tool="buoyancy"] { --accent:#14b8a6; --accent-h:#0d9488; --accent-bg:#ccfbf1; --accent-fg:#115e59; --ring:20,184,166; }
body[data-tool="inclined-plane"] { --accent:#475569; --accent-h:#334155; --accent-bg:#e2e8f0; --accent-fg:#1e293b; --ring:71,85,105; }
body[data-tool="engine-simulator"] { --accent:#c2410c; --accent-h:#9a3412; --accent-bg:#ffedd5; --accent-fg:#7c2d12; --ring:194,65,12; }
body[data-tool="centripetal-force"] { --accent:#be123c; --accent-h:#9f1239; --accent-bg:#ffe4e6; --accent-fg:#881337; --ring:190,18,60; }
body[data-tool="torque"] { --accent:#0369a1; --accent-h:#075985; --accent-bg:#e0f2fe; --accent-fg:#0c4a6e; --ring:3,105,161; }
body[data-tool="hookes-law"] { --accent:#15803d; --accent-h:#166534; --accent-bg:#dcfce7; --accent-fg:#14532d; --ring:21,128,61; }
body[data-tool="coulombs-law"] { --accent:#a21caf; --accent-h:#86198f; --accent-bg:#fae8ff; --accent-fg:#701a75; --ring:162,28,175; }
body[data-tool="circuit-simulator"] { --accent:#ca8a04; --accent-h:#a16207; --accent-bg:#fef9c3; --accent-fg:#713f12; --ring:202,138,4; }
body[data-tool="rc-circuit"] { --accent:#1d4ed8; --accent-h:#1e40af; --accent-bg:#dbeafe; --accent-fg:#1e3a8a; --ring:29,78,216; }
body[data-tool="logic-gate-simulator"] { --accent:#0e7490; --accent-h:#155e75; --accent-bg:#cffafe; --accent-fg:#164e63; --ring:14,116,144; }
body[data-tool="black-hole"] { --accent:#6366f1; --accent-h:#4f46e5; --accent-bg:#e0e7ff; --accent-fg:#3730a3; --ring:99,102,241; }

/* ── Keyboard focus ring (WCAG 2.4.7) ────────────────────────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
.hub-card:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(var(--ring, 79,70,229), .6);
  outline-offset: 2px;
}

/* ── 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-section { margin-top: 38px; }
.hub-section:first-child { margin-top: 4px; }
.hub-section-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text); margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); letter-spacing: .4px; }
.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-fg); }
.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-h); }
/* Per-card accents so each lab keeps its colour on the hub. */
.hub-card.t-life     { --accent:#16a34a; --accent-h:#15803d; --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-simplependulum { --accent:#d97706; --accent-bg:#fef3c7; --accent-fg:#92400e; }
.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-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; }
.hub-card.t-collider { --accent:#7c3aed; --accent-bg:#ede9fe; --accent-fg:#5b21b6; }
.hub-card.t-projectile { --accent:#f59e0b; --accent-bg:#fef3c7; --accent-fg:#b45309; }
.hub-card.t-collision  { --accent:#4f46e5; --accent-bg:#e0e7ff; --accent-fg:#3730a3; }
.hub-card.t-efield     { --accent:#0284c7; --accent-bg:#e0f2fe; --accent-fg:#075985; }
.hub-card.t-photoelectric { --accent:#eab308; --accent-bg:#fef9c3; --accent-fg:#854d0e; }
.hub-card.t-freebody { --accent:#dc2626; --accent-bg:#fee2e2; --accent-fg:#991b1b; }
.hub-card.t-bohr { --accent:#4338ca; --accent-bg:#e0e7ff; --accent-fg:#312e81; }
.hub-card.t-idealgas { --accent:#c026d3; --accent-bg:#fae8ff; --accent-fg:#86198f; }
.hub-card.t-doppler { --accent:#0ea5e9; --accent-bg:#e0f2fe; --accent-fg:#075985; }
.hub-card.t-refraction { --accent:#06b6d4; --accent-bg:#cffafe; --accent-fg:#155e75; }
.hub-card.t-induction { --accent:#65a30d; --accent-bg:#ecfccb; --accent-fg:#3f6212; }
.hub-card.t-decay { --accent:#f97316; --accent-bg:#ffedd5; --accent-fg:#9a3412; }
.hub-card.t-tunneling { --accent:#8b5cf6; --accent-bg:#ede9fe; --accent-fg:#6d28d9; }
.hub-card.t-carnot { --accent:#b45309; --accent-bg:#fef3c7; --accent-fg:#78350f; }
.hub-card.t-buoyancy { --accent:#14b8a6; --accent-bg:#ccfbf1; --accent-fg:#115e59; }
.hub-card.t-engine { --accent:#c2410c; --accent-bg:#ffedd5; --accent-fg:#7c2d12; }
.hub-card.t-centripetal { --accent:#be123c; --accent-bg:#ffe4e6; --accent-fg:#881337; }
.hub-card.t-torque { --accent:#0369a1; --accent-bg:#e0f2fe; --accent-fg:#0c4a6e; }
.hub-card.t-hooke { --accent:#15803d; --accent-bg:#dcfce7; --accent-fg:#14532d; }
.hub-card.t-coulomb { --accent:#a21caf; --accent-bg:#fae8ff; --accent-fg:#701a75; }
.hub-card.t-circuit { --accent:#ca8a04; --accent-bg:#fef9c3; --accent-fg:#713f12; }
.hub-card.t-rccircuit { --accent:#1d4ed8; --accent-bg:#dbeafe; --accent-fg:#1e3a8a; }
.hub-card.t-logic { --accent:#0e7490; --accent-bg:#cffafe; --accent-fg:#164e63; }
.hub-card.t-incline { --accent:#475569; --accent-bg:#e2e8f0; --accent-fg:#1e293b; }
.hub-card.t-blackhole { --accent:#6366f1; --accent-bg:#e0e7ff; --accent-fg:#3730a3; }
.hub-card.t-beerslaw { --accent:#7c3aed; --accent-bg:#ede9fe; --accent-fg:#5b21b6; }
.hub-card.t-photometric { --accent:#0891b2; --accent-bg:#cffafe; --accent-fg:#155e75; }
.hub-card.t-calibration { --accent:#d97706; --accent-bg:#fef3c7; --accent-fg:#92400e; }
.hub-card.t-tfit { --accent:#16a34a; --accent-bg:#dcfce7; --accent-fg:#166534; }

/* ── 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-control, #7a7fb5); 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: 1000px) {
  .site-nav .nav-group { display: inline-flex; }
}
@media (max-width: 999.98px) {
  .site-header .nav-hamburger { display: flex !important; min-height: 44px; }
  .site-header .site-nav .nav-link, .site-nav .nav-group { display: none !important; }
  .nav-mobile-menu.open { display: flex !important; }
}
@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; }
}