/* =====================================================================
   HRP · Expedition Logbook design system
   Editorial cartography · bilingual Devanagari · print-ticket culture
   ===================================================================== */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/dm-serif-display.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/dm-serif-display.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter.woff2') format('woff2');
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;500;700;900&display=swap');

:root {
  /* Only two colors · white + #2763ea. Everything else is grayscale. */
  --paper: #ffffff;
  --paper-2: #f6f8fc;
  --paper-3: #eef2f8;
  --paper-shadow: rgba(15, 23, 42, 0.08);

  --ink: #334155;      /* softened · slate-700 (was near-black) */
  --ink-2: #475569;    /* slate-600 */
  --ink-3: #64748b;    /* slate-500 */
  --ink-4: #94a3b8;    /* slate-400 */
  --ink-5: #cbd5e1;    /* slate-300 */
  --line: #e5e9f0;
  --line-2: #d6dce6;

  /* The one accent · #2763ea · all other "accents" alias to it */
  --terra: #2763ea;       /* primary */
  --terra-2: #1e4dc4;     /* hover */
  --terra-bg: #e4ecfd;    /* tint */
  --indigo: #2763ea;      /* alias */
  --indigo-2: #1e4dc4;
  --indigo-bg: #e4ecfd;
  --brass: #2763ea;       /* alias · was amber */
  --brass-bg: #e4ecfd;
  --moss: #2763ea;        /* alias · was green */
  --moss-bg: #e4ecfd;
  --ember: #2763ea;       /* alias · was red */

  /* Status · differentiated by weight/fill, not hue.
     Destructive stays gray-ink so it doesn't fight the blue. */
  --ok: #2763ea;
  --warn: #2763ea;
  --bad: #334155;
  --info: #2763ea;

  /* Type scale */
  --display: 'DM Serif Display', 'Noto Serif Devanagari', serif;
  --body: 'Inter', 'Noto Serif Devanagari', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --deva: 'Noto Serif Devanagari', serif;

  /* Rhythm */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; --r-5: 34px;

  /* Shadows · cool-gray tint */
  --shadow-1: 0 1px 0 rgba(15,23,42,.04);
  --shadow-2: 0 2px 6px rgba(15,23,42,.06), 0 1px 0 rgba(15,23,42,.04);
  --shadow-3: 0 10px 30px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv01', 'cv11';
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

/* No grain overlay · clean white surface */
body::before { display: none; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
img { max-width: 100%; display: block; }
svg { display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--display);
  
  letter-spacing: -0.025em;
  line-height: 0.96;
}
.display-italic {
  font-family: var(--display);
  font-style: italic;
  
}
.deva { font-family: var(--deva); }
.mono { font-family: var(--mono); font-feature-settings: 'ss01', 'calt'; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'ss01'; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow-rule::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
}

.caption {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.margin-note {
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
  
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  transition: transform .12s ease, background .12s ease, color .12s ease;
  font-feature-settings: 'ss01';
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--terra); border-color: var(--terra); color: var(--paper); }
.btn-terra {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
}
.btn-terra:hover { background: var(--terra-2); border-color: var(--terra-2); }
.btn-ghost { border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 14px; }

/* ---------- Form inputs ---------- */
.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  border-radius: 0;
  outline: 0;
  transition: border-color .12s ease;
}
.input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.input-mono { font-family: var(--mono); letter-spacing: 0.05em; }
.label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

