/* shared.css — styling shared by several Odeon pages, so a change is made
   ONCE here instead of in every page (clean-up step 2, 25 Sept 2026).

   Loaded AFTER each page's own <style> block, so these rules keep the same
   place in the cascade they had when they lived inside the pages (e.g. a
   coloured Gantt star stays coloured on hover).

   ── Must See + Going colours ────────────────────────────────────────────
   Level 3 = most important. Colour history: green/amber/red = 1/2/3
   (18 Sept); flipped so green = top, level 1 grey (22 Sept); Going red ->
   violet (24 Sept). To recolour, change the variables below - every page
   picks it up. Pages use them for their own row/label/cell backgrounds.
     --msN        star, underline and badge colour for level N
     --msN-tint   background of a Must See row / label / combo box
     --msN-cell   Gantt day-cell background (a shade lighter than the tint) */
:root {
  --ms1: #a3acbb;  --ms1-tint: #363b44;  --ms1-cell: #474e5a;   /* level 1: grey */
  --ms2: #ffd43b;  --ms2-tint: #4a4320;  --ms2-cell: #5e5528;   /* level 2: light yellow */
  --ms3: #3fb950;  --ms3-tint: #24433a;  --ms3-cell: #2d5a46;   /* level 3: green (top) */
  --going: #c792ff; --going-tint: #3e2d5c; --going-cell: #50397a; /* last few days */
}

/* The Must See star, wherever a page shows one (Listings, Double Bills, Gantt). */
.must-see-star.lvl-1 { color: var(--ms1); }
.must-see-star.lvl-2 { color: var(--ms2); }
.must-see-star.lvl-3 { color: var(--ms3); }

/* Must See film titles in the checklists (Listings, Double Bills). */
.must-see-title.lvl-1 { text-decoration: underline; text-decoration-color: var(--ms1); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.must-see-title.lvl-2 { text-decoration: underline; text-decoration-color: var(--ms2); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.must-see-title.lvl-3 { text-decoration: underline; text-decoration-color: var(--ms3); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ── Page background + menu (clean-up step 4, 25/28 Sept 2026) ──
   Only the properties IDENTICAL on every page. Anything that differs
   between pages (Gantt's smaller nav-link font, its nav margin, its body
   padding, pad's flex body) is a DIFFERENT property, left in that page's
   own <style> as a small residual rule - so it never collides with this
   file regardless of load order. */
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: #0d1628; color: #ffffff; }
nav { background: #0a1020; border-bottom: 1px solid #1a2a40; padding: .7rem 1.2rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.nav-link { font-weight: 900; font-style: italic; color: #4a6a9a; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; transition: color .15s; }
.nav-link:hover { color: #8899bb; }

/* Booked marker (booked.js, 9 Oct 2026) - green button/badge + green times;
   Gantt bars get a gold outline and a tick. Deliberately no row tint, so it
   never competes with the Must See importance colours. */
.book-btn { margin-left: auto; flex: 0 0 auto; font: inherit; font-size: .68rem; line-height: 1.3; cursor: pointer;
  color: #7f9bc0; background: transparent; border: 1px solid #2a4468; border-radius: 4px; padding: .05rem .4rem; white-space: nowrap; }
.book-btn:hover { color: #ffffff; border-color: #6fb8ff; }
.book-btn.on { color: #ffffff; background: #1f9a52; border-color: #1f9a52; font-weight: 700; }
.is-booked .show-times, .is-booked .show-times strong,
.is-booked .bill-film-times, .is-booked .bill-film-times strong { color: #5fd08a; }
.seg.is-booked { outline: 2px solid #e6b84a; outline-offset: 1px; z-index: 2; }
.seg.is-booked::before { content: '\2713'; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 2px #000; }
/* Phones: the unbooked button shrinks to a "+" so it can't crowd out film titles;
   once booked it is a green tick (the full "Booked" word shows on wider screens). */
@media (max-width: 600px) {
  .book-btn, .book-btn.on { font-size: 0; width: 1.5rem; height: 1.3rem; padding: 0; text-align: center; }
  .book-btn::before { content: '+'; font-size: .9rem; line-height: 1.2; }
  .book-btn.on::before { content: '\2713'; font-weight: 700; }
}

/* Booked: the film name itself goes bold green (Steve, 10 Oct 2026), beating the
   big-screen blue and new-film red so a booked showing is unmistakable. */
.show-row.is-booked .show-title, .show-row.is-booked .show-title a,
.bill-film.is-booked .bill-film-title { color: #3ee08a !important; font-weight: 700; }

/* Booked film in the checklist at the top: bold green name + BOOKED badge (booked.js) */
.film-check-item span.film-booked, .row-label span.film-booked, .film-booked { color: #3ee08a !important; font-weight: 700; }
.booked-badge { font-size: .6rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: #ffffff; background: #1f9a52; border-radius: 3px; padding: 0 .3rem; flex: 0 0 auto; margin-left: .2rem; white-space: nowrap; }
.film-check-item .booked-badge { flex: 0 0 auto; overflow: visible; }
@media (max-width: 600px) {
  .booked-badge { font-size: 0; padding: 0 .25rem; }
  .booked-badge::before { content: '\2713'; font-size: .7rem; font-weight: 900; line-height: 1.3; }
}