/* ==========================================================================
   TicketARP — IRCTC Advance Reservation Period calculator
   Mobile-first. Deep-blue glass over a night village station: frosted panels,
   brass lamplight for the one warm accent, and a train pulling in behind.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
/* Night is the default. The light theme is the same station at daybreak. */
:root {
  color-scheme: dark;

  --navy-950:  #050A18;
  --navy-900:  #0A1428;
  --navy-800:  #0E1B33;
  --navy-700:  #16294A;
  --steel:     #3E6FA8;
  --sky:       #7FB2E6;
  --brass:     #E0B45E;
  --brass-dk:  #C08A2E;

  --ink:       #EAF1FB;
  --ink-soft:  #A9BCD6;
  --ink-faint: #7A91B0;

  /* glass */
  --glass:       rgba(16, 34, 64, .42);
  --glass-2:     rgba(8, 18, 38, .40);
  --glass-3:     rgba(8, 18, 38, .55);
  --glass-brd:   rgba(150, 190, 240, .17);
  --glass-brd-2: rgba(150, 190, 240, .11);
  --glass-hi:    rgba(255, 255, 255, .07);
  --blur:        blur(20px) saturate(160%);
  --blur-soft:   blur(10px) saturate(130%);

  --green:      #55D6A0;
  --green-soft: rgba(85, 214, 160, .13);
  --red:        #FF8E7C;
  --red-soft:   rgba(255, 142, 124, .13);
  --amber:      #F0C46A;
  --amber-soft: rgba(240, 196, 106, .13);

  /* background scene */
  --bg-base: linear-gradient(168deg, #08122A 0%, #0D2149 46%, #07131F 100%);
  --bg-fields:
    radial-gradient(58% 42% at 14% 4%,   rgba(72, 126, 188, .40) 0%, transparent 64%),
    radial-gradient(44% 32% at 94% 18%,  rgba(98, 158, 222, .20) 0%, transparent 62%),
    radial-gradient(62% 44% at 86% 84%,  rgba(224, 180, 94, .15) 0%, transparent 66%),
    radial-gradient(74% 54% at 2% 98%,   rgba(30, 62, 124, .55) 0%, transparent 70%);
  --grid-line: rgba(140, 185, 240, .045);
  --vignette:  rgba(3, 7, 18, .55);

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --shadow-md: 0 10px 34px rgba(0, 0, 0, .38);
  --shadow-lg: 0 -8px 40px rgba(0, 0, 0, .55);

  --wrap: clamp(16px, 5vw, 28px);
  --gap:  clamp(12px, 3.4vw, 18px);

  --font-ui:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-disp: "Bitter", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Daybreak: the same station with the sun just up, glass turned frosted white.
   Declared once for the system preference and once for the explicit toggle, so
   the toggle wins in both directions. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --navy-950:  #E8F0FA;
    --navy-900:  #DCE8F6;
    --navy-800:  #C9DDF2;
    --navy-700:  #A8C6E6;
    --sky:       #1F5FA8;
    --brass:     #A5701A;
    --brass-dk:  #8A5C12;

    --ink:       #0D2039;
    --ink-soft:  #3C5877;
    --ink-faint: #6A82A0;

    --glass:       rgba(255, 255, 255, .60);
    --glass-2:     rgba(255, 255, 255, .46);
    --glass-3:     rgba(255, 255, 255, .70);
    --glass-brd:   rgba(30, 70, 125, .18);
    --glass-brd-2: rgba(30, 70, 125, .11);
    --glass-hi:    rgba(255, 255, 255, .55);

    --green:      #16794F;
    --green-soft: rgba(22, 121, 79, .12);
    --red:        #B33A2B;
    --red-soft:   rgba(179, 58, 43, .12);
    --amber:      #96660F;
    --amber-soft: rgba(150, 102, 15, .12);



    --bg-base: linear-gradient(168deg, #EDF4FD 0%, #CFE1F6 46%, #E4EDF9 100%);
    --bg-fields:
      radial-gradient(58% 42% at 14% 4%,   rgba(120, 172, 226, .45) 0%, transparent 64%),
      radial-gradient(44% 32% at 94% 18%,  rgba(158, 200, 241, .50) 0%, transparent 62%),
      radial-gradient(62% 44% at 86% 84%,  rgba(240, 199, 128, .34) 0%, transparent 66%),
      radial-gradient(74% 54% at 2% 98%,   rgba(146, 188, 234, .52) 0%, transparent 70%);
    --grid-line: rgba(30, 80, 145, .055);
    --vignette:  rgba(126, 162, 205, .26);

    --shadow-md: 0 10px 34px rgba(20, 50, 90, .16);
    --shadow-lg: 0 -8px 40px rgba(20, 50, 90, .24);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --navy-950:  #E8F0FA;
  --navy-900:  #DCE8F6;
  --navy-800:  #C9DDF2;
  --navy-700:  #A8C6E6;
  --sky:       #1F5FA8;
  --brass:     #A5701A;
  --brass-dk:  #8A5C12;

  --ink:       #0D2039;
  --ink-soft:  #3C5877;
  --ink-faint: #6A82A0;

  --glass:       rgba(255, 255, 255, .60);
  --glass-2:     rgba(255, 255, 255, .46);
  --glass-3:     rgba(255, 255, 255, .70);
  --glass-brd:   rgba(30, 70, 125, .18);
  --glass-brd-2: rgba(30, 70, 125, .11);
  --glass-hi:    rgba(255, 255, 255, .55);

  --green:      #16794F;
  --green-soft: rgba(22, 121, 79, .12);
  --red:        #B33A2B;
  --red-soft:   rgba(179, 58, 43, .12);
  --amber:      #96660F;
  --amber-soft: rgba(150, 102, 15, .12);



  --bg-base: linear-gradient(168deg, #EDF4FD 0%, #CFE1F6 46%, #E4EDF9 100%);
  --bg-fields:
    radial-gradient(58% 42% at 14% 4%,   rgba(120, 172, 226, .45) 0%, transparent 64%),
    radial-gradient(44% 32% at 94% 18%,  rgba(158, 200, 241, .50) 0%, transparent 62%),
    radial-gradient(62% 44% at 86% 84%,  rgba(240, 199, 128, .34) 0%, transparent 66%),
    radial-gradient(74% 54% at 2% 98%,   rgba(146, 188, 234, .52) 0%, transparent 70%);
  --grid-line: rgba(30, 80, 145, .055);
  --vignette:  rgba(126, 162, 205, .26);

  --shadow-md: 0 10px 34px rgba(20, 50, 90, .16);
  --shadow-lg: 0 -8px 40px rgba(20, 50, 90, .24);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

/* Several components set display in their own rules, which would otherwise
   win over the UA stylesheet's [hidden] { display: none }. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--navy-950);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* At 16px this much 0.7–0.9rem UI text reads small on a phone. Lifting the
   base is better than nudging thirty declarations. */
@media (max-width: 639px) {
  body { font-size: 17px; }
}

h1, h2, h3 { font-family: var(--font-disp); line-height: 1.18; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }
a { color: var(--sky); }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--wrap); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Anchored left rather than centred: a centred, translated skip link sticks out
   past the right edge on very narrow viewports and creates a scrollbar. */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  z-index: 100; background: var(--navy-800); color: var(--ink);
  border: 1px solid var(--glass-brd); border-top: 0;
  padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus-visible { top: 0; }

:focus-visible { outline: 2.5px solid var(--sky); outline-offset: 2px; border-radius: 5px; }

/* =============================================================== scene === */
/* Fixed behind everything. Glass needs variation behind it or the panels read
   as flat cards, so this is a field of large soft colour pools rather than a
   flat wash — cool blues weighted top-left and lower-left, one warm brass bloom
   low-right. Costs no download and resolves at any size. */
.scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg-fields), var(--bg-base);
}

/* A ruled grid, the ghost of a timetable page. Masked so it fades in downwards
   and never competes with the first card. */
.scene__grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px 68px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
}

