/* INFRAX: INFRASTRUCTURE tab summary strip + bikeshare viewport status */
#ix-strip{margin:6px 0 8px}
.ix-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ix-t{position:relative;display:block;text-align:left;border:1px solid var(--line2);background:color-mix(in srgb,var(--cy) 5%,transparent);padding:7px 8px 6px;min-width:0;min-height:68px;color:var(--ink);font:inherit;cursor:pointer;border-radius:0}
.ix-t:hover,.ix-t:focus-visible{border-color:var(--cy);background:color-mix(in srgb,var(--cy) 10%,transparent);outline:none}
.ix-t small{display:flex;align-items:center;gap:5px;color:var(--dim);font-size:10px;letter-spacing:.2em}
.ix-t b{display:block;font:700 17px var(--hd);letter-spacing:.06em;margin-top:3px;color:var(--ink);overflow-wrap:anywhere;line-height:1.1}
.ix-t em{display:block;font-style:normal;color:var(--dim);font-size:10px;letter-spacing:.08em;margin-top:3px;line-height:1.35;overflow-wrap:anywhere}
.ix-t u{position:absolute;right:6px;top:7px;text-decoration:none;color:var(--dim);font-size:10px;letter-spacing:.14em}
.ix-t.ok b{color:var(--ok)}.ix-t.warn b{color:var(--warn)}.ix-t.hot b{color:var(--red2)}
.ix-t.hot{border-color:color-mix(in srgb,var(--red) 50%,transparent)}.ix-t.warn{border-color:color-mix(in srgb,var(--m-gold) 40%,transparent)}
.ix-t.off b,.ix-t.ld b{color:var(--dim)}.ix-t.ld b{animation:ixp 1.2s ease-in-out infinite}
.ix-t.stale u{color:var(--warn);position:static;display:block;margin-top:3px}
.ix-on{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 6px var(--cy)}
.ix-bk{display:flex;gap:8px;align-items:baseline;margin-top:6px;padding:5px 8px;border:1px solid var(--line2);background:color-mix(in srgb,var(--ok) 5%,transparent);font-size:9.5px;letter-spacing:.12em;line-height:1.4}
.ix-bk b{color:var(--ok);letter-spacing:.2em;flex:none}.ix-bk span{color:var(--dim);min-width:0;overflow-wrap:anywhere}
.ix-bk[hidden]{display:none}
/* the longer label must fit the 70px rail and the phone tab strip */
#rail button[data-cat=transport]>span,#catstrip button[data-cat=transport]>span{font-size:10px;letter-spacing:.02em}
@keyframes ixp{50%{opacity:.4}}

@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  #ix-strip{margin:4px 0 6px}
  .ix-g{gap:5px}
  .ix-t{min-height:76px;padding:8px 8px 7px}
  .ix-t b{font-size:16px}
  .ix-t em{font-size:10px}
  .ix-bk{font-size:10px;flex-wrap:wrap;gap:2px 8px}
  /* tabs-c 10/13: 'GRID // GROUND' + 'INFRASTRUCTURE // 6/6 ONLINE' wrapped the head onto 3 lines */
  .lp-head:has(~ #ix-strip) h2{font-size:17px;letter-spacing:.1em;white-space:nowrap}
  .lp-head:has(~ #ix-strip) small{font-size:10px;letter-spacing:.06em;text-align:right}
  .ix-t u,.ix-t small{font-size:10px}
}
@media (prefers-reduced-motion: reduce){.ix-t.ld b{animation:none}}