/* ───────────────────────────────────────────────────────────────────────────
   RailSnap — one stylesheet for every page.

   The world is a railway signal box. Dark enamel green of painted ironwork,
   brass fittings, and the two aspects a signal has: red is the train being
   full, green is the seat being yours.

   Every page used to carry its own copy of the tokens, the masthead and the
   footer, which is how they drifted — three container widths, two footers, and
   a sticky bar that stayed dark in daylight. One file now, and chrome.js
   builds the header and footer, so a page cannot disagree with its siblings.

   Bengali is the primary language here. Hind Siliguri and Anek Bangla both
   carry Latin as well, so a mixed line — "প্রতি Credit ৳14.99" — sets in one
   face rather than two, which is what most of this copy actually looks like.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --night:    #141C18;
  --night-2:  #1B2520;
  --night-3:  #223029;
  --rule:     #2E3E36;
  --enamel:   #ECE7DA;
  --enamel-2: #9DADA2;
  --enamel-3: #77877D;
  --brass:    #C79A3C;
  --danger:   #D9443A;
  --clear:    #45C085;
  --clear-dk: #0E1712;

  --glow:    rgba(69, 192, 133, .075);
  --go-lip:  #2E8C5F;
  --go-halo: rgba(69, 192, 133, .95);
  --sticky:  rgba(20, 28, 24, .95);
  /* The plate the lockup is painted on. Always dark: the mark is drawn in
     white and light green and has no dark variant, so in daylight it sits on
     its own plate the way a nameplate does on a signal box. */
  --plate:   #12211A;

  --sign: 'Anek Bangla', 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body: 'Hind Siliguri', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --data: 'Roboto Mono', ui-monospace, Menlo, monospace;

  --gut: clamp(20px, 5vw, 48px);
  --max: 1240px;
  --read: 860px;   /* long-form pages: reading measure, not scanning width */
}

/* Daylight. The media query is the default; the [data-theme] rules are the
   override chrome.js writes when somebody picks one, which has to beat the
   system setting in both directions.

   Not an inversion: a signal in the sun is a painted arm against a bright sky.
   The ironwork stays dark and the greens deepen — #45C085 on white reads as a
   highlighter — while surfaces become the warm off-white of a printed
   timetable rather than white, which glares. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --night:    #F4F2EA;
    --night-2:  #FFFFFF;
    --night-3:  #EDEAE0;
    --rule:     #D8D3C4;
    --enamel:   #1A2420;
    --enamel-2: #4E5B54;
    --enamel-3: #5F6C63;
    --brass:    #7E5A10;
    --danger:   #B4291F;
    --clear:    #147A4C;
    --clear-dk: #FFFFFF;
    --glow:     rgba(20, 122, 76, .05);
    --go-lip:   #0C5233;
    --go-halo:  rgba(20, 122, 76, .35);
    --sticky:   rgba(244, 242, 234, .95);
  }
}
:root[data-theme="light"] {
  --night:    #F4F2EA;
  --night-2:  #FFFFFF;
  --night-3:  #EDEAE0;
  --rule:     #D8D3C4;
  --enamel:   #1A2420;
  --enamel-2: #4E5B54;
  --enamel-3: #5F6C63;
  --brass:    #7E5A10;
  --danger:   #B4291F;
  --clear:    #147A4C;
  --clear-dk: #FFFFFF;
  --glow:     rgba(20, 122, 76, .05);
  --go-lip:   #0C5233;
  --go-halo:  rgba(20, 122, 76, .35);
  --sticky:   rgba(244, 242, 234, .95);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--enamel);
  font-family: var(--body);
  font-size: 17px;
  /* Bengali carries more above and below the baseline than Latin, so the
     leading that looks generous in English looks tight in বাংলা. */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(120% 70% at 74% 2%, var(--glow), transparent 62%);
  pointer-events: none;
}

h1, h2, h3 { margin: 0; font-family: var(--sign); font-weight: 700; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--clear); outline-offset: 3px; border-radius: 3px; }

.wrap  { max-width: var(--max);  margin: 0 auto; padding-inline: var(--gut); position: relative; }
.wrap.read { max-width: var(--read); }

/* ── Masthead, built by chrome.js ───────────────────────────────────────────── */
.mast {
  display: flex; align-items: center; gap: 14px;
  padding-block: 16px; border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0;
  background: var(--plate); padding: 8px 13px; border-radius: 7px; }
.brand img { height: 24px; width: auto; display: block; }

.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: 18px; flex: 1; }
.nav a {
  font-size: 14.5px; color: var(--enamel-2); text-decoration: none;
  padding-block: 4px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--enamel); }
.nav a[aria-current="page"] { color: var(--clear); border-bottom-color: var(--clear); }

.mast-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ver { font-family: var(--data); font-size: 12px; color: var(--enamel-3); white-space: nowrap; }

.theme-toggle {
  background: none; border: 1px solid var(--rule); color: var(--enamel-2);
  font-size: 13px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; padding: 0;
  display: grid; place-items: center; flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--clear); border-color: var(--clear); }

/* On a phone the nav goes under the mark rather than squeezing it.
 *
 * This used to say width:100%, which never took: .nav also carries flex:1,
 * and that sets flex-basis:0 — which beats width on a flex item. So the nav
 * stayed in its column beside the mark, squeezed to its narrowest, and wrapped
 * one link per line. Six Bengali labels made a masthead five hundred pixels
 * tall before any of the page had started.
 *
 * flex-basis wins it back, and the row scrolls rather than wraps: six links
 * will not fit on one line at any phone width, and a strip you can push is
 * honest about that in a way a six-line stack is not. */
@media (max-width: 720px) {
  .mast { flex-wrap: wrap; gap: 10px 12px; padding-block: 13px; }
  .nav {
    order: 3; flex: 0 0 100%; margin-left: 0; margin-top: 0;
    flex-wrap: nowrap; overflow-x: auto; gap: 0 18px;
    scrollbar-width: none; -ms-overflow-style: none;
    /* Bleed to the gutter, so a half-shown link reads as more to scroll to
       rather than as a link that has been cut off. */
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
    overscroll-behavior-x: contain;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 14px; white-space: nowrap; padding-block: 5px; }
  .mast-end { margin-left: auto; }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.go {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--clear); color: var(--clear-dk); text-decoration: none;
  font-family: var(--sign); font-weight: 700; font-size: 19px;
  padding: 14px 28px; border-radius: 6px;
  /* The call to action is a button now, not a link — it opens a dialog rather
     than going anywhere. Without these it would arrive with a UA border and
     a text cursor, and stop looking like the same control. */
  border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: 0 2px 0 var(--go-lip), 0 16px 30px -18px var(--go-halo);
  transition: filter .15s ease, transform .15s ease;
}
.go:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.go:active { transform: translateY(2px); box-shadow: 0 0 0 var(--go-lip); }

.ghost {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--enamel-2); text-decoration: none; font-size: 15.5px;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.ghost:hover { color: var(--clear); border-color: var(--clear); }

/* ── Sections and long-form copy ────────────────────────────────────────────── */
section { padding-block: clamp(30px, 5vw, 52px); }
section + section { border-top: 1px solid var(--rule); }

h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(23px, 3.2vw, 32px); line-height: 1.25; margin-bottom: 16px; }
h3 { font-size: clamp(17px, 2vw, 19px); font-weight: 600; line-height: 1.4; }

p { margin: 0 0 14px; color: var(--enamel-2); }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--enamel); font-weight: 600; }

.eyebrow {
  margin: 0 0 12px; font-family: var(--sign); font-weight: 600;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass);
}
.lede    { font-size: clamp(16.5px, 1.9vw, 19px); color: var(--enamel-2); max-width: 34em; }
.note    { color: var(--enamel-2); max-width: 46em; }
.updated { margin: 16px 0 0; font-family: var(--data); font-size: 12.5px; color: var(--enamel-3); }

/* ── Cards, rows and lists ──────────────────────────────────────────────────── */
.cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--night-2); border: 1px solid var(--rule);
  border-radius: 12px; padding: 20px 22px;
}
.card h3 { margin-bottom: 8px; }
.card p  { font-size: 15.5px; }

dl { margin: 0; }
.row { padding-block: 15px; border-top: 1px solid var(--rule); }
.row:first-of-type { border-top: 0; }
dt { font-family: var(--sign); font-weight: 600; font-size: 16px; color: var(--enamel); }
dd { margin: 5px 0 0; color: var(--enamel-2); font-size: 15.5px; }
@media (min-width: 860px) {
  .row { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: baseline; }
  dd { margin: 0; }
}

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step;
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
ol.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 54px 1fr;
  border-top: 1px solid var(--rule); background: var(--night-2);
}
ol.steps > li:first-child { border-top: 0; }
ol.steps > li::before {
  content: counter(step);
  font-family: var(--data); font-size: 15px; color: var(--brass);
  display: grid; place-items: center;
  background: var(--night-3); border-right: 1px solid var(--rule);
}
ol.steps > li > div { padding: 17px 20px; min-width: 0; }
ol.steps h3 { margin-bottom: 5px; }
ol.steps p  { font-size: 15.5px; }

ul.plain { margin: 0 0 14px; padding: 0; list-style: none; }
ul.plain li {
  position: relative; padding: 10px 0 10px 20px;
  border-top: 1px solid var(--rule); color: var(--enamel-2); font-size: 15.5px;
}
ul.plain li:first-child { border-top: 0; }
ul.plain li::before {
  content: ''; position: absolute; left: 2px; top: 21px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
}

.pin {
  margin: 18px 0; padding: 16px 19px;
  background: var(--night-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--brass); border-radius: 6px;
}
.pin p { color: var(--enamel); }

.contact { font-family: var(--data); font-size: 15px; color: var(--enamel); word-break: break-word; }

/* ── The train ──────────────────────────────────────────────────────────────
   Lifted from the extension's booking panel, so the site and the product it
   describes move the same way. The train holds its place and the world travels
   past it, which keeps the loop seamless at any width — and is also how it
   feels to wait for a seat: motion everywhere, and you are not moving. */
.scene {
  position: relative; height: 150px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 14px;
  background: linear-gradient(180deg, var(--night-2) 0%, var(--night-3) 100%);
}
.train {
  position: absolute; left: 50%; bottom: 48px; z-index: 1;
  transform: translateX(-50%);
  animation: rs-bob 2.6s ease-in-out infinite;
  width: min(320px, 78%);
}
.train svg { display: block; width: 100%; height: auto; }
.t-body  { fill: var(--enamel); }
.t-glass { fill: var(--clear); opacity: .92; }
.t-lamp  { fill: var(--brass); }
.t-link  { fill: var(--enamel-3); }
.t-wheel {
  fill: var(--night-3); stroke: var(--enamel-2); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: rs-spin 780ms linear infinite;
}
.rail { position: absolute; left: 0; right: 0; bottom: 42px; }
.rail::before { content: ''; display: block; height: 2px; background: var(--rule); }
.ties { position: relative; height: 9px; overflow: hidden; }
.ties-inner {
  position: absolute; inset: 0; width: calc(100% + 26px);
  background-image: repeating-linear-gradient(90deg, var(--rule) 0 5px, transparent 5px 26px);
  opacity: .75;
  animation: rs-ties 700ms linear infinite;
}
@keyframes rs-ties { to { transform: translateX(-26px); } }
@keyframes rs-spin { to { transform: rotate(360deg); } }
@keyframes rs-bob  { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -1.5px); } }

@media (prefers-reduced-motion: reduce) {
  .ties-inner, .train, .t-wheel { animation: none; }
}

/* ── Footer, built by chrome.js ─────────────────────────────────────────────── */
footer { border-top: 1px solid var(--rule); padding-block: 34px 48px; }
.foot-cols { display: grid; gap: 24px 40px; grid-template-columns: 1fr; margin-bottom: 26px; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot-cols h4 {
  margin: 0 0 10px; font-family: var(--sign); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--enamel-3);
}
.foot-cols a { display: block; color: var(--enamel-2); text-decoration: none; font-size: 15px; padding-block: 3px; }
.foot-cols a:hover { color: var(--clear); }
.foot-blurb { color: var(--enamel-2); font-size: 15px; max-width: 26em; }
.foot-legal { color: var(--enamel-3); font-size: 13.5px; max-width: 60em; line-height: 1.7; }
/* The same plate the masthead draws, at the same size.
 *
 * .foot-cols a sets display:block and padding-block:3px, and an element+class
 * selector outranks the lone .brand class — so the plate stretched the whole
 * column and then sat 30px tall around a 24px mark instead of 40. Both are
 * restated here rather than loosened there, because the column's other links
 * genuinely do want to be blocks with tight padding. */
.foot-cols .foot-brand {
  display: inline-flex; padding: 8px 13px; margin-bottom: 14px;
}
.foot-cols .foot-go { display: inline-flex; margin-top: 16px; }
.footmark { display: flex; align-items: center; gap: 11px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--rule); }