/* AJMN TV Guide.
   Layered on style.css, reusing its palette so the guide reads as part of the
   same network rather than a separate tool. */

:root {
  --amber: #ffb84d;
  --amber-deep: #d87a00;
  --teal: #2aa9a9;
  --ink: #0d1323;
  --panel: #1b2437;
  --panel-2: #151d2c;
  --edge: #4e556d;
  --edge-warm: #6d725b;
  --text: #f8f1e6;
  --muted: #9ba4b8;

  /* One minute of schedule = this many pixels. Drives the whole grid. */
  --ppm: 5.2px;
  --rail-w: 132px;
  --row-h: 74px;
}

.guide-body {
  align-items: flex-start;
  padding: 20px 16px 40px;
}

.guide-shell {
  width: min(1500px, 100%);
}

/* ---------- header ---------- */
.guide-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.guide-brand img {
  width: clamp(120px, 15vw, 170px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.32));
}

.guide-headings { flex: 1 1 260px; }

.guide-headings h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.24rem;
}

.guide-sub {
  margin: 4px 0 0;
  color: var(--amber);
  font-size: 0.86rem;
  letter-spacing: 0.08rem;
}

.guide-clock {
  text-align: right;
  border: 2px solid var(--edge-warm);
  background: linear-gradient(180deg, #2f3250, #171b2a);
  padding: 8px 14px;
  min-width: 132px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15);
}
.guide-clock span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #d7ffd0;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.guide-clock small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06rem; }

.guide-status {
  margin: 0 0 16px;
  padding: 8px 12px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 184, 77, 0.08);
  color: #ffe6b0;
  font-size: 0.88rem;
}
.guide-status[hidden] { display: none; }
.guide-status.error { border-left-color: #ff6b6b; background: rgba(255,107,107,0.1); color: #ffc9c9; }

/* ---------- section headings ---------- */
.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.section-head h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--amber);
}
.pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: #7CFC9B;
  box-shadow: 0 0 0 0 rgba(124, 252, 155, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(124, 252, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 252, 155, 0); }
}

/* ---------- on now ---------- */
.onnow { margin-bottom: 26px; }

/* auto-fit at this min width lands on 6 across at desktop widths (one card per
   channel) and degrades to 3 / 2 / 1 as the viewport narrows. */
.onnow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.onnow-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, #26304a, #1c2334);
  border: 2px solid #7a826e;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.onnow-card:hover { transform: translateY(-3px); border-color: var(--amber); }

.onnow-art {
  width: 58px; height: 84px;
  object-fit: cover;
  background: #0b1020;
  border: 1px solid #39405a;
  flex: none;
}
.onnow-art.placeholder {
  display: grid; place-items: center;
  font-size: 1.5rem; color: #47506d;
}

.onnow-meta { min-width: 0; display: flex; flex-direction: column; }
/* Kept to a single line: "Abbott Elementary 24/7" wrapping made its card taller
   than its neighbours and broke the row's alignment. */
