/* watch.css -- JOB 312: the programme guide (#watch, watch.js). Our own look: the site's colours, theme colours always WITH a text label.
   Phone: the day as a vertical list. Wide screen (900 px +): a horizontal time grid that scrolls sideways, 120 px per hour, a "now" line.
   | Version       | Date       | Change        |
   |---------------|------------|---------------|
   | 2026-10-21-r2 | 2026-10-21 | JOB 322: the DARK cinema look (the page sits inside .cin: cinema.css tokens --cin-*; no own light colours; fixed, so the browser's light mode never turns it white); the running programme's progress bar, "Jump to now", the time-zone line |
   | 2026-10-21-r1 | 2026-10-21 | First version (JOB 312) | */
.watch-page { color-scheme: dark; background: var(--cin-bg); width: 100%; min-width: 0; max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; box-sizing: border-box; color: var(--cin-t1); }
.watch-head h1 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; color: #fff; font-size: 2.1rem; margin: 0 0 4px; }
.watch-head p { color: var(--cin-t2); margin: 0 0 18px; }
.watch-nownext { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
@media (min-width: 700px) { .watch-nownext { grid-template-columns: 3fr 2fr; } }
.watch-card { background: var(--cin-s1); border: 1px solid var(--cin-line); border-left: 6px solid var(--th, #55707d); border-radius: 10px; padding: 14px 16px; }
.watch-card h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cin-t2); margin: 0 0 6px; }
.watch-card-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; }
.watch-card-now .watch-card-title { font-size: 1.45rem; }
.watch-time { font-weight: 400; text-transform: none; letter-spacing: 0; }
.watch-sub { color: var(--cin-t2); margin: 2px 0; }
.watch-credit { font-size: .85rem; color: var(--cin-t2); margin: 6px 0 0; }
.watch-btn { display: inline-block; margin-top: 10px; background: var(--cin-accent); color: #04121f; border: 0; border-radius: 6px; padding: 9px 16px; font-weight: 700; text-decoration: none; cursor: pointer; font-size: .95rem; }
.watch-btn-2 { background: var(--cin-s1); color: var(--cin-t1); border: 1px solid var(--cin-line); }
.watch-btn:focus-visible, .watch-chip:focus-visible, .watch-slot:focus-visible, .watch-tz button:focus-visible { outline: 3px solid var(--cin-accent); outline-offset: 2px; }
.watch-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.watch-bar > * { min-width: 0; }
.watch-days { flex: 1 1 320px; display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.watch-chip { flex: 0 0 auto; border: 1px solid var(--cin-line); background: var(--cin-s1); color: var(--cin-t1); border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: .9rem; }
.watch-chip[aria-selected="true"] { background: var(--cin-t1); color: var(--cin-bg); border-color: var(--cin-t1); }
.watch-tz { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--cin-t2); flex-wrap: wrap; }
.watch-tz button { border: 1px solid var(--cin-line); background: var(--cin-s1); border-radius: 6px; padding: 5px 9px; cursor: pointer; color: var(--cin-t1); }
.watch-tz button[aria-pressed="true"] { background: var(--cin-s2); border-color: var(--cin-accent); font-weight: 700; }
.watch-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.watch-filters label { min-width: 0; max-width: 100%; }
.watch-filters select, .watch-filters input { border: 1px solid var(--cin-line); border-radius: 6px; padding: 7px 8px; font-size: .9rem; background: var(--cin-s1); color: var(--cin-t1); max-width: 100%; }
.watch-search { flex: 1 1 200px; } .watch-search input { width: 100%; box-sizing: border-box; }
.watch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--cin-t2); margin-bottom: 14px; }
.watch-legend-h { font-weight: 700; }
.watch-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--th); margin-right: 5px; vertical-align: -1px; }
.watch-empty { color: var(--cin-t2); padding: 18px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* theme colours (our own palette) */
.watch-th-night_loop { --th: #3b4a6b; } .watch-th-morning_ships { --th: #d49a3a; } .watch-th-how_to_sail { --th: #2f8f83; }
.watch-th-voyages { --th: #1d6fa5; } .watch-th-documentaries { --th: #7a5c99; } .watch-th-magazine { --th: #b5523b; }
.watch-th-prime_time { --th: #a9772e; } .watch-th-classics { --th: #6b7a3a; } .watch-th-other { --th: #7d8b92; }
/* phone: a list */
.watch-hours { display: none; }
.watch-track { display: flex; flex-direction: column; gap: 6px; position: relative; }
.watch-nowline { display: none; }
.watch-slot { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; text-align: left; background: var(--cin-s1); border: 1px solid var(--cin-line);
    border-left: 6px solid var(--th); border-radius: 8px; padding: 9px 12px; cursor: pointer; color: var(--cin-t1); font: inherit; }
.watch-slot-time { grid-row: 1 / span 2; font-weight: 700; font-variant-numeric: tabular-nums; }
.watch-slot-title { font-weight: 700; }
.watch-slot-meta { font-size: .8rem; color: var(--cin-t2); }
.watch-slot.is-now { background: #1b2f45; box-shadow: 0 0 0 2px var(--cin-accent) inset; }
.watch-slot.is-past { opacity: .62; }
.watch-badge { display: inline-block; background: var(--cin-live); color: #fff; font-size: .68rem; padding: 1px 5px; border-radius: 4px; letter-spacing: .05em; }
/* wide screen: a horizontal time grid */
@media (min-width: 900px) {
    .watch-day { overflow-x: auto; border: 1px solid var(--cin-line); border-radius: 10px; background: var(--cin-s2); }
    .watch-grid { position: relative; width: 2880px; padding: 0 0 12px; }
    .watch-hours { display: block; position: relative; height: 26px; border-bottom: 1px solid var(--cin-line); }
    .watch-hours span { position: absolute; left: var(--l); top: 5px; font-size: .78rem; color: var(--cin-t2); padding-left: 4px; border-left: 1px solid var(--cin-line); }
    .watch-track { display: block; height: 96px; margin-top: 10px; }
    .watch-slot { position: absolute; left: var(--l); width: calc(var(--w) - 3px); min-width: 4px; height: 88px; box-sizing: border-box; overflow: hidden;
        display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
    .watch-slot-time { font-size: .8rem; } .watch-slot-title, .watch-slot-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .watch-nowline { display: block; position: absolute; left: var(--l); top: -10px; bottom: -6px; width: 2px; background: var(--cin-live); z-index: 2; }
}
/* the card */
.watch-dialog { position: fixed; inset: 0; background: rgba(4, 9, 14, .72); z-index: 3000; display: flex; align-items: flex-end; justify-content: center; }
.watch-dialog[hidden] { display: none; }
@media (min-width: 700px) { .watch-dialog { align-items: center; } }
.watch-dialog-inner { background: var(--cin-s1); color: var(--cin-t1); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-sizing: border-box; padding: 18px 20px 20px;
    border-radius: 14px 14px 0 0; border-top: 6px solid var(--th); }
@media (min-width: 700px) { .watch-dialog-inner { border-radius: 14px; } }
.watch-dialog-inner h2 { margin: 4px 0 6px; font-size: 1.35rem; }
.watch-dlg-when { color: var(--cin-t2); font-size: .85rem; margin: 0; }
.watch-facts { list-style: none; padding: 0; margin: 10px 0; font-size: .9rem; }
.watch-facts li { margin: 3px 0; } .watch-plays { color: var(--cin-t2); font-size: .8rem; }
.watch-links a { margin-right: 14px; color: #9CCBFF; }
.watch-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* r2 (JOB 322): a button that is a link keeps its dark text (.cin a would make it light blue) */
.cin a.watch-btn { color: #04121f; } .cin a.watch-btn:hover { color: #04121f; filter: brightness(1.08); }
/* r2 (JOB 322): the running programme's progress, "Jump to now", the time-zone line */
.watch-prog { grid-column: 2; display: block; height: 4px; background: var(--cin-line); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.watch-prog i { display: block; height: 100%; width: var(--p, 0%); background: var(--cin-accent); }
@media (min-width: 900px) { .watch-prog { margin-top: auto; } }
.watch-jump { position: sticky; bottom: 14px; z-index: 5; display: block; margin: 10px auto 0; }
.watch-jump[hidden] { display: none; }
.watch-tzline { font-size: .85rem; color: var(--cin-t2); margin: -10px 0 14px; }
.watch-tzline b { color: var(--cin-t1); font-weight: 600; }
.watch-nowmark { font-size: .72rem; color: #fff; background: var(--cin-live); border-radius: 3px; padding: 0 4px; position: absolute; top: -12px; left: 4px; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { .watch-page * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }