/* ============================================================
   JSE COMMAND — Shared Design System  ·  "Premium Transit"
   Linked by all four tools AFTER their inline <style>.
   Redefines core tokens + refines components so the whole
   suite inherits one warm, deep, motion-led language.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root, [data-theme="dark"] {
  /* Warm charcoal — depth with a hint of espresso, never cold */
  --bg:#15130E; --sf:#1F1C15; --sf2:#28241B; --sf3:#322D22; --sf4:#3D3729;
  --tx:#F4F0E6; --tx2:#A69D8B; --tx3:#6B6354;
  --bd:rgba(244,240,230,.09); --bd2:rgba(244,240,230,.15); --bd3:rgba(244,240,230,.20);

  /* Single brand accent — luminous gold */
  --acc:#E8AC44; --acc-2:#F2BC5C; --acc-ink:#15130E;
  --acc-bg:rgba(232,172,68,.13); --acc-bd:rgba(232,172,68,.32);
  --bl:#E8AC44; --bl-bg:rgba(232,172,68,.13); --bl-bd:rgba(232,172,68,.32);

  /* Semantic status — color MEANS something */
  --gr:#3FBF7F; --gr-bg:rgba(63,191,127,.13); --gr-bd:rgba(63,191,127,.30);
  --am:#E8AC44; --am-bg:rgba(232,172,68,.13); --am-bd:rgba(232,172,68,.30);
  --rd:#F0654E; --rd-bg:rgba(240,101,78,.13); --rd-bd:rgba(240,101,78,.32);
  --te:#54C7C0; --pu:#B79CF0;

  /* Soft layered depth */
  --sh-sm:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.22);
  --sh-md:0 6px 16px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.26);
  --sh-lg:0 16px 40px rgba(0,0,0,.46), 0 6px 12px rgba(0,0,0,.30);
  --sh-xl:0 32px 80px rgba(0,0,0,.56);
  --glow:0 0 0 1px var(--acc-bd), 0 8px 28px rgba(232,172,68,.22);

  /* Geometry */
  --r-sm:9px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Motion — springs that feel physical */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --spring-soft:cubic-bezier(.34,1.3,.5,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.16s; --t:.26s; --t-slow:.42s;
}

body.light, [data-theme="light"], body.light[data-theme] {
  /* Warm beige is the HERO — paper-soft, gallery-clean */
  --bg:#F4F1E9; --sf:#FFFFFF; --sf2:#F0ECE1; --sf3:#E8E3D6; --sf4:#DED8C8;
  --tx:#1A1814; --tx2:#5C564A; --tx3:#928B7B;
  --bd:rgba(26,24,20,.09); --bd2:rgba(26,24,20,.14); --bd3:rgba(26,24,20,.20);

  --acc:#B5852A; --acc-2:#9A7022; --acc-ink:#FFFFFF;
  --acc-bg:rgba(181,133,42,.10); --acc-bd:rgba(181,133,42,.30);
  --bl:#B5852A; --bl-bg:rgba(181,133,42,.10); --bl-bd:rgba(181,133,42,.30);

  --gr:#2E9E63; --gr-bg:rgba(46,158,99,.11); --gr-bd:rgba(46,158,99,.28);
  --am:#B5852A; --am-bg:rgba(181,133,42,.11); --am-bd:rgba(181,133,42,.28);
  --rd:#D8543C; --rd-bg:rgba(216,84,60,.10); --rd-bd:rgba(216,84,60,.30);
  --te:#1E9B95; --pu:#7C5FD0;

  --sh-sm:0 1px 2px rgba(60,52,30,.06), 0 1px 3px rgba(60,52,30,.08);
  --sh-md:0 6px 18px rgba(60,52,30,.08), 0 2px 5px rgba(60,52,30,.06);
  --sh-lg:0 18px 44px rgba(60,52,30,.12), 0 6px 12px rgba(60,52,30,.07);
  --sh-xl:0 32px 80px rgba(60,52,30,.16);
  --glow:0 0 0 1px var(--acc-bd), 0 10px 30px rgba(181,133,42,.16);
}

/* ---------- 2. GLOBAL POLISH ---------- */
*{ -webkit-tap-highlight-color:transparent; }
body{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--acc-bg), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
::selection{ background:var(--acc-bg); color:var(--tx); }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--bd2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--bd3); background-clip:padding-box; }

