/* Sito pubblico: identità RailPulse («Fahrplan Mechanics»). Si carica dopo style.css e brand.css e ne sostituisce l'aspetto:
   piatto, filetti al posto dei riquadri arrotondati, un solo accento ambra. */
.brand { font-family: var(--rp-display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: .01em; gap: 10px; }
.brand-name b { color: var(--rp-amber); margin-left: 0; font-weight: 700; }
.logo { width: 30px; height: 30px; border-radius: 5px; background: url("/icon.svg") center / cover no-repeat; box-shadow: none; }
#time { font-family: var(--rp-display); font-weight: 700; font-size: clamp(2.6rem, 5.2vw, 4.2rem); letter-spacing: 0; line-height: .9; }
#date { font-size: .85rem; text-transform: none; letter-spacing: .02em; color: var(--rp-dim); }
.ico, select { background: var(--rp-ink); border: 1px solid #5a564c; border-radius: 4px; }
.ico:hover, select:hover { border-color: var(--rp-paper); }

.pane { background: var(--rp-ink); border: 1px solid var(--rp-rule); border-radius: 6px; }
#mapPane { background: var(--rp-ink); }
.legend { font-family: var(--rp-mono); font-size: .78rem; }
.legend .dot { box-shadow: none; width: 11px; height: 11px; }
.legend .lg b, .legend .count b { color: var(--rp-paper); font-weight: 400; }
.banner { background: var(--rp-amber); color: var(--rp-ink); border: 0; border-radius: 4px; font-weight: 700; }
.rewind input { accent-color: var(--rp-amber); }
.live { border-radius: 4px; background: var(--rp-ink); border-color: #5a564c; font-family: var(--rp-mono); letter-spacing: .06em; }
.live.on { background: var(--rp-amber); color: var(--rp-ink); border-color: var(--rp-amber); }
.live.on::before { color: var(--rp-ink); }
.speed { border-radius: 4px; background: var(--rp-ink); border-color: #5a564c; font-family: var(--rp-mono); }
.speed.on { background: var(--rp-amber); color: var(--rp-ink); border-color: var(--rp-amber); }
.rlbl { font-family: var(--rp-mono); }
.rlbl.tl { color: var(--rp-amber); }
.tip { background: var(--rp-ink2); backdrop-filter: none; border: 1px solid #5a564c; border-radius: 4px; box-shadow: none; }
.tip .s { color: var(--rp-dim); }

/* Tabellone: come l'orario cartaceo */
.bhead { padding-bottom: 12px; }
.kicker { text-transform: none; letter-spacing: .01em; font-size: .85rem; color: var(--rp-dim); }
h1 { font-family: var(--rp-display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .95; letter-spacing: 0; }
#q { background: var(--rp-ink); border: 1px solid #5a564c; border-radius: 4px; height: 44px; }
#q:focus { border-color: var(--rp-amber); box-shadow: none; outline: 2px solid var(--rp-amber); outline-offset: 1px; }
#results { background: var(--rp-ink2); border: 1px solid #5a564c; border-radius: 4px; box-shadow: none; }
#results li { border-radius: 2px; }
#results li:hover, #results li:focus { background: var(--rp-amber); color: var(--rp-ink); }
.chip { background: transparent; border: 1px solid #5a564c; border-radius: 4px; color: var(--rp-dim); }
.chip.on { color: var(--rp-ink); background: var(--rp-paper); border-color: var(--rp-paper); font-weight: 700; }
.upd { color: #7d786c; }
.cols { font-family: var(--rp-sans); text-transform: none; letter-spacing: .02em; font-size: .78rem; color: var(--rp-dim); border-bottom: 2px solid var(--rp-paper); }
#rows li { border-radius: 0; border-bottom: 1px solid var(--rp-rule); }
#rows li:nth-child(odd) { background: none; }
.t { font-weight: 700; }
.t small.mid { color: var(--rp-amber); } .t small.bad { color: var(--rp-brick); }
.badge { border-radius: 3px; box-shadow: none; border: 1.5px solid var(--rp-paper); background: transparent; color: var(--rp-paper); font-weight: 700; }
.badge.ic, .badge.ir { background: var(--rp-paper); color: var(--rp-ink); }
.badge.s, .badge.re { background: transparent; color: var(--rp-paper); }
.badge.bus, .badge.tram, .badge.ship { background: var(--rp-amber); border-color: var(--rp-amber); color: var(--rp-ink); }
.dest { font-weight: 600; }
.plat { font-family: var(--rp-mono); font-weight: 400; color: var(--rp-dim); }
.mins.soon { color: var(--rp-amber); animation: none; }

.tabs button { background: transparent; border: 1px solid #5a564c; border-radius: 4px; color: var(--rp-dim); }
.tabs button.on { color: var(--rp-ink); background: var(--rp-paper); border-color: var(--rp-paper); font-weight: 700; }
.mc-btn { background: var(--rp-ink); backdrop-filter: none; border: 1px solid #5a564c; border-radius: 4px; }
.mc-btn:hover, .mc-btn[aria-expanded="true"] { border-color: var(--rp-amber); background: var(--rp-ink); }
.mc-flag { color: var(--rp-amber); }
.mc-menu { background: var(--rp-ink2); backdrop-filter: none; border: 1px solid #5a564c; border-radius: 4px; box-shadow: none; }
.mc-menu li { border-radius: 2px; }
.mc-menu li b { background: var(--rp-rule); border-radius: 2px; color: var(--rp-dim); font-family: var(--rp-mono); }
.mc-menu li:hover, .mc-menu li:focus { background: var(--rp-rule); }
.mc-menu li.on { background: var(--rp-paper); color: var(--rp-ink); } .mc-menu li.on b { background: var(--rp-amber); color: var(--rp-ink); }
.credit { font-family: var(--rp-mono); }
.donate { color: var(--rp-amber); }

/* La sigla R è già nell'icona dell'app: nell'intestazione basta la scritta */
.brand .logo { display: none; }
@media (max-width: 900px) { .legend { font-family: var(--rp-sans); font-size: .7rem; } }
@media (max-width: 900px) { .legend { background: rgba(15,14,12,.88); padding: 4px 8px; border-radius: 4px; } #q { font-size: .9rem; padding: 0 10px; } }