/* GLCH guide.php. Every rule that sets display has an explicit [hidden] override. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #0d0d10; color: #e9e6f2; font: 400 15px "Barlow", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
#gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: linear-gradient(180deg, #25314d, #12151f); }
#gh h1 { margin: 0; font: 700 28px "Barlow Condensed", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#gh-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#gh-ctl button { background: #20263a; color: #fff; border: 1px solid #39425f; border-radius: 6px; padding: 7px 12px; cursor: pointer; font: 600 14px "Barlow", Arial, sans-serif; }
#gh-ctl button:hover { background: #2c3552; }
#g-day { color: #aab; margin-left: 6px; }
main { padding: 14px 12px 40px; }
.msg { color: #aaa; padding: 24px; text-align: center; }
.foot { color: #889; font-size: 13px; text-align: center; margin-top: 14px; }
#live-strip { background: #1a1127; border: 1px solid #4b2b78; border-radius: 8px; padding: 10px 12px; margin: 0 4px 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#live-strip[hidden] { display: none !important; }
#live-strip b { color: #e0201b; letter-spacing: .12em; }
#live-strip a { background: #2a1a44; border-radius: 6px; padding: 5px 10px; }
#live-strip a:hover { background: #3a2560; }
#grid-wrap { overflow-x: auto; border: 1px solid #23232b; border-radius: 8px; background: #101015; position: relative; }
#grid { position: relative; min-width: max-content; }
.g-head, .g-row { display: flex; }
.g-head { position: sticky; top: 0; z-index: 3; background: #15151c; border-bottom: 1px solid #2a2a35; }
.g-name { flex: 0 0 150px; position: sticky; left: 0; z-index: 4; background: #15151c; padding: 12px 10px; font: 700 16px "Barlow Condensed", Arial, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; border-right: 1px solid #2a2a35; display: flex; align-items: center; }
.g-row .g-name a:hover { text-decoration: underline; }
.g-time { position: relative; height: 38px; flex: 0 0 auto; }
.g-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #2a2a35; padding: 10px 6px; font-size: 13px; color: #aab; white-space: nowrap; }
.g-row { border-bottom: 1px solid #1b1b23; }
.g-prog { position: relative; height: 66px; flex: 0 0 auto; }
.g-cell { position: absolute; top: 4px; bottom: 4px; padding: 6px 9px; background: #20263a; border: 1px solid #323a57; border-radius: 6px; overflow: hidden; display: block; }
.g-cell:hover { background: #2b3454; z-index: 2; }
.g-cell.now { background: #2b3f6e; border-color: #5b78c8; }
.g-cell.gap { background: #17171d; border-style: dashed; color: #889; }
.g-cell .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cell .s { color: #aab; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: #e0201b; z-index: 5; pointer-events: none; }

#soon { margin-top: 22px; }
#soon[hidden] { display: none !important; }
#soon h2 { font: 700 20px "Barlow Condensed", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; margin: 0 4px 8px; }
.soon-row { display: flex; gap: 14px; align-items: baseline; padding: 9px 12px; background: #15151c; border: 1px solid #23232b; border-radius: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.soon-row:hover { background: #1d1d27; }
.soon-when { color: #9db4ff; min-width: 150px; font-weight: 600; } .soon-t { flex: 1; min-width: 200px; } .soon-c { color: #99a; font-size: 13px; }

.g-sep { width: 1px; height: 22px; background: #39425f; margin: 0 4px; }
#g-zoomval { color: #aab; min-width: 44px; text-align: center; font-size: 13px; }
.g-cell.narrow .s { display: none; }
.g-cell.narrow .t { font-size: 12px; }