/* ===== RAILLIVE PREMIUM LAYER — additive only, no overrides of approved layout ===== */
body{animation:pgfade .35s ease}
@keyframes pgfade{from{opacity:.35}to{opacity:1}}

/* Micro-interactions (additive polish) */
.btn,.fchip,.tool,.ticket,.train-card,.hub a{will-change:transform}
.fchip:active,.hub a:active{transform:scale(.96)}
.inp:focus-visible,.dash-search:focus-within,.hero-search:focus-within{box-shadow:var(--ring)}

/* Skeleton shimmer */
.skel{border-radius:8px;margin:.45rem var(--s-5);background:linear-gradient(100deg,rgba(143,179,164,.08) 40%,rgba(143,179,164,.2) 50%,rgba(143,179,164,.08) 60%);background-size:200% 100%;animation:sk 1.1s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* Hero live ticker */
.ticker{display:flex;align-items:center;gap:.6rem;margin-top:var(--s-4);max-width:560px;border:1px solid var(--board-line);border-radius:99px;padding:.45rem .9rem;background:rgba(8,31,23,.55);overflow:hidden}
.ticker .tk{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:#BFD2C8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:tkin .5s ease}
@keyframes tkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Command Center */
.cc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media(max-width:960px){.cc-grid{grid-template-columns:repeat(2,1fr)}}
.cc{background:#081F17;border:1px solid var(--board-line);border-radius:var(--r-lg);padding:var(--s-4);color:var(--paper);position:relative;overflow:hidden}
.cc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;background:repeating-linear-gradient(90deg,transparent 0 39px,#fff 39px 40px)}
.cc .lbl2{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;color:#5F7F72;text-transform:uppercase}
.cc b{display:block;font-family:var(--f-mono);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;color:var(--amber-hi);line-height:1.2}
.cc.ok b{color:#7FE0AE}.cc.bad b{color:#FF9C86}
.cc small{color:#8FB3A4;font-size:.72rem}
.cc-wide{grid-column:span 2}
@media(max-width:640px){.cc-wide{grid-column:span 2}}

/* Analog station clock */
.aclock{width:92px;height:92px;border-radius:50%;background:#F5F1E6;border:4px solid #1B1403;position:relative;flex-shrink:0;box-shadow:inset 0 0 0 3px #fff,2px 3px 0 rgba(0,0,0,.4)}
.aclock i{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;background:#17251F;border-radius:4px}
.aclock .h{width:5px;height:24px;margin-left:-2.5px}
.aclock .m{width:3px;height:33px;margin-left:-1.5px}
.aclock .s{width:1.5px;height:38px;margin-left:-.75px;background:var(--late);transition:transform .2s cubic-bezier(.4,2.2,.6,1)}
.aclock::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#1B1403}
.aclock .tick{position:absolute;left:50%;top:4px;width:2px;height:7px;margin-left:-1px;background:#17251F;transform-origin:50% 42px}

/* Railway signal */
.signal{display:flex;flex-direction:column;gap:6px;background:#141414;border:2px solid #000;border-radius:10px;padding:8px 7px;width:34px;box-shadow:2px 3px 0 rgba(0,0,0,.4)}
.signal span{width:16px;height:16px;border-radius:50%;background:#222;transition:all .4s}
.signal[data-on="g"] .lg{background:#2FD27E;box-shadow:0 0 12px #2FD27E}
.signal[data-on="y"] .ly{background:#FFC63F;box-shadow:0 0 12px #FFC63F}
.signal[data-on="r"] .lr{background:#FF5C3D;box-shadow:0 0 12px #FF5C3D}

/* Notification center */
.notes{display:grid;gap:.5rem}
.note{display:flex;gap:.7rem;align-items:flex-start;background:#0B2E23;border:1px solid var(--board-line);border-radius:var(--r-md);padding:.7rem .9rem;text-decoration:none;transition:border-color .15s,transform .15s}
.note:hover{border-color:rgba(255,198,63,.5);transform:translateX(3px)}
.note .tag{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;padding:.2rem .5rem;border-radius:4px;background:rgba(242,168,29,.16);color:var(--amber-hi);border:1px solid rgba(255,198,63,.35);white-space:nowrap}
.note.late .tag{background:rgba(196,69,43,.2);color:#FF9C86;border-color:rgba(255,156,134,.4)}
.note p{margin:0;font-size:.82rem;color:#C7D6CE;line-height:1.45}

/* Network map */
.mapbox{background:#081F17;border:1px solid var(--board-line);border-radius:var(--r-lg);overflow:hidden;position:relative}
.mapbox svg{display:block;width:100%;height:auto;cursor:grab;touch-action:none}
.mapbox svg:active{cursor:grabbing}
.map-ctl{position:absolute;top:12px;right:12px;display:grid;gap:6px}
.map-ctl button{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--board-line);background:#0B2E23;color:var(--amber-hi);font-size:1.05rem;cursor:pointer}
.map-ctl button:hover{border-color:var(--amber)}
.map-tip{position:absolute;pointer-events:none;background:#FFFDF7;color:var(--ink);border:2px solid #1B1403;box-shadow:3px 3px 0 #1B1403;border-radius:8px;padding:.4rem .7rem;font:600 .78rem var(--f-mono);display:none;z-index:5;white-space:nowrap}
.rail-line{stroke:#2C5B4A;stroke-width:2.4;fill:none;stroke-dasharray:6 4;transition:stroke .2s,stroke-width .2s}
.rail-line.hl{stroke:var(--amber-hi);stroke-width:3.4;stroke-dasharray:none}
.stn-dot{fill:#F5F1E6;stroke:#1C5A44;stroke-width:2;cursor:pointer;transition:r .15s}
.stn-dot:hover{r:7;fill:var(--amber-hi)}
.stn-lb{fill:#8FB3A4;font:500 9px "IBM Plex Mono",monospace;letter-spacing:.06em;pointer-events:none}
.trn-dot{cursor:pointer}
.trn-dot circle{fill:var(--amber);stroke:#1B1403;stroke-width:1.5}
.trn-dot.late circle{fill:#FF5C3D}
.trn-dot .ring{fill:none;stroke:var(--amber-hi);stroke-width:1.5;opacity:.7;animation:mring 2s infinite}
@keyframes mring{from{r:5;opacity:.8}to{r:14;opacity:0}}
.trn-ghost{fill:#FFC63F;opacity:.85}

/* Speedometer */
.gauge-wrap{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center}
@media(max-width:520px){.gauge-wrap{grid-template-columns:1fr;justify-items:center}}
.gauge{width:190px}
.gauge .arc{fill:none;stroke:#12362A;stroke-width:12;stroke-linecap:round}
.gauge .arc2{fill:none;stroke:var(--amber);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.3,1.2,.4,1)}
.gauge .needle{transform-origin:100px 100px;transition:transform .8s cubic-bezier(.3,1.2,.4,1)}
.gauge text{font-family:var(--f-mono)}
.gstats{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem;font-size:.8rem;color:#A9BFB4}
.gstats b{font-family:var(--f-mono);color:#EAF3EE;font-weight:600}
.qbar{height:6px;border-radius:4px;background:#12362A;overflow:hidden;margin-top:3px}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),#7FE0AE);border-radius:4px}

/* GPS coordinates panel rows reuse .kv; countdown */
.count{font-family:var(--f-mono);color:var(--amber-hi);font-variant-numeric:tabular-nums}

/* Flip departure board */
.flip-row{display:grid;grid-template-columns:56px 1fr 110px 76px 92px;gap:var(--s-3);align-items:center;padding:.65rem var(--s-5);border-bottom:1px solid var(--board-line);text-decoration:none}
.flip-row:hover{background:rgba(242,168,29,.06)}
.flip-cols{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;color:#5F7F72;border-bottom:1px solid var(--board-line)}
.flap{font-family:var(--f-mono);font-size:.86rem;color:#EAF3EE;background:#0B2E23;border-radius:5px;padding:.3rem .5rem;display:inline-block;box-shadow:inset 0 -1px 0 rgba(0,0,0,.5),inset 0 10px 0 rgba(255,255,255,.03)}
.flap.pl{color:var(--amber-hi);text-align:center;min-width:2.4ch}
.flip-row.upd .flap{animation:flap .55s ease}
@keyframes flap{0%{transform:rotateX(0)}45%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}
@media(max-width:720px){.flip-row{grid-template-columns:48px 1fr 76px 84px}.flip-row .dest,.flip-cols .dest{display:none}}

/* Search suggestions */
.sug-wrap{position:relative}
.sug{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);border:2px solid #1B1403;border-radius:var(--r-md);box-shadow:4px 4px 0 rgba(23,37,31,.3);z-index:40;overflow:hidden;display:none}
.sug.open{display:block}
.sug .grp{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--muted);padding:.55rem .9rem .2rem;text-transform:uppercase}
.sug a{display:flex;justify-content:space-between;gap:.8rem;padding:.5rem .9rem;text-decoration:none;color:var(--ink);font-size:.9rem}
.sug a:hover,.sug a.on{background:var(--paper-2)}
.sug .mono{font-size:.72rem;color:var(--muted)}

/* Weather + station extras */
.wx{display:flex;align-items:center;gap:var(--s-4)}
.wx .big{font-size:2.4rem;line-height:1}
.wx b{font-family:var(--f-mono);font-size:var(--t-xl);color:var(--pine-deep)}
.busy{height:8px;border-radius:5px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.busy i{display:block;height:100%;background:linear-gradient(90deg,#1E7A4F,var(--amber),#C4452B);border-radius:5px}
.fac{display:flex;flex-wrap:wrap;gap:.4rem}
.fav-btn[aria-pressed="true"]{background:var(--amber-hi)}
@media(prefers-reduced-motion:reduce){.skel,.ticker .tk,.trn-dot .ring,.flip-row.upd .flap{animation:none}}

/* ===== QC polish pass ===== */
.cc.chg{animation:ccpulse .6s ease}
@keyframes ccpulse{0%{box-shadow:0 0 0 0 rgba(255,198,63,.35)}100%{box-shadow:0 0 0 14px rgba(255,198,63,0)}}
/* Hero: deeper atmosphere, no layout change */
.hero{background:radial-gradient(1100px 500px at 85% -10%,rgba(242,168,29,.14),transparent 60%),radial-gradient(700px 380px at -10% 110%,rgba(28,90,68,.5),transparent 60%),linear-gradient(180deg,var(--board) 0%,#0D3126 100%)}
.hero h1 .amber{background:linear-gradient(92deg,var(--amber-hi),#FFDF8E 60%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .board{transform:perspective(1200px) rotateY(-2deg);transition:transform .5s ease}
.hero .board:hover{transform:perspective(1200px) rotateY(0)}
@media(max-width:960px){.hero .board{transform:none}}
/* Board rows: zebra + tighter scan */
.board-row:nth-child(even){background:rgba(255,255,255,.015)}
.board-row:hover .no{color:#FFDF8E}
/* Sections: eyebrow → heading rhythm */
h2{text-wrap:balance}
.lede{text-wrap:pretty;margin-top:var(--s-3)}
/* Cards: layered depth on hover */
.tool:hover,.ticket:hover,.feature:hover{box-shadow:0 14px 34px -12px rgba(23,37,31,.28),0 2px 0 rgba(23,37,31,.06)}
.train-card:hover{box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
/* Stat numbers: signal underline */
.stat b{position:relative;display:inline-block}
.stat b::after{content:"";position:absolute;left:15%;right:15%;bottom:-6px;height:3px;border-radius:2px;background:var(--amber);opacity:.6}
/* Dashboard board: stronger centerpiece framing */
#dashboard .board{box-shadow:0 34px 70px -24px rgba(11,43,33,.5),inset 0 1px 0 rgba(255,255,255,.06)}
/* Tablet pass: 2-col grids breathe */
@media(min-width:641px) and (max-width:960px){
  .cc-grid{gap:var(--s-3)}
  .article-grid{grid-template-columns:1fr}
  .gauge{width:170px}
}
/* Mobile pass: touch targets & type */
@media(max-width:640px){
  .btn{padding:.8rem 1.3rem}
  .fchip{padding:.55rem 1rem}
  .board-cols,.board-row{padding-inline:var(--s-4)}
  .qlinks a{padding:.45rem .8rem}
  .cc b{font-size:1.35rem}
  .hub a{padding:.6rem 1rem}
}