/* ---------- 3. COMPONENT REFINEMENTS (override existing classes) ---------- */
/* Overlays — deeper blur, smoother fade */
.ov, .cov, .fov{ transition:opacity var(--t) var(--ease), backdrop-filter var(--t) var(--ease) !important; }
.ov, .cov{ backdrop-filter:blur(10px) saturate(.9); -webkit-backdrop-filter:blur(10px) saturate(.9); }

/* Modals/sheets — spring entrance, refined shadow & radius */
.modal, .cbox, .fov-card, .sheet{
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-xl) !important;
  transition:transform var(--t-slow) var(--spring-soft), opacity var(--t) var(--ease) !important;
}
.cbox{ border-radius:var(--r-lg); }

/* Sidebar items — gentle slide + accent rail on active */
.sb-item, .mi{
  border-radius:var(--r-sm); position:relative;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sb-item:hover, .mi:hover{ background:var(--sf2); transform:translateX(2px); }
.sb-item.act, .sb-item.active{ background:var(--acc-bg); color:var(--acc); }
.sb-item.act::before, .sb-item.active::before{
  content:""; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:99px; background:var(--acc);
  box-shadow:0 0 10px var(--acc);
}

/* Cards — soft depth + lift on hover */
.jse-card, .trip-card, .tcard, .pc, .stat-card{
  background:var(--sf); border:1px solid var(--bd);
  border-radius:var(--r); box-shadow:var(--sh-sm);
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.trip-card:hover, .tcard:hover, .jse-card.clickable:hover{
  box-shadow:var(--sh-md); transform:translateY(-2px); border-color:var(--bd2);
}

/* Buttons — tactile press, never flat */
button, .btn, .jse-btn{ transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); }
button:active, .btn:active, .jse-btn:active{ transform:scale(.96); }

/* Inputs — calm focus ring, 16px min to kill iOS zoom */
input, select, textarea{ font-size:16px !important; }
input:focus, select:focus, textarea:focus, .fi:focus{
  box-shadow:0 0 0 3px var(--acc-bg); border-color:var(--acc-bd) !important; outline:none;
}

/* ---------- 4. NEW PRIMITIVES ---------- */
.jse-btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 18px; border-radius:var(--r-sm); font-weight:650; font-size:13px;
  border:1px solid transparent; cursor:pointer; line-height:1; }
.jse-btn-primary{ background:linear-gradient(180deg, var(--acc-2), var(--acc)); color:var(--acc-ink); box-shadow:var(--sh-sm); }
.jse-btn-primary:hover{ filter:brightness(1.06); box-shadow:var(--sh-md); }
.jse-btn-ghost{ background:var(--sf2); color:var(--tx); border-color:var(--bd); }
.jse-btn-ghost:hover{ background:var(--sf3); }
.jse-btn-danger{ background:var(--rd-bg); color:var(--rd); border-color:var(--rd-bd); }

.jse-chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:var(--r-pill); font-size:11px; font-weight:600;
  background:var(--sf2); border:1px solid var(--bd); color:var(--tx2); }
.jse-chip svg, .jse-chip i{ width:13px; height:13px; }

.jse-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:var(--r-pill); font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.jse-badge.live{ background:var(--gr-bg); color:var(--gr); border:1px solid var(--gr-bd); }
.jse-badge.warn{ background:var(--am-bg); color:var(--am); border:1px solid var(--am-bd); }
.jse-badge.crit{ background:var(--rd-bg); color:var(--rd); border:1px solid var(--rd-bd); }

/* Status dot — pairs color WITH motion so it's never color-only */
.jse-dot{ width:8px; height:8px; border-radius:99px; display:inline-block; flex-shrink:0; }
.jse-dot.live{ background:var(--gr); box-shadow:0 0 0 0 var(--gr); animation:jse-pulse 2s var(--ease-out) infinite; }
.jse-dot.warn{ background:var(--am); }
.jse-dot.crit{ background:var(--rd); animation:jse-pulse-crit 1.1s var(--ease-out) infinite; }
.jse-dot.idle{ background:var(--tx3); }

/* ---------- 5. SKELETON LOADERS ---------- */
.jse-skel{ position:relative; overflow:hidden; background:var(--sf2); border-radius:var(--r-sm); }
.jse-skel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--bd2), transparent);
  transform:translateX(-100%); animation:jse-shimmer 1.4s var(--ease) infinite; }
.jse-skel-row{ height:14px; margin:8px 0; }
.jse-skel-card{ height:74px; margin:10px 0; border-radius:var(--r); }