/* ---------- Cards / surfaces (no rounded corners) ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative;
}
.card-raised {
  background: #faf6ec;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}

/* Paper edge · corners clipped · feels like a printed stub */
.paper {
  background: #faf6ec;
  border: 1px solid var(--line);
  position: relative;
}
.paper-shadow { box-shadow: var(--shadow-3); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1.3;
}
/* One-hue badges · distinguish by fill weight, not color */
.badge-ok    { color: var(--paper); background: var(--terra);    border-color: var(--terra); }    /* solid blue */
.badge-info  { color: var(--terra); background: var(--terra-bg); border-color: var(--terra); }    /* tint blue */
.badge-warn  { color: var(--terra); background: var(--paper);    border-color: var(--terra); }    /* outline blue */
.badge-bad   { color: var(--paper); background: var(--ink);      border-color: var(--ink);   }    /* solid ink */
.badge-neutral { color: var(--ink-3); background: var(--paper-2); border-color: var(--line-2); }  /* quiet gray */
.badge-solid-ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* ---------- Ticket perforations ---------- */
.perf-top, .perf-bot {
  position: relative;
  height: 14px;
}
.perf-top::before, .perf-bot::before {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 14px;
  background:
    radial-gradient(circle at 7px 7px, var(--paper) 4px, transparent 4.5px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
}
.perf-v {
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  background:
    radial-gradient(circle at 7px 7px, var(--paper) 4px, transparent 4.5px);
  background-size: 14px 14px;
  background-repeat: repeat-y;
  z-index: 2;
}

/* Dashed divider like a ticket tear */
.tear {
  border: 0;
  border-top: 1.5px dashed var(--line-2);
  margin: 0;
  position: relative;
}
.tear::before, .tear::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.tear::before { left: -12px; }
.tear::after { right: -12px; }

/* ---------- Topographic contour background ---------- */
.contours {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cg fill='none' stroke='%23a69485' stroke-width='0.6' opacity='0.4'%3E%3Cpath d='M-50 220 Q 120 180 250 210 T 520 180 T 860 200'/%3E%3Cpath d='M-50 260 Q 140 220 280 250 T 540 230 T 860 240'/%3E%3Cpath d='M-50 300 Q 160 270 310 290 T 560 280 T 860 285'/%3E%3Cpath d='M-50 340 Q 180 320 340 330 T 580 330 T 860 330'/%3E%3Cpath d='M-50 380 Q 200 370 370 370 T 600 380 T 860 380'/%3E%3Cpath d='M-50 180 Q 100 140 220 170 T 490 140 T 860 160' opacity='0.6'/%3E%3Cpath d='M-50 140 Q 80 100 180 130 T 460 100 T 860 120' opacity='0.4'/%3E%3Cpath d='M-50 100 Q 60 60 140 90 T 420 60 T 860 80' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}
.contours-dense {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cg fill='none' stroke='%23a69485' stroke-width='0.4'%3E%3Cpath d='M0 50 Q 200 10 400 50 T 800 50'/%3E%3Cpath d='M0 70 Q 200 30 400 70 T 800 70'/%3E%3Cpath d='M0 90 Q 200 50 400 90 T 800 90'/%3E%3Cpath d='M0 110 Q 200 70 400 110 T 800 110'/%3E%3Cpath d='M0 130 Q 200 90 400 130 T 800 130'/%3E%3Cpath d='M0 150 Q 200 110 400 150 T 800 150'/%3E%3Cpath d='M0 170 Q 200 130 400 170 T 800 170'/%3E%3Cpath d='M0 190 Q 200 150 400 190 T 800 190'/%3E%3Cpath d='M0 210 Q 200 170 400 210 T 800 210'/%3E%3Cpath d='M0 230 Q 200 190 400 230 T 800 230'/%3E%3Cpath d='M0 250 Q 200 210 400 250 T 800 250'/%3E%3Cpath d='M0 270 Q 200 230 400 270 T 800 270'/%3E%3Cpath d='M0 290 Q 200 250 400 290 T 800 290'/%3E%3Cpath d='M0 310 Q 200 270 400 310 T 800 310'/%3E%3Cpath d='M0 330 Q 200 290 400 330 T 800 330'/%3E%3C/g%3E%3C/svg%3E");
}

/* Postmark stamp · circular with date */
.postmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px;
  border: 2px solid var(--terra);
  border-radius: 999px;
  color: var(--terra);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-align: center;
  transform: rotate(-8deg);
  opacity: 0.85;
  position: relative;
}
.postmark::before {
  content: '';
  position: absolute; inset: 4px;
  border: 1px dashed var(--terra);
  border-radius: 999px;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
  gap: 28px;
  min-height: 76px;
}
.nav-brand {
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}
.nav-mark {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--terra);
  color: var(--paper);
  font-family: var(--display);
  font-size: 28px;
  font-style: italic;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}
