/* ============================================================
   internal/css/rail.css — shared layer for internal pages that
   mount the CXNav left rail (the standalone Testing/Tools pages).
   Provides the design tokens (some of these pages don't load
   grid-system.css, where the :root normally lives) + the layout
   offset for the fixed sidebar. The pricing page (index.html)
   has its own inline equivalent.
   ============================================================ */

:root {
  --bg: #faf6ee; --bg-elev: #ede2cc; --bg-elev-2: #e0d3b6;
  --border: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.18);
  --text: #1a1611; --text-muted: #4a4234; --text-dim: #807766;
  --coral: #ff575f; --coral-hover: #ff3d47; --coral-soft: rgba(255,87,95,0.12);
  --green: #22a06b; --amber: #c2860a; --red: #d6403a; --blue: #2563eb;
  --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(0.22,1,0.36,1);
  --sidebar-w: 240px; --sidebar-rail: 56px;
}

/* Rail above the page; never underline its links. */
.app-sidebar { z-index: 150; }
.app-sidebar a, .app-switcher-menu a { text-decoration: none; }

/* The old per-page top bar / hamburger is replaced by the rail. Hide the whole
   test-header (test/rrp pages) AND the hamburger wrapper wherever it lives
   (e.g. how-pricing-works keeps it inside .page-header). */
.test-header { display: none !important; }
.header-menu-container { display: none !important; }

/* Legacy bespoke card containers (not the shared .panel) get the panel look —
   elevated surface + SUBTLE border + radius, exactly like ops/admin. */
.info-section, .example-box, .formula-box, .table-section,
.formula-section, .settings-panel, .ce-result-box, .test-inputs {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}

/* Offset all page content for the fixed sidebar (structures vary per page). */
body > *:not(.app-sidebar):not(script):not(style) { margin-left: var(--sidebar-w); transition: margin-left 200ms var(--ease); }
body.nav-collapsed > *:not(.app-sidebar):not(script):not(style) { margin-left: var(--sidebar-rail); }
@media (max-width: 860px) { body > *:not(.app-sidebar):not(script):not(style) { margin-left: 0; } }