.scene__veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 82% at 50% 38%, transparent 42%, var(--vignette) 100%);
}

/* Everything sits above the scene. The skip link is deliberately absent — it
   sets its own position: absolute, and listing it here made it relative and
   in-flow, which pushed the header down by a line. */
.appbar, main, .footer, .sheet, .toast { position: relative; z-index: 1; }

/* --------------------------------------------------------------- appbar -- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-3);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .22);
  padding-top: env(safe-area-inset-top);
}
.appbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 62px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.brand__roundel {
  width: 38px; height: 38px; flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.brand__roundel * { stroke: none; }
.rd-page { fill: #F2F7FD; }
.rd-band { fill: var(--brass-dk); }
.rd-ring { fill: var(--brass); }
.rd-rail { fill: #6E8FB8; }
.rd-loco { fill: #16294A; }
/* The locomotive is a wireframe, so these strokes have to survive the blanket
   `stroke: none` above — hence the extra class in the selector. */
.brand__roundel .rd-wire * { fill: none; stroke: #16294A; stroke-linejoin: round; }
.rd-lamp-core { fill: #FFF6DC; }
.rd-beam { fill: var(--brass-dk); }
.rd-lamp { fill: var(--brass); }

.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__text strong {
  font-family: var(--font-disp); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.1;
}
.brand__text em { font-style: normal; color: var(--brass); }
.brand__text small {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.appbar__tools { display: flex; align-items: center; gap: 8px; flex: none; }

.istclock {
  display: flex; align-items: center; gap: 6px;
  background: var(--glass-2); border: 1px solid var(--glass-brd);
  border-radius: 999px; padding: 5px 11px;
}
.istclock__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); color: var(--green);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.istclock__time { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.istclock__zone { font-size: .6rem; letter-spacing: .08em; color: var(--brass); }

.iconbtn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  background: var(--glass-2); border: 1px solid var(--glass-brd);
  border-radius: 50%; cursor: pointer; color: inherit;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.iconbtn:hover { border-color: var(--sky); }
.iconbtn:active { transform: scale(.94); }
.iconbtn svg { width: 19px; height: 19px; }
.ic-sun  { display: block; }
.ic-moon { display: none; }
:root[data-theme="light"] .ic-sun { display: none; }
:root[data-theme="light"] .ic-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ic-sun { display: none; }
  :root:not([data-theme="dark"]) .ic-moon { display: block; }
}

/* --------------------------------------------------------------- layout -- */
main {
  padding-block: clamp(16px, 4.5vw, 26px) clamp(28px, 8vw, 52px);
  display: grid; gap: var(--gap);
}

/* =============================================================== glass === */
.card, .ticket, .cd, .sheet__panel, .toast {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-md);
}
/* Without backdrop-filter the panels would be see-through mush, so fall back
   to a solid fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .ticket, .cd, .sheet__panel, .toast, .appbar { background: var(--navy-800); }
}

/* ---------------------------------------------------------------- cards -- */
.card {
  position: relative;
  border-radius: var(--radius);
  padding: clamp(15px, 3.8vw, 21px) clamp(18px, 5vw, 26px);
}
.card--form { border-top-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.card__punch {
  position: absolute; top: 13px; right: 16px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px dashed var(--glass-brd);
}
.card__punch::after {
  content: "ARP"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-disp); font-size: .62rem; letter-spacing: .12em;
  color: var(--ink-faint);
}
.card__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.12rem; font-weight: 700; margin-bottom: 8px;
  padding-right: 62px;
}
.card__title .ic { width: 20px; height: 20px; flex: none; color: var(--brass); }
.card:not(.card--form) .card__title { padding-right: 0; margin-bottom: 14px; }
.card__sub {
  font-size: .9rem; line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 13px; max-width: 58ch;
}
.card__sub strong { color: var(--ink); font-weight: 600; }

/* The standing booking horizon. Neutral panel with a brass rule: amber fills
   are reserved for the alerts, and two amber boxes in one card compete. */
.today-note {
  font-size: .89rem; line-height: 1.55; margin: 0 0 15px;
  color: var(--ink-soft);
  background: var(--glass-2);
  border: 1px solid var(--glass-brd-2);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
}
.today-note:empty { display: none; }
.today-note strong { color: var(--brass); font-weight: 700; white-space: nowrap; }
.today-note__more { color: var(--ink-faint); }

/* ------------------------------------------------------------ segmented -- */
.segmented {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--glass-2); border: 1px solid var(--glass-brd-2);
  border-radius: 999px; padding: 4px; margin-bottom: 18px;
}
.segmented__btn {
  position: relative; z-index: 2; border: 0; background: none; cursor: pointer;
  border-radius: 999px; padding: 10px 8px; font-size: .85rem; line-height: 1.25;
  color: var(--ink-soft); transition: color .2s ease;
}
.segmented__btn b { display: block; font-weight: 700; font-size: .91rem; color: inherit; }
.segmented__btn.is-active { color: #F4FAFF; }
.segmented__thumb {
  position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 6px); border-radius: 999px;
  background: linear-gradient(135deg, #2A63A8, #1B4478);
  box-shadow: 0 2px 12px rgba(27, 68, 120, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .28s cubic-bezier(.34, 1.3, .5, 1);
}
.segmented[data-index="1"] .segmented__thumb { transform: translateX(calc(100% + 4px)); }

/* --------------------------------------------------------------- fields -- */
.field { margin-bottom: 14px; }
.field--tight { margin-bottom: 12px; }
.field__label {
  display: block; font-size: .79rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.field__hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); }
.field__control { position: relative; display: flex; align-items: center; }
.field__ic {
  position: absolute; left: 14px; width: 19px; height: 19px;
  color: var(--brass); pointer-events: none;
}
.field__control input,
.field__control select {
  width: 100%; font-family: var(--font-ui); font-size: 1rem; color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-sm); padding: 14px; min-height: 52px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field__control .field__ic ~ input,
.field__control .field__ic ~ select { padding-left: 43px; }
.field__control input[type="date"] { font-family: var(--font-mono); font-weight: 500; }
.field__control input:focus,
.field__control select:focus {
  outline: none; border-color: var(--sky);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sky) 22%, transparent);
}
.field__control select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field__control select option { background: var(--navy-800); color: var(--ink); }
.field__note { font-size: .81rem; color: var(--ink-faint); margin: 8px 0 0; line-height: 1.55; }
::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; filter: invert(1); }
:root[data-theme="light"] ::-webkit-calendar-picker-indicator { filter: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) ::-webkit-calendar-picker-indicator { filter: none; }
}

/* ---------------------------------------------------------------- chips -- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--glass-brd); background: var(--glass-2);
  border-radius: 999px; padding: 8px 14px; font-size: .85rem; font-weight: 500;
  cursor: pointer; color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease, transform .12s ease;
}
.chip:hover { border-color: var(--sky); color: var(--ink); }
.chip:active { transform: scale(.96); }
.chip--accent {
  border-color: color-mix(in srgb, var(--brass) 55%, transparent);
  color: var(--brass); background: var(--amber-soft);
}

/* ------------------------------------------------------------- advanced -- */
.advanced { margin-top: 16px; border-top: 1px solid var(--glass-brd-2); padding-top: 14px; }
.advanced > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--sky);
  list-style: none; display: flex; align-items: center; gap: 7px; padding: 4px 0;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease; margin-left: 3px;
}
.advanced[open] > summary::before { transform: rotate(45deg); }
.advanced > div { padding-top: 14px; }

/* --------------------------------------------------------------- alerts -- */
.alerts { display: grid; gap: 8px; margin: 14px 0 0; }
.alerts:empty { display: none; }
.alert {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .88rem; line-height: 1.55; border-radius: var(--radius-sm);
  padding: 10px 13px; border: 1px solid; border-left-width: 3px;
}
.alert--info, .alert--warn {
  background: var(--amber-soft); color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  border-left-color: var(--amber);
}
.alert--error {
  background: var(--red-soft); color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  border-left-color: var(--red);
}

.reverse-out {
  margin: 4px 0 0; font-size: .95rem; line-height: 1.75;
  background: var(--glass-2); border: 1px solid var(--glass-brd-2);
  border-radius: var(--radius-sm); padding: 14px;
}
.reverse-out:empty { display: none; }
.reverse-out strong { font-family: var(--font-disp); font-size: 1.06rem; color: var(--brass); }

/* --------------------------------------------------------- ticket panel -- */
.ticket {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  padding: clamp(15px, 3.8vw, 21px) clamp(18px, 5vw, 26px);
  animation: rise .42s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.ticket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity: .85;
}
.ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ticket__kicker {
  font-size: .73rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
.badge {
  flex: none; font-size: .71rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.badge--open     { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); background: var(--green-soft); }
.badge--upcoming { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: var(--amber-soft); }
.badge--past     { color: var(--red);   border-color: color-mix(in srgb, var(--red) 50%, transparent);   background: var(--red-soft); }

/* One line, always: panels flex down rather than wrapping the date.
   The frame around them is the departure-board housing. */
.flapboard {
  display: flex; flex-wrap: nowrap; gap: 3px; margin: 4px 0 14px;
  background: #070C18; border-radius: 10px; padding: 7px;
  box-shadow: inset 0 0 0 1px rgba(224, 180, 94, .16), inset 0 2px 10px rgba(0, 0, 0, .7);
}
.flap {
  position: relative; flex: 1 1 auto; min-width: 0; padding: 9px 2px;
  background: linear-gradient(180deg, #1B2437 0 50%, #10182A 50% 100%);
  color: #E0B45E;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.05rem, 5.4vw, 1.85rem); line-height: 1;
  text-align: center; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(224, 180, 94, .2);
  animation: flip .34s ease both;
}
.flap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(0, 0, 0, .7);
}
.flap--space { flex: 0 1 7px; background: none; box-shadow: none; animation: none; }
.flap--space::after { display: none; }
@keyframes flip {
  0%   { transform: rotateX(-88deg); opacity: .1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

.ticket__readable {
  font-family: var(--font-disp); font-size: clamp(1.02rem, 4.2vw, 1.2rem);
  font-weight: 600; color: var(--brass); margin: 0 0 4px;
}

.ticket__perf {
  height: 1px; margin: 15px calc(-1 * clamp(18px, 5vw, 26px));
  border-top: 1px dashed var(--glass-brd);
}

.ticket__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 16px; margin: 0 0 16px;
}
.ticket__grid dt {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.ticket__grid dd { margin: 0; font-size: .96rem; font-weight: 600; }

.ticket__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 20px; cursor: pointer;
  font-size: .92rem; font-weight: 600;
  background: var(--glass-2); color: var(--ink);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-sm);
  -webkit-backdrop-filter: var(--blur-soft);
  backdrop-filter: var(--blur-soft);
  transition: transform .12s ease, filter .18s ease, border-color .18s ease;
}
.btn:hover { border-color: var(--sky); }
.btn:active { transform: scale(.975); }
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn--primary {
  background: linear-gradient(135deg, #2A63A8, #1B4478);
  border-color: rgba(150, 195, 245, .34); color: #F2F8FF;
  box-shadow: 0 4px 18px rgba(23, 62, 112, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn--primary:hover { filter: brightness(1.12); border-color: rgba(150, 195, 245, .55); }
.btn--block { width: 100%; }

/* ----------------------------------------------------------- countdowns -- */
.countdowns { display: grid; gap: 12px; }
.cd {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start;
  border-radius: var(--radius); padding: 14px 15px;
  border-left: 3px solid var(--glass-brd);
}
.cd--general { border-left-color: var(--steel); }
.cd--tatkal  { border-left-color: var(--brass); }
.cd.is-open  { border-left-color: var(--green); }
.cd.is-live  { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--glass)); }

.cd__badge {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--glass-brd-2); color: var(--sky);
}
.cd__badge svg { width: 21px; height: 21px; }
.cd--tatkal .cd__badge { color: var(--brass); }

.cd__label { font-size: .79rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cd__when {
  font-family: var(--font-disp); font-weight: 700; font-size: 1.06rem;
  margin: 2px 0 8px; line-height: 1.35;
}
.cd__when em { font-style: normal; color: var(--brass); }
.cd__note { font-size: .79rem; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.55; }

.cd__timer {
  display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cd__timer span { display: inline-flex; align-items: baseline; }
.cd__timer i {
  font-style: normal; font-family: var(--font-ui); font-size: .71rem;
  font-weight: 600; color: var(--ink-faint); margin: 0 7px 0 2px;
}
.cd__state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 700; color: var(--green);
}
.cd__state::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: pulse 2.4s ease-out infinite;
}
.cd__remind {
  margin-top: 10px; border: 0; background: none; cursor: pointer; padding: 4px 0;
  font-size: .83rem; font-weight: 600; color: var(--sky);
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--sky) 45%, transparent);
}
.cd__remind svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------- timeline -- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--glass-brd) 0 6px, transparent 6px 12px);
}
.tl { position: relative; padding-bottom: 20px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: -26px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--glass-2); border: 2px solid var(--glass-brd);
}
.tl--done::before { border-color: var(--green); background: var(--green); }
.tl--now::before  { border-color: var(--brass); background: var(--brass); box-shadow: 0 0 0 5px var(--amber-soft); }
.tl__date { font-family: var(--font-mono); font-size: .81rem; font-weight: 700; color: var(--brass); letter-spacing: .02em; }
.tl__title { font-family: var(--font-disp); font-weight: 700; font-size: 1rem; margin: 1px 0 2px; }
.tl__body { font-size: .87rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ------------------------------------------------------------------ faq -- */
.faq details { border-bottom: 1px solid var(--glass-brd-2); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 13px 34px 13px 0; position: relative;
}
/* The question is an h3 for the document outline; it must not inherit heading
   margins or size inside the summary row. */
.faq summary h3 {
  margin: 0; font-family: var(--font-disp); font-weight: 600;
  font-size: 1.02rem; line-height: 1.4; letter-spacing: 0;
  display: inline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 19px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > *:not(summary) { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; }
.faq details > p:last-child, .faq details > ul:last-child { padding-bottom: 12px; }
.faq strong { color: var(--ink); }

.ruleslist { margin: 0 0 .8em; padding-left: 1.1em; display: grid; gap: 7px; }
.ruleslist li { padding-left: 2px; }
.pill {
  display: inline-block; font-size: .67rem; font-weight: 700; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px; margin-right: 7px; vertical-align: 1px;
  border: 1px solid;
}
.pill--ac    { background: rgba(126, 178, 230, .14); color: var(--sky);   border-color: color-mix(in srgb, var(--sky) 40%, transparent); }
.pill--nonac { background: var(--amber-soft);        color: var(--brass); border-color: color-mix(in srgb, var(--brass) 40%, transparent); }

.disclaimer {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--glass-brd-2);
  font-size: .79rem; color: var(--ink-faint); line-height: 1.6;
}

/* --------------------------------------------------------------- footer -- */
/* The footer sits directly over the platform, so it needs its own frosting
   to stay legible against the lamps. */
.footer {
  padding: 34px 0 calc(34px + env(safe-area-inset-bottom));
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur-soft);
  backdrop-filter: var(--blur-soft);
  border-top: 1px solid var(--glass-brd);
  text-align: center; color: var(--ink-soft);
}
.footer__inner p { font-size: .87rem; margin: 0 0 6px; }
.footer__line { font-style: italic; }
.footer__meta { font-size: .76rem !important; opacity: .8; }
.footer__track { width: 130px; height: 26px; margin-bottom: 12px; color: var(--brass); opacity: .5; stroke-width: 1.6; }
.footer__sleepers { opacity: .7; }

/* ---------------------------------------------------------------- sheet -- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet__scrim {
  position: absolute; inset: 0; background: rgba(3, 7, 18, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade .22s ease both;
}
@keyframes fade { from { opacity: 0; } }
.sheet__panel {
  position: relative; width: 100%; max-width: 560px;
  max-height: 92vh; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  color: var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-lg);
  padding: 12px clamp(18px, 5vw, 26px) calc(24px + env(safe-area-inset-bottom));
  animation: slideup .3s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes slideup { from { transform: translateY(100%); } }
.sheet__grip { width: 44px; height: 4px; border-radius: 99px; background: var(--glass-brd); margin: 0 auto 12px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sheet__head h2 { font-size: 1.2rem; font-weight: 700; }
.sheet__lede { font-size: .9rem; color: var(--ink-soft); margin-bottom: 16px; }

.picks { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.pick {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--glass-brd-2);
  border-radius: var(--radius-sm); padding: 13px 14px;
  transition: border-color .16s ease, background .16s ease;
}
.pick:has(input:checked) {
  border-color: color-mix(in srgb, var(--sky) 60%, transparent);
  background: color-mix(in srgb, var(--sky) 12%, var(--glass-2));
}
.pick input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 21px; height: 21px; margin: 1px 0 0;
  border: 1.5px solid var(--glass-brd); border-radius: 6px;
  background: var(--glass-3); cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.pick input:checked { background: #2A63A8; border-color: #2A63A8; }
.pick input:checked::after {
  content: ""; display: block; width: 5px; height: 10px; margin: 1px auto 0;
  border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(42deg);
}
.pick__text { min-width: 0; }
.pick__title { font-weight: 600; font-size: .95rem; display: block; }
.pick__meta { font-size: .81rem; color: var(--ink-soft); font-family: var(--font-mono); }
.pick.is-past { opacity: .45; }

.sheet__actions { display: grid; gap: 9px; margin-top: 18px; }
.sheet__fineprint {
  margin-top: 16px; font-size: .79rem; color: var(--ink-faint); line-height: 1.6;
  background: var(--glass-2); border: 1px solid var(--glass-brd-2);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.sheet__fineprint strong { color: var(--ink-soft); }

/* ---------------------------------------------------------------- toast -- */
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80; max-width: min(92vw, 420px);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-sm); padding: 13px 17px;
  font-size: .89rem; line-height: 1.5;
  animation: toastin .26s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ------------------------------------------------------------- ≥ 640 px -- */
@media (min-width: 640px) {
  .countdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countdowns > :first-child { grid-column: 1 / -1; }
  .ticket__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand__roundel { width: 42px; height: 42px; }
  .sheet { align-items: center; }
  .sheet__panel {
    border-radius: var(--radius-lg); max-height: 88vh; max-height: 88svh;
    border-bottom: 1px solid var(--glass-brd);
    padding-bottom: 26px; animation-name: rise;
  }
  .sheet__grip { display: none; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------ print */
@media print {
  .scene, .appbar, .ticket__actions, .countdowns .cd__remind,
  .sheet, .toast, .footer__track, .skip-link { display: none !important; }
  body { background: #fff; color: #111; }
  .card, .ticket, .cd {
    background: #fff !important; color: #111;
    box-shadow: none; border: 1px solid #ccc; break-inside: avoid;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}