.nav-mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.brand {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.brand em { font-style: italic; color: var(--terra); }
.brand-deva {
  font-family: var(--deva);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}
.nav-crumb {
  padding-left: 20px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  line-height: 1;
}
.nav-crumb:empty { display: none; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-block;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: relative;
  transition: color .12s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 1.5px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .15s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--ink); }
.nav-user {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 5px 5px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.nav-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--terra);
  color: var(--paper);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  flex-shrink: 0;
}
.nav-divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* Sign-in dropdown · the menu under the "Sign in" button */
.signin-wrap { position: relative; }
.signin-wrap .chev {
  display: inline-block;
  font-size: 9px;
  margin-left: 6px;
  transition: transform .15s ease;
}
.signin-wrap.is-open .chev { transform: rotate(180deg); }
.signin-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-3);
  z-index: 100;
  padding: 6px 0;
}
.signin-menu::before {
  content: '';
  position: absolute;
  top: -7px; right: 18px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  transform: rotate(45deg);
}
.signin-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px dotted var(--line-2);
  color: var(--ink);
  transition: background .1s ease;
}
.signin-item:last-child { border-bottom: 0; }
.signin-item:hover { background: var(--paper-2); }
.signin-item-title {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.signin-item:hover .signin-item-title { color: var(--terra); }
.signin-item-help {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ---------- Layout primitives ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

.stack-1 > * + * { margin-top: 4px; }
.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 16px; }
.stack-4 > * + * { margin-top: 24px; }
.stack-5 > * + * { margin-top: 40px; }

/* ---------- Admin shell ---------- */
.admin-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}
.admin-side {
  background: var(--ink);
  color: var(--paper);
  padding: 24px 0;
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--ink);
}
.admin-side .brand { color: var(--paper); padding: 0 24px; }
.admin-side .brand-deva { color: var(--brass); }
.admin-nav-group {
  padding: 20px 24px 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.45);
}
.admin-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 24px;
  color: rgba(244, 239, 228, 0.75);
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.admin-nav-link:hover { color: var(--paper); background: rgba(244, 239, 228, 0.04); }
.admin-nav-link.active {
  color: var(--paper);
  background: rgba(244, 239, 228, 0.06);
  border-left-color: var(--brass);
}
.admin-nav-link .num {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(244, 239, 228, 0.5);
}

.admin-main {
  padding: 0;
  min-width: 0;
}
.admin-topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
}

/* ---------- Data tables ---------- */
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.dtable th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.dtable td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-2);
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable tr:hover td { background: rgba(232, 221, 198, 0.3); }

/* ---------- Seat map ---------- */
.seat-grid {
  display: grid;
  gap: 6px;
}
.seat {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  border: 1.5px solid var(--line-2);
  background: var(--paper);
  color: var(--ink-3);
  transition: all .08s ease;
  cursor: pointer;
  position: relative;
}
.seat:hover { border-color: var(--ink); color: var(--ink); }
.seat.taken {
  background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 4px, var(--line) 4px, var(--line) 5px);
  color: var(--ink-4);
  border-color: var(--line-2);
  cursor: not-allowed;
}
.seat.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.seat.ladies {
  background: var(--terra-bg);
  color: var(--terra);
  border-color: var(--terra);
}
.seat.driver {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink-4);
  cursor: default;
}

