/* ============================================================
   RideFlow — Design System
   "Visible math." Transparent mobility OS.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Brand */
  --flow:      #00D9A5;   /* Flow Green  — primary / driver share */
  --flow-ink:  #00875f;   /* readable green text on light */
  --driver:    #FF6B35;   /* Driver Orange — driver action */
  --carbon:    #111113;   /* Carbon Black */
  --cloud:     #F6F8FA;   /* Soft Cloud surface */
  --street:    #D9DEE3;   /* Street Gray — maps/neutral */
  --signal:    #EF4444;   /* Signal Red — alert */

  /* Neutrals (cool, low-sat) */
  --ink:       #111113;
  --ink-2:     #3a3d42;
  --ink-3:     #6b7177;
  --ink-4:     #9aa1a8;
  --line:      #e7eaee;
  --line-2:    #eef1f4;
  --surface:   #ffffff;
  --bg:        #F6F8FA;

  /* tints */
  --flow-tint: #e3fbf3;
  --flow-tint2:#cdf6e8;
  --driver-tint:#fff0e9;
  --carbon-tint:#f0f1f3;

  --radius:   20px;
  --radius-sm:12px;
  --radius-lg:28px;
  --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(17,17,19,.05), 0 1px 3px rgba(17,17,19,.04);
  --shadow:    0 4px 16px rgba(17,17,19,.07), 0 1px 3px rgba(17,17,19,.05);
  --shadow-lg: 0 18px 50px rgba(17,17,19,.14), 0 6px 16px rgba(17,17,19,.07);
  --shadow-up: 0 -8px 30px rgba(17,17,19,.10);

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--flow); color:#04241b; }

/* ---------- type helpers ---------- */
.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; }
.tnum{ font-variant-numeric:tabular-nums; }
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; border-radius:var(--radius-pill);
  padding:14px 22px; transition:transform .12s ease, background .15s ease, box-shadow .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-flow{ background:var(--flow); color:#04241b; }
.btn-flow:hover{ background:#00c697; }
.btn-driver{ background:var(--driver); color:#fff; }
.btn-driver:hover{ background:#f15a20; }
.btn-dark{ background:var(--carbon); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:var(--carbon-tint); color:var(--ink); }
.btn-ghost:hover{ background:#e6e8ec; }
.btn-outline{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink-4); }
.btn-block{ width:100%; }
.btn-lg{ padding:17px 26px; font-size:16px; }

/* ---------- pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--radius-pill);
  background:var(--carbon-tint); color:var(--ink-2);
}
.pill-flow{ background:var(--flow-tint); color:var(--flow-ink); }
.pill-driver{ background:var(--driver-tint); color:#c4441b; }
.pill-signal{ background:#fdeaea; color:#c4302a; }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.dot-live{ box-shadow:0 0 0 0 rgba(0,217,165,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(0,217,165,.5)} 70%{box-shadow:0 0 0 7px rgba(0,217,165,0)} 100%{box-shadow:0 0 0 0 rgba(0,217,165,0)} }

/* ---------- cards ---------- */
.card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-flat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }

/* ============================================================
   THE FARE SPLIT BAR  — signature motif
   Rider pays → Driver earns (Flow Green) · Platform keeps (Carbon)
   ============================================================ */
.split{ width:100%; }
.split-track{
  display:flex; height:14px; border-radius:var(--radius-pill); overflow:hidden;
  background:var(--carbon-tint); gap:2px;
}
.split-track.tall{ height:20px; }
.split-driver{ background:var(--flow); height:100%; transition:width .5s cubic-bezier(.4,0,.2,1); }
.split-platform{ background:var(--carbon); height:100%; transition:width .5s cubic-bezier(.4,0,.2,1); }
.split-legend{ display:flex; justify-content:space-between; margin-top:10px; }
.split-leg{ display:flex; align-items:center; gap:7px; }
.split-leg .swatch{ width:9px; height:9px; border-radius:3px; }
.split-leg .swatch.d{ background:var(--flow); }
.split-leg .swatch.p{ background:var(--carbon); }
.split-leg .lbl{ font-size:12px; color:var(--ink-3); font-weight:500; }
.split-leg .val{ font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ink); }

/* fare ledger rows */
.ledger{ display:flex; flex-direction:column; }
.ledger-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; }
.ledger-row + .ledger-row{ border-top:1px dashed var(--line); }
.ledger-row .k{ font-size:14px; color:var(--ink-3); display:flex; align-items:center; gap:9px; }
.ledger-row .v{ font-family:var(--mono); font-weight:600; font-size:15px; }
.ledger-row.total .k{ color:var(--ink); font-weight:600; font-size:15px; }
.ledger-row.total .v{ font-size:20px; font-weight:700; }
.ledger-row.earn .v{ color:var(--flow-ink); }
.tag-tick{ width:18px; height:18px; border-radius:6px; display:grid; place-items:center; flex:none; }
.tag-tick.d{ background:var(--flow-tint); }
.tag-tick.p{ background:var(--carbon-tint); }

/* ---------- schematic map ---------- */
.map{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(150,160,170,.10) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(150,160,170,.10) 54px 56px),
    #e9edf0;
}
.map.dark{
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.045) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.045) 54px 56px),
    #1a1c1f;
}
.map .block{ position:absolute; border-radius:5px; background:rgba(120,132,144,.13); }
.map.dark .block{ background:rgba(255,255,255,.04); }
.map .park{ background:rgba(0,217,165,.12); }
.map .water{ background:rgba(80,150,220,.14); }
.map .route{ position:absolute; }
.map .pin{
  position:absolute; transform:translate(-50%,-100%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.22));
}
.pin-dot{
  position:absolute; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%; border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* scrollbars (admin) */
.thin-scroll::-webkit-scrollbar{ width:10px; height:10px; }
.thin-scroll::-webkit-scrollbar-thumb{ background:#d4d9df; border-radius:10px; border:3px solid var(--bg); }
.thin-scroll::-webkit-scrollbar-track{ background:transparent; }

/* utility */
.flex{ display:flex; } .col{ flex-direction:column; }
.items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.muted{ color:var(--ink-3); }
.center{ text-align:center; }