.onnow-chan {
  font-size: 0.68rem; letter-spacing: 0.1rem; text-transform: uppercase;
  color: var(--teal); margin: 0 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onnow-title {
  margin: 0; font-size: 0.98rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onnow-ep {
  margin: 2px 0 0; font-size: 0.8rem; color: #cdd5e4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onnow-time { margin: 6px 0 0; font-size: 0.74rem; color: var(--muted); }

.bar {
  margin-top: auto;
  height: 4px;
  background: #10182a;
  border: 1px solid #333c56;
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
}

/* ---------- listings grid ---------- */
.listings-controls { margin-left: auto; display: flex; gap: 8px; }
.ctl {
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: #1f1204;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  border: 0;
  padding: 7px 11px;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4), inset -1px -1px 0 rgba(0,0,0,0.25);
}
.ctl:hover { filter: brightness(1.08); }
.ctl:active { transform: translateY(1px); }

.grid-wrap {
  display: flex;
  border: 3px solid var(--edge-warm);
  background: var(--panel-2);
  overflow: hidden;
}

/* Channel names stay pinned while the schedule scrolls horizontally. */
.grid-rail {
  width: var(--rail-w);
  flex: none;
  background: linear-gradient(180deg, #222b41, #161d2c);
  border-right: 3px solid var(--edge-warm);
  padding-top: 34px;               /* clears the time bar */
}
.rail-cell {
  height: var(--row-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid #2b3348;
}
.rail-num {
  font-size: 0.92rem; font-weight: 700; color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.rail-name {
  font-size: 0.72rem; color: #cdd5e4; line-height: 1.2;
  overflow: hidden;
}

.grid-scroll { overflow-x: auto; overflow-y: hidden; flex: 1; scroll-behavior: smooth; }
.grid-inner { position: relative; }

.timebar {
  position: sticky; top: 0; z-index: 3;
  height: 34px;
  background: linear-gradient(180deg, #2b3450, #1a2133);
  border-bottom: 2px solid var(--edge-warm);
}
.tick {
  position: absolute; top: 0; height: 34px;
  display: flex; align-items: center;
  padding-left: 8px;
  font-size: 0.74rem; letter-spacing: 0.06rem;
  color: #ffe6b0;
  border-left: 1px solid #3c4664;
  white-space: nowrap;
}
.tick.hour { color: #fff; font-weight: 700; border-left-color: #59648c; }

.rows { position: relative; }
.row {
  position: relative;
  height: var(--row-h);
  border-bottom: 1px solid #2b3348;
}
.row:nth-child(odd) { background: rgba(255,255,255,0.015); }

.prog {
  position: absolute;
  top: 5px; bottom: 5px;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: linear-gradient(180deg, #26304a, #1c2334);
  border: 1px solid #4a5474;
  border-left: 3px solid var(--teal);
  padding: 6px 8px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.prog:hover { border-color: var(--amber); background: linear-gradient(180deg, #2e3a58, #212a3e); }
.prog.live { border-left-color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255,184,77,0.35); }
.prog.past { opacity: 0.5; }

.prog-t {
  font-size: 0.82rem; font-weight: 700; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prog-s {
  font-size: 0.72rem; color: #c2cade; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prog-time { font-size: 0.68rem; color: var(--muted); margin-top: auto; }

.nowline {
  position: absolute; top: 34px; bottom: 0;
  width: 2px; background: #ff5c5c; z-index: 2; pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 92, 92, 0.8);
}
.nowline::before {
  content: "NOW";
  position: absolute; top: -1px; left: 3px;
  background: #ff5c5c; color: #1a0505;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08rem;
  padding: 1px 4px;
}

/* ---------- detail sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 7, 14, 0.72);
  display: grid; place-items: center;
  padding: 20px;
}
.sheet[hidden] { display: none; }

.sheet-card {
  position: relative;
  width: min(620px, 100%);
  max-height: 86vh; overflow: auto;
  background: linear-gradient(180deg, var(--panel), #121826);
  border: 3px solid var(--edge-warm);
  box-shadow: 0 0 0 3px #e5d29f, 0 20px 50px rgba(0,0,0,0.5);
  padding: 22px;
}
.sheet-close {
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: 1px solid var(--edge);
  color: var(--text); width: 30px; height: 30px; cursor: pointer; font-size: 0.9rem;
}
.sheet-close:hover { border-color: var(--amber); color: var(--amber); }

.sheet-body { display: flex; gap: 18px; flex-wrap: wrap; }
.sheet-art {
  width: 148px; height: auto; flex: none;
  border: 1px solid #39405a; background: #0b1020;
}
.sheet-text { flex: 1 1 260px; min-width: 0; }
.sheet-chan {
  margin: 0 0 6px; font-size: 0.7rem; letter-spacing: 0.14rem;
  text-transform: uppercase; color: var(--teal);
}
.sheet-text h3 { margin: 0 0 4px; font-size: 1.3rem; }
.sheet-ep { margin: 0 0 8px; color: #ffe8b7; font-size: 0.95rem; }
.sheet-time { margin: 0 0 12px; color: var(--muted); font-size: 0.85rem; }
.sheet-desc { margin: 0 0 16px; line-height: 1.6; color: #d7dce8; font-size: 0.92rem; }
.sheet-watch {
  display: inline-block;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: #1f1204; text-decoration: none; font-weight: 700;
  padding: 9px 13px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4), inset -1px -1px 0 rgba(0,0,0,0.25);
}

.backlink { color: var(--amber); text-decoration: none; }
.backlink:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 780px) {
  :root { --ppm: 4px; --rail-w: 96px; --row-h: 66px; }
  .guide-clock { min-width: 0; }
  .onnow-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .grid-scroll { scroll-behavior: auto; }
  .onnow-card { transition: none; }
}