/* ---------- 6. MOTION LIBRARY ---------- */
@keyframes jse-pulse{ 0%{box-shadow:0 0 0 0 var(--gr-bd)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@keyframes jse-pulse-crit{ 0%{box-shadow:0 0 0 0 var(--rd-bd)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@keyframes jse-shimmer{ 100%{ transform:translateX(100%); } }
@keyframes jse-fade-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes jse-pop{ 0%{ opacity:0; transform:scale(.92); } 60%{ transform:scale(1.02); } 100%{ opacity:1; transform:scale(1); } }
@keyframes jse-tick{ 0%{ transform:translateY(-.5em); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes jse-draw{ to{ stroke-dashoffset:0; } }
.jse-in{ animation:jse-fade-up var(--t) var(--ease-out) both; }
.jse-pop{ animation:jse-pop var(--t) var(--spring) both; }
.jse-stagger > *{ animation:jse-fade-up var(--t) var(--ease-out) both; }
.jse-stagger > *:nth-child(1){ animation-delay:.02s } .jse-stagger > *:nth-child(2){ animation-delay:.06s }
.jse-stagger > *:nth-child(3){ animation-delay:.10s } .jse-stagger > *:nth-child(4){ animation-delay:.14s }
.jse-stagger > *:nth-child(5){ animation-delay:.18s } .jse-stagger > *:nth-child(6){ animation-delay:.22s }
.jse-stagger > *:nth-child(7){ animation-delay:.26s } .jse-stagger > *:nth-child(8){ animation-delay:.30s }
.jse-tick{ display:inline-block; animation:jse-tick .3s var(--spring); }

/* ---------- 7. COMMAND PALETTE (⌘K) ---------- */
.jcmd-scrim{ position:fixed; inset:0; z-index:99998; background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px) saturate(.85); -webkit-backdrop-filter:blur(8px) saturate(.85);
  opacity:0; transition:opacity var(--t) var(--ease); display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
.jcmd-scrim.on{ opacity:1; }
.jcmd{ width:min(620px,92vw); max-height:64vh; display:flex; flex-direction:column;
  background:var(--sf); border:1px solid var(--bd2); border-radius:var(--r-lg);
  box-shadow:var(--sh-xl); overflow:hidden; transform:translateY(-14px) scale(.98); opacity:0;
  transition:transform var(--t) var(--spring-soft), opacity var(--t) var(--ease); }
.jcmd-scrim.on .jcmd{ transform:none; opacity:1; }
.jcmd-search{ display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--bd); }
.jcmd-search i, .jcmd-search svg{ width:19px; height:19px; color:var(--tx3); flex-shrink:0; }
.jcmd-search input{ flex:1; background:none; border:none; outline:none; box-shadow:none !important;
  color:var(--tx); font-size:17px !important; font-weight:500; }
.jcmd-search input::placeholder{ color:var(--tx3); }
.jcmd-kbd{ font-size:10px; font-weight:700; color:var(--tx3); border:1px solid var(--bd2);
  border-radius:6px; padding:3px 6px; background:var(--sf2); }
.jcmd-list{ overflow-y:auto; padding:7px; }
.jcmd-sect{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx3); padding:10px 12px 5px; }
.jcmd-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm);
  cursor:pointer; color:var(--tx); transition:background var(--t-fast) var(--ease); }
.jcmd-item .jc-ico{ width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--sf2); border-radius:9px; color:var(--acc); }
.jcmd-item .jc-ico i, .jcmd-item .jc-ico svg{ width:16px; height:16px; }
.jcmd-item .jc-body{ flex:1; min-width:0; }
.jcmd-item .jc-title{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jcmd-item .jc-sub{ font-size:11.5px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jcmd-item.sel{ background:var(--acc-bg); }
.jcmd-item.sel .jc-ico{ background:var(--acc); color:var(--acc-ink); }
.jcmd-empty{ padding:34px; text-align:center; color:var(--tx3); font-size:13.5px; }

/* ---------- 8. LIVE ROUTE TIMELINE ---------- */
.jtl{ position:relative; padding:4px 0 4px 4px; }
.jtl-stop{ position:relative; display:flex; gap:14px; padding:0 0 4px 0; }
.jtl-rail{ position:relative; width:26px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.jtl-node{ width:15px; height:15px; border-radius:99px; border:2px solid var(--bd3); background:var(--sf);
  z-index:2; margin-top:3px; transition:all var(--t) var(--spring); }
.jtl-line{ width:2px; flex:1; background:var(--bd2); margin:2px 0; border-radius:2px; }
.jtl-stop.done .jtl-node{ background:var(--gr); border-color:var(--gr); }
.jtl-stop.done .jtl-line{ background:var(--gr); }
.jtl-stop.current .jtl-node{ background:var(--acc); border-color:var(--acc); transform:scale(1.35);
  box-shadow:0 0 0 5px var(--acc-bg), 0 0 14px var(--acc); }
.jtl-stop.current .jtl-node::after{ content:""; position:absolute; inset:-7px; border-radius:99px;
  border:2px solid var(--acc); opacity:.5; animation:jtl-ping 1.8s var(--ease-out) infinite; }
.jtl-body{ flex:1; min-width:0; padding-bottom:18px; }
.jtl-stop:last-child .jtl-line{ display:none; }
.jtl-name{ font-size:14.5px; font-weight:650; color:var(--tx); }
.jtl-stop.done .jtl-name{ color:var(--tx2); }
.jtl-meta{ display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:4px; font-size:11.5px; color:var(--tx3); }
.jtl-meta b{ color:var(--tx2); font-weight:650; }
.jtl-eta{ margin-left:auto; font-size:12px; font-weight:700; color:var(--acc); font-variant-numeric:tabular-nums; }
@keyframes jtl-ping{ 0%{ transform:scale(.9); opacity:.6 } 80%,100%{ transform:scale(2.2); opacity:0 } }

/* moving bus marker that travels the rail on the current stop */
.jtl-bus{ position:absolute; left:-2px; width:22px; height:22px; border-radius:99px;
  background:var(--acc); color:var(--acc-ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px var(--acc-bd); z-index:3; }
.jtl-bus i, .jtl-bus svg{ width:13px; height:13px; }

/* ---------- 9. TOAST ---------- */
.jse-toasts{ position:fixed; z-index:99999; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none; }
.jse-toast{ display:flex; align-items:center; gap:10px; padding:12px 17px; border-radius:var(--r-pill);
  background:var(--sf); border:1px solid var(--bd2); box-shadow:var(--sh-lg); color:var(--tx);
  font-size:13.5px; font-weight:550; animation:jse-pop .34s var(--spring) both; pointer-events:auto; max-width:90vw; }
.jse-toast .jt-ico{ width:18px; height:18px; flex-shrink:0; }
.jse-toast.ok .jt-ico{ color:var(--gr); } .jse-toast.err .jt-ico{ color:var(--rd); } .jse-toast.info .jt-ico{ color:var(--acc); }
.jse-toast.out{ animation:jse-toast-out .3s var(--ease) forwards; }
@keyframes jse-toast-out{ to{ opacity:0; transform:translateY(8px) scale(.96); } }

/* ---------- 10. ACCESSIBILITY / MOTION SAFETY ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
}

/* ---------- 11. LIVE FLEET MAP (Leaflet overrides) ---------- */
/* Gold bus marker */
.jse-busmark-wrap{ background:none !important; border:none !important; }
.jse-busmark{
  width:30px; height:30px; border-radius:999px;
  background:var(--acc); color:var(--acc-ink);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--sf);
  box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(232,172,68,.25);
  transition:transform .25s var(--ease,ease);
}
.jse-busmark:hover{ transform:scale(1.12); }
.leaflet-marker-icon.jse-busmark-wrap{ transition:transform .6s cubic-bezier(.4,0,.2,1); }
/* Popup themed to tokens */
.jse-pop-wrap .leaflet-popup-content-wrapper{
  background:var(--sf); color:var(--tx); border:1px solid var(--bd2);
  border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.jse-pop-wrap .leaflet-popup-tip{ background:var(--sf); border:1px solid var(--bd2); }
.jse-pop-wrap .leaflet-popup-content{ margin:10px 13px; }
.jse-pop-title{ font-size:13px; font-weight:700; color:var(--acc); margin-bottom:6px; }
.jse-pop-row{ display:flex; justify-content:space-between; gap:18px; font-size:11px; padding:2px 0; }
.jse-pop-row span{ color:var(--tx3); }
.jse-pop-row b{ color:var(--tx); font-weight:600; }
.jse-pop-wrap a.leaflet-popup-close-button{ color:var(--tx3); }
/* Controls + attribution on dark surfaces */
.leaflet-control-attribution{ background:rgba(0,0,0,.55) !important; color:var(--tx3) !important; }
.leaflet-control-attribution a{ color:var(--tx2) !important; }
body.light .leaflet-control-attribution{ background:rgba(255,255,255,.75) !important; }
.leaflet-bar a{ background:var(--sf) !important; color:var(--tx) !important; border-color:var(--bd) !important; }
.leaflet-bar a:hover{ background:var(--sf2) !important; }