/* India Freight Flows, v5: tailboard and sunset */
:root{
  --sky:#F6DEBB; --dusk:#EBA868; --paper:#FBF0DC; --border:#B48C64;
  --ink:#23201C; --ink2:#5A4B3C; --teal:#1F8F95; --teal-d:#156C71;
  --mustard:#F2B01E; --red:#C7362B; --navy:#22344F; --cream:#F7E7CC;
  --snd:#D9542F; --rcv:#1F8F95;
  --disp:"Rozha One",Georgia,serif;
  --body:"Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--sky);color:var(--ink);font:16px/1.45 var(--body)}
body.home{overflow:hidden}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* sunset map */
#map{position:fixed;inset:0;background:linear-gradient(180deg,#F8E6C8 0%,var(--sky) 45%,var(--dusk) 100%)}
.leaflet-container{background:transparent;font-family:var(--body)}
.leaflet-control-attribution{display:none}
.grain{position:fixed;inset:0;pointer-events:none;z-index:700;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 24px;pointer-events:none}
.top>*{pointer-events:auto}
.mark{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.mark .hi{font:400 20px/1.2 var(--disp);color:var(--red)}
.mark .en{font:400 34px/1 var(--disp);color:var(--ink);letter-spacing:-.005em;text-shadow:2px 2px 0 var(--mustard)}
.links{display:flex;gap:8px}
.btn{white-space:nowrap;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:19px;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream);
  text-decoration:none;font-weight:500;font-size:15px;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--ink)}
.short{display:none}
.btn.ghost:hover{background:rgba(35,32,28,.07)}

/* busiest board: a painted signboard */
.board{position:fixed;left:24px;top:116px;z-index:800;width:270px;padding:14px 16px 12px;background:var(--paper);
  border:2px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink)}
.board-h{margin:0 0 8px;font:400 19px/1.1 var(--disp);display:flex;align-items:center;gap:8px}
#top{list-style:none;margin:0;padding:0}
#top li{border-top:1px dashed var(--border)}
#top li:first-child{border-top:0}
#top a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;text-decoration:none;font-size:14.5px}
#top a:hover .r{color:var(--red)}
#top .r{font-weight:500}
#top .v{font-variant-numeric:tabular-nums;color:var(--ink2)}
.board-f{margin:8px 0 0;font-size:13px;color:var(--ink2)}
.empty{color:var(--ink2);font-size:14px;padding:6px 0}

/* key */
.key{position:fixed;left:24px;bottom:132px;z-index:800;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink2)}
.key span{display:flex;align-items:center;gap:8px}
.sw{width:12px;height:12px;border-radius:2px;border:1px solid rgba(35,32,28,.4)}
.sw.snd{background:var(--snd)}.sw.rcv{background:var(--rcv)}
.ln{width:22px;height:0;border-top:3px solid var(--navy);border-radius:2px}

/* tailboard player */
.tail{position:fixed;left:16px;right:16px;bottom:16px;z-index:800;border-radius:10px;overflow:hidden;
  background:var(--teal);color:var(--cream);box-shadow:0 10px 30px rgba(60,30,10,.25)}
.hazard{height:9px;background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--mustard) 10px 20px)}
.tail-in{display:flex;align-items:center;gap:18px;padding:12px 18px 14px;border:2px solid var(--mustard);border-top:0;border-radius:0 0 10px 10px;
  margin:0 4px 4px}
.wheel{width:56px;height:56px;flex:none}
.wheel svg{width:100%;height:100%;display:block}
.wheel.spin svg{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.now{display:flex;flex-direction:column;min-width:170px}
#lbl{font:400 32px/1 var(--disp);color:var(--cream);text-shadow:2px 2px 0 var(--red),3px 3px 0 var(--ink)}
#sub{font-size:14.5px;opacity:.9;margin-top:4px;display:flex;align-items:center;gap:6px}
.ctl{display:flex;gap:6px}
.rb{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(247,231,204,.6);background:transparent;color:var(--cream);cursor:pointer;font-size:12px;letter-spacing:-2px;transition:transform .12s,background .12s}
.rb:hover{background:rgba(247,231,204,.14)}
.rb:active{transform:scale(.93)}
.rb.play{width:46px;height:46px;background:var(--mustard);border-color:var(--mustard);color:var(--ink);font-size:15px;letter-spacing:0}
.seek{flex:1;min-width:120px}
.yrs{position:relative;height:16px;margin-top:4px;font-size:12px;opacity:.85}
.yrs span{position:absolute;transform:translateX(-50%)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:rgba(247,231,204,.35);cursor:pointer;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--mustard);border:2px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--mustard);border:2px solid var(--ink)}
.pick{display:flex;flex-direction:column;gap:7px;width:230px}
.seg{display:flex;padding:2px;border-radius:17px;background:rgba(0,0,0,.18)}
.seg button{flex:1;height:30px;border:0;border-radius:15px;background:transparent;color:var(--cream);cursor:pointer;font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;gap:5px}
.seg button.on{background:var(--cream);color:var(--ink)}
select{height:34px;padding:0 30px 0 12px;border-radius:17px;border:0;background:var(--cream);color:var(--ink);font-weight:500;font-size:14.5px;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;width:100%}

/* estimate mark */
.est{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:700 12px/1 var(--body);cursor:help;flex:none;
  background:var(--mustard);color:var(--ink);border:1px solid var(--ink)}
#tip{position:fixed;z-index:3000;max-width:240px;padding:7px 10px;font-size:13.5px;border-radius:6px;background:var(--ink);color:var(--cream);pointer-events:none}

/* map tooltips */
.leaflet-tooltip.tt{background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);border-radius:6px;padding:8px 11px;box-shadow:3px 3px 0 var(--ink);font:14px/1.45 var(--body)}
.leaflet-tooltip.tt::before{display:none}
.tt b{font-weight:700}.tt .m{color:var(--ink2)}.tt .e{color:var(--red);font-size:12.5px}
.arrow{pointer-events:none}

/* modal */
#modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(35,32,28,.45)}
#modal[hidden]{display:none}
.mbox{position:relative;max-width:460px;margin:20px;padding:26px 26px 18px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--ink)}
.mbox h3{font:400 28px/1.1 var(--disp);margin:0 0 12px}
.mbox p{margin:0 0 12px;font-size:16px;line-height:1.55;max-width:62ch}
.mbox .mf{font-size:14px;color:var(--ink2);border-top:1px dashed var(--border);padding-top:10px}
.x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer}

@media (max-width:900px){
  .top{padding:12px 14px}
  .mark .hi{font-size:14px}.mark .en{font-size:22px;white-space:nowrap}
  .btn .full{display:none}.btn .short{display:inline}
  .btn{height:34px;padding:0 12px;font-size:14px}
  #how{width:34px;padding:0;justify-content:center}#how .full{display:none}#how .short{display:inline}
  .board{display:none}
  .key{display:none}
  .tail{left:8px;right:8px;bottom:8px}
  .tail-in{flex-wrap:wrap;gap:10px 12px;padding:10px 12px 12px}
  .wheel{width:44px;height:44px}
  .now{min-width:0;flex:1}
  #lbl{font-size:26px}
  .seek{order:5;flex-basis:100%}
  .pick{order:6;flex-direction:row;width:100%}
  .pick .seg{flex:0 0 auto}.pick .seg button{padding:0 10px}
  .pick select{flex:1}
}
@media (prefers-reduced-motion:reduce){.wheel.spin svg{animation:none}.btn,.rb{transition:none}}