/* Trains Now. Station-sign vocabulary: black ground, white Helvetica-ish type, and the line
   colours doing all the work, because those colours are the one piece of design every New
   Yorker already knows. */
:root{
  --black:#0A0A0B;
  --panel:#131417;
  --line:#26282E;
  --white:#F2F3F5;
  --dim:#9195A0;
  --live:#00CC6A;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);overflow:hidden}
#map{position:absolute;inset:0}

/* ---------------------------------------------------------------- header */
.head{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:20px;
  padding:12px 18px;background:linear-gradient(180deg,rgba(10,10,11,.94),rgba(10,10,11,.75) 70%,transparent);
  pointer-events:none;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:11px}
.bullet{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--white);color:var(--black);font:700 20px/1 var(--sans)}
.head h1{margin:0;font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.head p{margin:2px 0 0;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.live{margin-left:auto;display:flex;align-items:center;gap:9px;background:rgba(19,20,23,.9);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;pointer-events:auto}
.live b{font:700 1.1rem/1 var(--mono);font-variant-numeric:tabular-nums}
.live span{font:600 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pip{width:8px;height:8px;border-radius:50%;background:var(--dim);margin-left:6px}
.pip.on{background:var(--live);animation:beat 2.5s ease-out infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(0,204,106,.5)}70%{box-shadow:0 0 0 8px rgba(0,204,106,0)}100%{box-shadow:0 0 0 0 rgba(0,204,106,0)}}

/* ---------------------------------------------------------------- rail */
.rail{position:absolute;top:70px;left:18px;bottom:18px;width:290px;z-index:5;background:rgba(19,20,23,.94);
  border:1px solid var(--line);border-radius:4px;padding:16px;display:flex;flex-direction:column;
  gap:14px;overflow-y:auto;backdrop-filter:blur(6px)}
.rail h2{margin:0;font:600 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.lines{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 5px;border-radius:999px;
  background:transparent;border:1px solid var(--line);cursor:pointer;color:var(--white);
  font:700 .72rem/1 var(--mono);font-variant-numeric:tabular-nums;transition:border-color .15s ease,background-color .15s ease}
.chip:hover{border-color:var(--dim)}
.chip.on{background:rgba(242,243,245,.1);border-color:var(--white)}
.chip i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font:700 11px/1 var(--sans);color:#fff}
.chip.dark i{color:#111}

.detail{flex:1;border-top:1px solid var(--line);padding-top:14px}
.hint{margin:0;color:var(--dim);font-size:.84rem;line-height:1.55}
.trainHead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.trainHead i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font:700 17px/1 var(--sans);color:#fff}
.trainHead b{font-size:1.02rem}
.trainHead span{display:block;font:600 .58rem/1.3 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.stopList{list-style:none;margin:0;padding:0}
.stopList li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:.86rem}
.stopList li:first-child{color:var(--white)}
.stopList em{font-style:normal;color:var(--dim)}
.stopList b{font:700 .8rem/1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fine{margin:0;font-size:.68rem;line-height:1.6;color:var(--dim)}
.fine a{color:var(--white)}

@media (max-width:860px){
  .rail{position:static;width:auto;margin:78px 12px 12px;max-height:44vh}
  body{overflow:auto}
  #map{position:fixed}
}