/* ══════════════════ SITE RAIL ══════════════════
   The left rail for the STATIC pages — the homepage, /free-tools, /terms and
   /refund-policy — built by /site-rail.js. A hand-written copy of
   src/components/app/NavRail.tsx; THAT COMPONENT IS THE SOURCE OF TRUTH:
   268px, --rail ground, 1px --line edge, 72px brand row, 9px uppercase group
   labels, 13px pill rows, active = --gold-dim fill + gold text, hover =
   --hover, 17px/1.6-stroke glyphs, and below 1024px a 60px top bar with a
   round burger plus an off-canvas drawer.

   Moved here from the homepage's inline copy so the four pages share one
   stylesheet. Differences from that copy: --rail and --hover are
   declared here (the other pages define --bg/--surface/--line but not these),
   and --fg-soft/--gold-dim are zero-specificity defaults derived from the
   page's own tokens;
   the top bar's ground is 90% of --bg, as the portal's bg-bg/90, not the
   homepage's private --nav-bg; the theme row's icon is an SVG, not a Phosphor
   <i>; the body offsets are scoped to body.has-rail so a page that loads the
   stylesheet without the script is unaffected; and .rail-badge/.rail-label
   are added for the portal-style rows /free-tools shows.

   Layout: the rail is position:fixed and body takes padding-left: 268px from
   1024px up. That renders the same as the portal's flex row without wrapping
   each page's content in a new element. */
/* --rail/--hover are ours. --fg-soft/--gold-dim are DEFAULTS, derived from
   each page's own --fg/--gold and declared at zero specificity (:where), so a
   page that declares them (the homepage, free-tools) always wins whatever
   the stylesheet order, and a page that does not (terms, refund) gets its own
   accent softened, not the homepage's. */
:where(:root, [data-theme="dark"]) { --rail: #0c0c10; --hover: rgba(255,255,255,0.045); --fg-soft: color-mix(in srgb, var(--fg) 72%, transparent); --gold-dim: color-mix(in srgb, var(--gold) 12%, transparent); }
:where([data-theme="light"]) { --rail: #ffffff; --hover: rgba(21,62,105,0.06); --fg-soft: color-mix(in srgb, var(--fg) 82%, transparent); --gold-dim: color-mix(in srgb, var(--gold) 10%, transparent); }

/* ── LOGO ── */
.logo-img { height: 36px; width: auto; display: block; }
.logo-dark  { display: block; }
.logo-light { display: none;  }
[data-theme="light"] .logo-dark  { display: none;  }
[data-theme="light"] .logo-light { display: block; }

.rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: 268px; display: flex; flex-direction: column;
  background: var(--rail); border-right: 1px solid var(--line);
  transition: transform 0.3s;
}
.rail-brand { height: 72px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 20px; text-decoration: none; }
.rail-brand .logo-img { height: 28px; }
.rail-wordmark { font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--fg); }
.rail-wordmark span { color: var(--gold); }
/* Resets first: the pages carry bare `nav{position:fixed; height:68px; display:flex …}`
   rules for the top bars they used to have, and this nav must not inherit them. */
.rail-nav { position: static; inset: auto; height: auto; display: block; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; justify-content: normal; flex: 1; overflow-y: auto; padding: 0 12px 16px; }
.rail-group { margin-bottom: 20px; }
.rail-group-label { padding: 0 12px 6px; font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); opacity: 0.7; }
.rail-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--fg-soft); text-decoration: none; margin-bottom: 2px; transition: background 0.15s, color 0.15s; }
.rail-row svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); transition: color 0.15s; }
.rail-row:hover { background: var(--hover); color: var(--fg); }
.rail-row:hover svg { color: var(--fg-soft); }
/* terms and refund carry a bare `a:hover{text-decoration:underline}` (0,1,1), which
   outranks `.rail-row`'s `text-decoration:none` (0,1,0); this (0,2,1) wins back. */
.rail a:hover, .rail-topbar a:hover { text-decoration: none; }
.rail-row.active { background: var(--gold-dim); color: var(--gold); font-weight: 600; }
.rail-row.active svg { color: var(--gold); }
.rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-badge { flex-shrink: 0; border: 1px solid var(--gold-border); border-radius: 999px; padding: 2px 8px; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.rail-row .rail-ext { margin-left: auto; width: 13px; height: 13px; opacity: 0.5; }
.rail-foot { flex-shrink: 0; border-top: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.rail-foot .lang-picker { width: 100%; }
.rail-foot .lang-btn { width: 100%; justify-content: flex-start; border-radius: 8px; height: 36px; }
/* In the footer the dropdowns open UPWARD, or they would fall off the page. */
.rail-foot .lang-dropdown { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; min-width: 100%; }
.rail-theme { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rail-theme:hover { background: var(--hover); color: var(--fg); }
.rail-theme svg { width: 15px; height: 15px; flex-shrink: 0; }
.rail-portal { display: block; width: 100%; margin-top: 4px; padding: 13px; border-radius: 12px; border: 0; background: var(--gold); color: #09090b; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: pointer; transition: filter 0.15s; }
.rail-portal:hover { filter: brightness(1.08); }
.rail-close { position: absolute; right: 12px; top: 16px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: none; align-items: center; justify-content: center; cursor: pointer; }
.rail-close:hover { background: var(--hover); color: var(--fg); }
.rail-close svg { width: 17px; height: 17px; }
.rail-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 60px; align-items: center; gap: 12px; padding: 0 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--line); }
.rail-topbar .logo-img { height: 24px; }
.rail-burger { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.rail-burger:hover { border-color: var(--gold-border); background: var(--hover); color: var(--gold); }
.rail-burger svg { width: 17px; height: 17px; }
.rail-scrim { display: none; position: fixed; inset: 0; z-index: 190; background: rgba(9,9,11,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[data-theme="light"] .rail-scrim { background: rgba(248,248,249,0.75); }
@media (min-width: 1024px) {
  body.has-rail { padding-left: 268px; }
}
@media (max-width: 1023.98px) {
  body.has-rail { padding-top: 60px; }
  .rail { transform: translateX(-100%); }
  .rail.open { transform: none; }
  .rail-close { display: flex; }
  .rail-topbar { display: flex; }
  .rail-scrim.open { display: block; }
}