/* ---------- Step indicator ---------- */
.steps {
  display: flex; align-items: center; gap: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 0;
  color: var(--ink-4);
  text-transform: uppercase;
  border-right: 1px solid var(--line);
  padding-right: 22px;
  margin-right: 18px;
}
.step:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.step.active { color: var(--ink); }
.step.active .step-num { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.step.done { color: var(--ink-3); }
.step.done .step-num { border-color: var(--ink); color: var(--ink); }

/* ---------- KPIs ---------- */
.kpi-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpi-value {
  font-family: var(--display);
  
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.kpi-delta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}
.kpi-delta.up { color: var(--moss); }
.kpi-delta.down { color: var(--terra); }

/* ---------- Utility ---------- */
.hr-double { border: 0; border-top: 3px double var(--ink); }
.divider-dotted { border: 0; border-top: 1px dotted var(--line-2); }
.rule-thick { border-top: 2px solid var(--ink); }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tab bar · editorial */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

/* Fancy arrow · trail marker */
.trail-arrow::after {
  content: '⟶';
  margin-left: 8px;
  color: var(--terra);
}

/* Price display */
.price-display {
  font-family: var(--display);
  
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-currency {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  vertical-align: top;
}

/* Ribbon · hero overlay */
.ribbon {
  position: absolute;
  top: 12px; right: -4px;
  background: var(--terra);
  color: var(--paper);
  padding: 5px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: var(--shadow-2);
}
.ribbon::after {
  content: '';
  position: absolute;
  right: 0; bottom: -4px;
  border: 4px solid var(--terra-2);
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* Altitude profile canvas */
.altitude-profile {
  width: 100%;
  height: 80px;
  background: var(--paper-2);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Search pill row */
.search-pill {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 160px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  align-items: stretch;
  box-shadow: var(--shadow-3);
}
/* Small BS-date hint shown beneath the date input — replaces the disabled BS column */
.search-pill .bs-hint {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--terra);
  margin-top: 4px;
  font-feature-settings: 'ss01';
}
.search-pill > * {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}
.search-pill > *:last-child { border-right: 0; padding: 0; }
.search-pill .label { margin-bottom: 4px; }
.search-pill input,
.search-pill select {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.01em;
  outline: 0;
}
/* Kill native chrome on selects, add custom chevron */
.search-pill select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 16px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23334155' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}
/* Date input · keep native picker but quiet the icon */
.search-pill input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
.search-pill input::placeholder { color: var(--ink-4); }
.search-pill button {
  background: var(--terra);
  color: var(--paper);
  padding: 0 24px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .12s ease;
  height: 100%;
  width: 100%;
  white-space: nowrap;
}
.search-pill button:hover { background: var(--terra-2); }

/* Filters & sort selects beneath the search pill · same chrome treatment */
details select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 9px 28px 9px 12px;
  border: 1px solid var(--line-2);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  border-radius: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23334155' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: 0;
  transition: border-color .12s ease;
}
details select:focus { border-color: var(--ink); }

/* Sparkline / mini charts */
.spark {
  display: block;
  width: 100%;
  height: 40px;
}

/* =====================================================================
   Responsive · tablet + mobile
   ===================================================================== */

/* Tablet · 1024px and below */
@media (max-width: 1024px) {
  .container, .container-narrow, .container-wide { padding: 0 22px; }
  .admin-shell { grid-template-columns: 220px 1fr; }
  .admin-topbar { padding: 12px 22px; }
  .admin-main { min-width: 0; overflow-x: hidden; }
}

/* Mobile · 768px and below */
@media (max-width: 768px) {
  /* Body · kill grain overlay on mobile for perf */
  body::before { opacity: 0.2; }

  /* Containers collapse */
  .container, .container-narrow, .container-wide { padding: 0 16px; }

  /* Nav · collapse brand text, compress links */
  .nav .container > div:first-child > span { display: none !important; }
  .nav .container > div:last-child { gap: 10px !important; flex-wrap: wrap; justify-content: flex-end; }
  .nav .container > div:last-child > a.eyebrow { display: none; }
  .nav .brand { font-size: 14px; }
  .nav .brand-deva { font-size: 12px; }

  /* ---------- Admin shell · sidebar becomes top drawer ---------- */
  .admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin-side {
    position: relative;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .admin-side > div:first-child { flex-shrink: 0; padding: 0 16px; border-right: 1px solid rgba(244,239,228,0.12); }
  .admin-side .admin-nav-group { display: none; }
  .admin-side .admin-nav-link {
    display: inline-flex;
    padding: 6px 12px;
    font-size: 12px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    flex-shrink: 0;
  }
  .admin-side .admin-nav-link.active { border-bottom-color: var(--brass); border-left: 0; }
  .admin-side .admin-nav-link:last-of-type[href*="home"] ~ a { display: none; }
  .admin-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .admin-topbar > div { min-width: 0; flex-wrap: wrap; }

  /* ---------- Hero sections stack ---------- */
  .hero-grid, .page-head-grid, .dash-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-side { border-left: 0 !important; border-top: 1px dotted var(--line-2); padding-left: 0 !important; padding-top: 20px; }
  .hero { padding: 32px 0 44px; }
  .hero h1 { font-size: clamp(44px, 12vw, 64px) !important; }

  /* ---------- Search pill · stack ---------- */
  .search-pill { grid-template-columns: 1fr !important; border-width: 1px; }
  .search-pill > * { border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 12px 14px !important; }
  .search-pill > *:last-child { border-bottom: 0; padding: 14px !important; }
  .search-pill button { width: 100%; justify-content: center; padding: 14px !important; }
  .search-pill input { font-size: 16px !important; }

  /* ---------- Route ribbon + stats strip stack ---------- */
  .route-ribbon { grid-template-columns: 1fr 1fr !important; }
  .route-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .route-cell:nth-child(2n) { border-right: 0; }
  .route-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .stats-strip { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .stats-strip > div, .today-summary { border-right: 0 !important; }
  .today-summary { grid-template-columns: 1fr 1fr 1fr !important; }

  /* ---------- Fleet grid · single column ---------- */
  .fleet-grid, .steps-grid, .saved-routes { grid-template-columns: 1fr !important; }

  /* ---------- Routes-map stack ---------- */
  .routes-map { grid-template-columns: 1fr !important; gap: 24px !important; }
  .map-container { min-height: 360px !important; }

  /* ---------- Feedback banner stack ---------- */
  .feedback-banner { grid-template-columns: 1fr !important; }
  .feedback-banner-text, .feedback-banner-form { padding: 28px 22px !important; }
  .feedback-banner h3 { font-size: 38px !important; }

  /* ---------- Booking flow · seats, passenger, payment all stack ---------- */
  .seat-layout, .pax-layout, .pay-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .side-panel, .summary-card { position: relative !important; top: 0 !important; }
  .seat-board-body { padding: 20px !important; }
  .bus-body { padding: 22px 18px 24px 28px !important; }
  .seat-grid { grid-template-columns: 40px 40px 20px 40px 40px !important; gap: 4px 4px !important; }
  .seat-btn { width: 40px !important; height: 40px !important; font-size: 10px !important; }
  .pax-contact { grid-template-columns: 1fr !important; gap: 12px !important; padding: 20px 22px !important; }
  .pax-form-grid { grid-template-columns: 1fr !important; }
  .pax-form-grid .wide { grid-column: 1 !important; }
  .pax-block { grid-template-columns: 80px 1fr !important; }
  .pax-seat-num { font-size: 40px !important; }
  .pax-form { padding: 20px !important; }
  .pay-methods { grid-template-columns: 1fr !important; }
  .bus-header { grid-template-columns: 1fr !important; }
  .trip-stats { gap: 20px; }

  /* ---------- Ticket · stack the stub below ---------- */
  .ticket-body { grid-template-columns: 1fr !important; }
  .ticket-body::before { display: none; }
  .ticket-stub { border-top: 1.5px dashed var(--line-2); }
  .ticket-main { padding: 26px 22px !important; }
  .ticket-grid { grid-template-columns: 1fr 1fr !important; gap: 14px 20px !important; }
  .ticket-route-from, .ticket-route-to { font-size: 32px !important; }
  .actions-row, .next-grid, .small-tiles { grid-template-columns: 1fr !important; }

  /* ---------- My-bookings · stack the row ---------- */
  .booking-row { grid-template-columns: 1fr !important; }
  .booking-date { border-right: 0 !important; border-bottom: 1px dashed var(--line-2); display: flex; gap: 10px; align-items: center; justify-content: center; }
  .booking-date .date-num { font-size: 32px !important; }
  .booking-actions { border-left: 0 !important; border-top: 1px dashed var(--line-2); }
  .countdown-band { grid-template-columns: 1fr !important; padding: 22px !important; gap: 18px !important; text-align: center; }
  .countdown-numbers { justify-content: center; }
  .profile-row { grid-template-columns: 1fr !important; gap: 18px !important; }
  .loyalty { text-align: left !important; }

  /* ---------- Tracking public · stack ---------- */
  .tr-layout { grid-template-columns: 1fr !important; padding: 16px !important; gap: 14px !important; }
  .tr-map { min-height: 320px !important; }

  /* ---------- Admin panels · stack ---------- */
  .panel-grid, .two-col, .master-detail, .income-split, .bottom-grid, .route-atlas, .crew-layout, .inbox-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
  .quickstats, .chalani-stats, .revenue-head-stats { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .quickstats > div, .chalani-stats > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .big-number-strip { grid-template-columns: 1fr !important; }
  .big-number-strip > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .big-number-strip > div:last-child { border-bottom: 0; }
  .bignum-primary { font-size: 52px !important; }
  .method-strip { grid-template-columns: 1fr 1fr !important; }
  .method-strip > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .reconcile-bar { grid-template-columns: 1fr !important; }
  .reconcile-cell { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .crew-grid, .promo-deck, .next-grid { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .verify-grid { grid-template-columns: 1fr !important; }
  .verify-card { grid-template-columns: 90px 1fr !important; }
  .dash-hero { padding: 24px 18px !important; }
  .page-head { padding: 22px 18px !important; }
  .page-head h1 { font-size: 36px !important; }
  .dash-hero h1 { font-size: 40px !important; }
  .page-body, .dash-body { padding: 20px 16px !important; }

  /* ---------- Data tables · horizontal scroll ---------- */
  .panel > table, .card > table { display: block; overflow-x: auto; white-space: nowrap; }
  .dtable th, .dtable td { padding: 8px 10px; font-size: 12.5px; }

  /* ---------- Inbox sidebar · stack ---------- */
  .inbox-shell { display: block !important; height: auto !important; }
  .inbox-side { max-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
  .inbox-detail { padding: 22px 18px !important; }

  /* ---------- Auth page stack ---------- */
  .auth-page { grid-template-columns: 1fr !important; }
  .auth-left, .auth-right { padding: 32px 22px !important; }
  .auth-hero { margin-top: 32px !important; }
  .auth-explain { grid-template-columns: 1fr !important; gap: 16px !important; }
  .auth-stubs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .phone-entry input { font-size: 26px !important; padding: 14px 16px !important; }
  .otp-entry { gap: 6px !important; }
  .otp-box { height: 58px !important; font-size: 30px !important; }

  /* ---------- Tracking live admin map · stack list below map ---------- */
  .fleet-live { grid-template-columns: 1fr !important; }
  .fleet-list, .bus-detail { border-right: 0 !important; border-left: 0 !important; border-top: 1px solid var(--line); }
  .map-wrap { min-height: 360px; }
  .track-layout { grid-template-columns: 1fr !important; }

  /* ---------- Staff counter · stack panels ---------- */
  .counter-shell { grid-template-columns: 1fr !important; grid-template-areas: 'head' 'work' 'summary' 'pay' !important; padding: 10px !important; }
  .counter-pay { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .counter-pay button { grid-column: 1/-1; height: 56px !important; font-size: 14px !important; padding: 0 !important; }

  /* ---------- Driver panel stack ---------- */
  .driver-shell { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; padding: 10px !important; }
  .dr-head { padding: 12px 16px !important; flex-wrap: wrap; gap: 12px; }
  .dr-head > * { flex-shrink: 0; }
  .dr-head .dk-light { font-size: 10px !important; padding: 3px 8px !important; }
  .dr-map-wrap { min-height: 300px !important; }
  .dr-side { max-height: none; }

  /* ---------- Typography scales down ---------- */
  .section-head h2 { font-size: 32px !important; }
  .ticket-route-from, .ticket-route-to { font-size: 30px !important; }
  .stat-num, .bignum-primary { font-size: 48px !important; }
  .confirm-head h1 { font-size: 40px !important; }

  /* Buttons · make tap targets a bit larger */
  .btn { padding: 11px 14px; min-height: 40px; }
  .btn-sm { padding: 7px 10px; min-height: 32px; }

  /* Hide 'crumb' on nav for space */
  .hide-sm { display: none !important; }
}

/* Small phone · 480px and below */
@media (max-width: 480px) {
  .hero h1 { font-size: 42px !important; }
  .route-ribbon, .stats-strip { grid-template-columns: 1fr !important; }
  .route-cell, .stats-strip > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .date-strip { overflow-x: auto; }
  .tabs { overflow-x: auto; white-space: nowrap; }
  .tab { padding: 10px 14px; font-size: 10.5px; }
  .step { padding: 8px 10px; margin-right: 10px; padding-right: 14px; font-size: 10px; }
  .step-num { width: 22px; height: 22px; font-size: 10px; }
  .seat-grid { grid-template-columns: 36px 36px 18px 36px 36px !important; gap: 4px !important; }
  .seat-btn { width: 36px !important; height: 36px !important; }
  .ticket-grid { grid-template-columns: 1fr !important; }
  .today-summary { grid-template-columns: 1fr !important; }
  .today-summary > div { border-right: 0 !important; border-bottom: 1px solid var(--line); }
}

/* Map styling · Leaflet / static SVG */
.map-canvas {
  background: #e8e0cc;
  position: relative;
  overflow: hidden;
}
.map-canvas::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 20 L 40 20' stroke='%23a69485' stroke-width='0.3' fill='none' opacity='0.35'/%3E%3Cpath d='M20 0 L 20 40' stroke='%23a69485' stroke-width='0.3' fill='none' opacity='0.35'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='400' height='400' fill='url(%23p)'/%3E%3Cg fill='none' stroke='%238d6a4c' stroke-width='0.6' opacity='0.5'%3E%3Cpath d='M0 100 Q 100 60 200 120 T 400 100'/%3E%3Cpath d='M0 200 Q 120 160 220 220 T 400 200'/%3E%3Cpath d='M0 300 Q 140 260 240 320 T 400 300'/%3E%3Cpath d='M50 0 Q 100 150 150 200 T 200 400'/%3E%3Cpath d='M250 0 Q 300 120 320 220 T 350 400'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

.pin {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--terra);
  border: 2px solid var(--paper);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(164, 58, 38, 0.4);
}
.pin::after {
  content: '';
  position: absolute; inset: -6px;
  border: 1.5px solid var(--terra);
  border-radius: 999px;
  opacity: 0.4;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* Skinny link */
.link-underline {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-4);
  padding-bottom: 1px;
  transition: border-color .1s ease;
}
.link-underline:hover { border-color: var(--terra); color: var(--terra); }

/* Fine decorative dingbat · mountain peaks */
.peaks::before {
  content: '▴ ▵ ▴';
  letter-spacing: 0.3em;
  color: var(--ink-4);
  font-size: 10px;
}