/* nordic.css - "Nordic Frost": a LIGHT re-skin of the Orpington Odeon site.
   ======================================================================
   OPT-IN THEME. Loaded only when <html> has class "theme-nordic"; this file is
   appended to <head> AFTER every other stylesheet, together with Google Fonts
   Bebas Neue + Barlow (400,500,600,700). Because of that, EVERY rule below is
   prefixed "html.theme-nordic" - it scopes the theme AND out-ranks the page
   styles on specificity (the prefix adds one class + one element).

   STRICT RULE: ZERO functional change. Only colours, fonts, border COLOURS
   (never border widths), shadows. No display / position / width / height /
   margin / padding / overflow / z-index, no moving or hiding anything.
   Border colours are therefore set with the *-color longhands so a width can
   never change. Font sizes are left exactly as the pages set them.

   !important is used in only two kinds of place:
     1. to beat inline style="" attributes / JS-written inline colours
        (Bills summary line and tip, the footer "Page build" stamp);
     2. to mirror the site's own !important rules (booked name colour, new-film
        red) and to make the "Booked" badge readable everywhere.

   CASCADE NOTE. Each page's own rule order is mirrored here (page rules, then
   shared.css rules) so ties resolve exactly as they do in the dark theme
   (e.g. hover before .active, booked after hover).

   CONTENTS
     0  Tokens (custom properties, incl. the shared.css Must See variables)
     1  Base: page, text, fonts, form controls
     2  Nav bar, hamburger, dropdown
     3  Day strip + tabs
     4  Headings (Bebas Neue), section labels, links
     5  Films checklist: panel, slot buttons, items, hidden group, icon buttons
     6  Screen selector (buttons, highlighted / "Only")
     7  Listings schedule: day blocks, show rows, times, titles, tags
     8  Booked marker (button, badge, row, Gantt outline)
     9  Double Bills page
    10  Banners (stale/gap, static notice), empty states, footer
    11  Gantt page
    12  Pop-ups: hover box, note editor, changes modal
    13  Other pages: Blurbs, Notepad, Changes, AI Conv
    14  Scrollbars, focus outlines, text selection
   ====================================================================== */


/* ======================================================================
   0. TOKENS
   ====================================================================== */
html.theme-nordic {
  /* Surfaces */
  --nf-bg: #F4F6F8;            /* page */
  --nf-panel: #FFFFFF;         /* cards, header bar, panels */
  --nf-panel-alt: #E9EEF3;     /* empty Gantt day cell, tag chips */
  --nf-selected: #E0F0FA;      /* booked / selected row, menu hover */

  /* Lines */
  --nf-line-soft: #E8EDF2;     /* row dividers */
  --nf-line: #E2E8F0;          /* borders */
  --nf-line-strong: #CBD5E1;   /* button outlines */

  /* Text */
  --nf-text: #1E293B;
  --nf-text-2: #334155;
  --nf-muted: #64748B;         /* labels, meta, inactive nav */
  --nf-faint: #94A3B8;         /* disabled / "no data" things */

  /* Accent + meaning colours */
  --nf-accent: #0273B3;        /* booked, selected, active nav, links */
  --nf-accent-dark: #025E91;   /* hover on solid accent */
  --nf-big: #0369A1;           /* big screens (2/4) in the lists */
  --nf-new: #DC2626;           /* NEW film name */
  --nf-green: #15803D;         /* screen filter selected, RT fresh, tick */
  --nf-green-tint: #DCFCE7;
  --nf-orange: #C2410C;        /* "Only" active, spotlight active */
  --nf-orange-tint: #FFEDD5;
  --nf-rt-fresh: #15803D;
  --nf-cinemascore: #4D7C0F;

  /* Fonts */
  --nf-display: 'Bebas Neue', 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --nf-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* shared.css variables, re-valued for a light page. Level 3 = most wanted =
     GREEN, level 2 = amber, level 1 = grey. -tint = row/label background,
     -cell = Gantt day-cell background. GOING = violet. */
  --ms1: #94A3B8;  --ms1-tint: #F1F5F9;  --ms1-cell: #E2E8F0;
  --ms2: #CA8A04;  --ms2-tint: #FEF9C3;  --ms2-cell: #FDE68A;
  --ms3: #15803D;  --ms3-tint: #DCFCE7;  --ms3-cell: #BBF7D0;
  --going: #7C3AED; --going-tint: #EDE9FE; --going-cell: #DDD6FE;

  color-scheme: light;
  background: var(--nf-bg);
}

/* NOTE on amber: the level-2 STAR is #CA8A04 (--ms2). Amber TEXT (notes, warnings,
   "Moved screen") uses the darker #A16207 so it stays readable on white. */


/* ======================================================================
   1. BASE: page, text, fonts, form controls
   ====================================================================== */
html.theme-nordic body {
  font-family: var(--nf-body);
  background: var(--nf-bg);
  color: var(--nf-text);
}

/* Buttons / inputs do not inherit the page font by default - make them. */
html.theme-nordic button,
html.theme-nordic input,
html.theme-nordic textarea,
html.theme-nordic select {
  font-family: inherit;
}

/* Native checkboxes / radios / ranges in the accent colour. */
html.theme-nordic input[type="checkbox"],
html.theme-nordic input[type="radio"] { accent-color: var(--nf-accent); }


/* ======================================================================
   2. NAV BAR, HAMBURGER, DROPDOWN
   ====================================================================== */
html.theme-nordic nav {
  background: var(--nf-panel);
  border-bottom-color: var(--nf-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* Links: Bebas Neue, not italic, normal weight. Muted; accent for the current
   page. (nav.js writes `nav .nav-link.current` - the nav prefix keeps us above it.) */
html.theme-nordic nav .nav-link {
  font-family: var(--nf-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nf-muted);
}
html.theme-nordic nav .nav-link:hover   { color: var(--nf-text); }
html.theme-nordic nav .nav-link.current { color: var(--nf-accent); }

/* "Updated ..." stamp on the right of the Listings / Leicester Sq nav */
html.theme-nordic .nav-updated {
  color: var(--nf-muted);
  font-variant-numeric: tabular-nums;
}

/* Hamburger button */
html.theme-nordic nav .nav-burger {
  color: var(--nf-muted);
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
}
html.theme-nordic nav .nav-burger:hover,
html.theme-nordic nav .nav-burger[aria-expanded="true"] {
  color: var(--nf-accent);
  border-color: var(--nf-accent);
}
html.theme-nordic nav .nav-burger.current {
  color: var(--nf-accent);
  border-color: var(--nf-accent);
}

/* Dropdown panel */
html.theme-nordic nav .nav-drop {
  background: var(--nf-panel);
  border-color: var(--nf-line);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
html.theme-nordic nav .nav-drop .nav-link:hover {
  background: var(--nf-selected);
  color: var(--nf-text);
}
html.theme-nordic nav .nav-drop .nav-link.current { color: var(--nf-accent); }


/* ======================================================================
   3. DAY STRIP + TABS (Listings, Double Bills, Leicester Sq)
   ====================================================================== */
html.theme-nordic .day-strip-wrap {
  background: var(--nf-panel);
  border-bottom-color: var(--nf-line);
}

/* Tab labels: Bebas Neue. Order mirrors the pages: base, hover, active, no-data. */
html.theme-nordic .day-tab {
  font-family: var(--nf-display);
  font-weight: 400;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--nf-muted);
}
html.theme-nordic .day-tab:hover { color: var(--nf-text); }
html.theme-nordic .day-tab.active {
  color: var(--nf-accent);
  border-bottom-color: var(--nf-accent);
}
html.theme-nordic .day-tab.no-data { color: var(--nf-faint); }
html.theme-nordic .day-tab.no-data:hover { color: var(--nf-faint); }


/* ======================================================================
   4. HEADINGS (Bebas Neue), SECTION LABELS, LINKS
   ====================================================================== */
/* Page titles / h1: Bebas Neue, tracking .04em, no italic, normal weight. */
html.theme-nordic h1,
html.theme-nordic .page-title,
html.theme-nordic .logo {
  font-family: var(--nf-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nf-text);
}
html.theme-nordic .logo:hover { color: var(--nf-accent); }

/* Day-block headings: Listings / Leicester Sq (.day-heading) and Double Bills
   (.result-day-heading). */
html.theme-nordic .day-heading,
html.theme-nordic .result-day-heading {
  font-family: var(--nf-display);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nf-text-2);
  border-bottom-color: var(--nf-line);
}

/* Small-caps labels ("FILMS", "SCREENS", "FILMS TO COMBINE") and hints */
html.theme-nordic .filter-label,
html.theme-nordic .selector-label,
html.theme-nordic .screen-selector-label { color: var(--nf-muted); }
html.theme-nordic .selector-hint { color: var(--nf-muted); }

/* All / None links */
html.theme-nordic .filter-actions a,
html.theme-nordic .selector-actions a { color: var(--nf-accent); }


/* ======================================================================
   5. FILMS CHECKLIST (Listings + Double Bills + Leicester Sq)
   ====================================================================== */
html.theme-nordic .filter-section,
html.theme-nordic .selector-section { border-bottom-color: var(--nf-line); }

/* -- Slot buttons 1-4 (order mirrors the page: base, active, hover) -- */
html.theme-nordic .slot-btn {
  color: var(--nf-muted);
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .slot-btn.active {
  background: var(--nf-selected);
  border-color: var(--nf-accent);
  color: var(--nf-accent);
}
html.theme-nordic .slot-btn:hover {
  border-color: var(--nf-muted);
  color: var(--nf-text);
}
html.theme-nordic .slot-btn.active:hover {   /* an active slot must still read as active under the mouse */
  border-color: var(--nf-accent);
  color: var(--nf-accent);
}
html.theme-nordic .slot-note { color: var(--nf-text-2); }

/* Slot 4's "next 7 days" tick-box line */
html.theme-nordic .slot-filter-check { color: var(--nf-muted); }
html.theme-nordic .slot-filter-check input { accent-color: var(--nf-accent); }
html.theme-nordic .slot-filter-check:hover { color: var(--nf-text); }

/* -- Divider heading above slot 4's hidden group -- */
html.theme-nordic .hidden-group-label {
  color: var(--nf-muted);
  border-top-color: var(--nf-line);
}

/* -- Checklist items. Order mirrors index.html: item colour, hidden (greyed),
      then hover (so hover still wins inside the hidden group, as today). -- */
html.theme-nordic .film-check-item { color: var(--nf-text-2); }
html.theme-nordic .film-check-item input[type="checkbox"] { accent-color: var(--nf-accent); }
html.theme-nordic .film-check-item.is-hidden span { color: #7C8CA1; }
html.theme-nordic .film-check-item:hover span { color: var(--nf-text); }
/* GOING badge stays violet when its row is hovered. (In the hidden group it
   greys out with the rest of the row, same as today.) */
html.theme-nordic .going-badge { color: var(--going); }
html.theme-nordic .film-check-item:hover .going-badge { color: var(--going); }

/* Must See underline in the checklist: levels 1 and 3 use the star colours as
   they are (--ms1 grey, --ms3 green). Level 2 uses the darker amber TEXT colour
   (#A16207) because the lighter star amber is too faint as a thin line on white. */
html.theme-nordic .must-see-title.lvl-2 { text-decoration-color: #A16207; }

/* NEW film: red name. In the checklist, hovering the row turns every name to
   normal text (the .film-check-item:hover span rule above out-ranks this
   one) - same as the dark theme. In the schedule the red link is !important. */
html.theme-nordic .new-film-title { color: var(--nf-new); }
html.theme-nordic .show-title.new-film a { color: var(--nf-new) !important; }
html.theme-nordic .show-title.new-film a:hover { color: #B91C1C !important; }

/* -- Small icon buttons: info "i", pencil, magnifier, wake, hide x, star -- */
html.theme-nordic .film-hide-btn {
  color: #B91C1C;
  border-color: #FCA5A5;
}
html.theme-nordic .film-hide-btn:hover {
  color: #7F1D1D;
  border-color: #EF4444;
}

html.theme-nordic .film-wake-btn {
  color: var(--nf-muted);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .film-wake-btn:hover {
  color: var(--nf-text);
  border-color: var(--nf-accent);
}
html.theme-nordic .film-wake-btn.set {
  color: var(--nf-accent);
  border-color: var(--nf-accent);
}
html.theme-nordic .film-wake-clear {         /* the small x next to the wake date: red like the hide x */
  color: #B91C1C;
  border-color: #FCA5A5;
}

/* Must See star button on Listings (PC only). Off = faint but visible; set
   levels take the shared level colours. Hover BEFORE the levels, as in the page. */
html.theme-nordic .mustsee-star-btn { color: #C0CAD7; }
html.theme-nordic .mustsee-star-btn:hover { color: var(--nf-muted); }
html.theme-nordic .mustsee-star-btn.lvl-1 { color: var(--ms1); }
html.theme-nordic .mustsee-star-btn.lvl-2 { color: var(--ms2); }
html.theme-nordic .mustsee-star-btn.lvl-3 { color: var(--ms3); }

html.theme-nordic .film-info-link {
  color: var(--nf-muted);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .film-info-link:hover {
  color: var(--nf-text);
  border-color: var(--nf-accent);
}

html.theme-nordic .film-note-btn {            /* pencil: my note on this film */
  color: var(--nf-muted);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .film-note-btn:hover {
  color: var(--nf-text);
  border-color: #CA8A04;
}

html.theme-nordic .film-spotlight-btn {       /* magnifier: show only this film */
  color: var(--nf-muted);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .film-spotlight-btn:hover {
  color: var(--nf-text);
  border-color: var(--nf-orange);
}
html.theme-nordic .film-spotlight-btn.active {
  color: var(--nf-orange);
  border-color: var(--nf-orange);
  background: var(--nf-orange-tint);
}


/* ======================================================================
   6. SCREEN SELECTOR (Listings, Double Bills, Leicester Sq)
   Order mirrors the pages: base, hover, then .active (active wins).
   ====================================================================== */
html.theme-nordic .screen-btn,
html.theme-nordic .screen-only-btn {
  color: var(--nf-muted);
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .screen-btn:hover,
html.theme-nordic .screen-only-btn:hover {
  color: var(--nf-text-2);
  border-color: var(--nf-muted);
}
/* Selected screen: green on a green tint */
html.theme-nordic .screen-btn.active {
  color: var(--nf-green);
  border-color: var(--nf-green);
  background: var(--nf-green-tint);
}
/* "Only" mode active: orange on an orange tint */
html.theme-nordic .screen-only-btn.active {
  color: var(--nf-orange);
  border-color: var(--nf-orange);
  background: var(--nf-orange-tint);
}


/* ======================================================================
   7. LISTINGS SCHEDULE (also Leicester Sq): day blocks, rows, times, titles
   ====================================================================== */
html.theme-nordic .no-data-msg { color: var(--nf-faint); }

html.theme-nordic .show-row { border-bottom-color: var(--nf-line-soft); }
/* Already-started showings keep the site's existing `opacity` fade (no rule here);
   the text below is dark so the fade still reads. */

/* Times link: the outer start/end times are muted, the bold film-start time in
   the middle is Bebas Neue. */
html.theme-nordic .show-times {
  color: var(--nf-muted);
  font-variant-numeric: tabular-nums;
}
html.theme-nordic .show-times:hover { color: var(--nf-text-2); }
html.theme-nordic .show-times strong {
  font-family: var(--nf-display);
  font-weight: 400;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--nf-text);
}
html.theme-nordic .show-times:hover strong { color: var(--nf-accent); }

/* Screen number. Big screens (2 and 4): bold. A screen picked in the screen
   filter turns green (site rule is !important). */
html.theme-nordic .show-screen { color: var(--nf-muted); }
html.theme-nordic .show-screen.big {
  color: var(--nf-big);
  font-weight: 700;
}
html.theme-nordic .show-screen.highlighted {
  color: var(--nf-green) !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(21, 128, 61, .25);
}

/* Film title */
html.theme-nordic .show-title { color: var(--nf-text); }
html.theme-nordic .show-title.big {
  color: var(--nf-big);
  font-weight: 700;
}

/* Tag chips ("Subtitled", ...) */
html.theme-nordic .show-tag {
  background: var(--nf-panel-alt);
  color: var(--nf-accent);
  border-color: var(--nf-line-strong);
}


/* ======================================================================
   8. BOOKED MARKER (booked.js + shared.css)
   Booked = ACCENT BLUE everywhere: solid button with white text, bold name,
   accent times, soft blue row tint, solid "Booked" badge, accent Gantt outline.
   ====================================================================== */

/* Button, not booked -> outlined; booked -> solid accent with white text.
   Order mirrors shared.css: base, hover, .on (so a booked button stays solid). */
html.theme-nordic .book-btn {
  color: var(--nf-muted);
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .book-btn:hover {
  color: var(--nf-accent);
  border-color: var(--nf-accent);
}
html.theme-nordic .book-btn.on {
  color: #FFFFFF;
  background: var(--nf-accent);
  border-color: var(--nf-accent);
  font-weight: 700;
}
html.theme-nordic .book-btn.on:hover {
  color: #FFFFFF;
  background: var(--nf-accent-dark);
  border-color: var(--nf-accent-dark);
}

/* Booked showing: times in accent (after the hover rules above so they hold on hover) */
html.theme-nordic .is-booked .show-times,
html.theme-nordic .is-booked .show-times strong,
html.theme-nordic .is-booked .bill-film-times,
html.theme-nordic .is-booked .bill-film-times strong { color: var(--nf-accent); }

/* Booked row tint. Skipped on Must See rows so the importance tint (green /
   amber / grey) is never lost - those rows still show the accent name, times
   and solid button. The bill segment has no padding, so it gets a soft halo
   (box-shadow spread, no layout effect) instead. */
html.theme-nordic .show-row.is-booked:not(.show-mustsee) { background: var(--nf-selected); }
html.theme-nordic .bill-film.is-booked:not(.bill-film-mustsee) {
  background: var(--nf-selected);
  box-shadow: 0 0 0 3px var(--nf-selected);
}

/* Booked film name: bold accent. !important mirrors shared.css so it beats the
   big-screen blue and the new-film red. */
html.theme-nordic .show-row.is-booked .show-title,
html.theme-nordic .show-row.is-booked .show-title a,
html.theme-nordic .bill-film.is-booked .bill-film-title {
  color: var(--nf-accent) !important;
  font-weight: 700;
}
/* ...and in the checklist at the top / Gantt row labels */
html.theme-nordic .film-check-item span.film-booked,
html.theme-nordic .row-label span.film-booked,
html.theme-nordic .film-booked {
  color: var(--nf-accent) !important;
  font-weight: 700;
}

/* "Booked" badge: solid accent, white text. !important so it is readable
   EVERYWHERE - including the greyed Hidden group, where
   `.film-check-item.is-hidden span` used to paint it grey on green. */
html.theme-nordic .booked-badge {
  color: #FFFFFF !important;
  background: var(--nf-accent) !important;
}

/* Gantt bar that is booked: accent outline (tick comes from shared.css) */
html.theme-nordic .seg.is-booked { outline-color: var(--nf-accent); }
html.theme-nordic .seg.is-booked::before {
  color: #FFFFFF;
  text-shadow: 0 0 2px rgba(15, 23, 42, .85);
}


/* ======================================================================
   9. DOUBLE BILLS PAGE
   ====================================================================== */
html.theme-nordic .results-prompt { color: var(--nf-muted); }
html.theme-nordic .bill-section-heading { color: var(--nf-muted); }
html.theme-nordic .no-bills-msg { color: var(--nf-faint); }

html.theme-nordic .bill-row { border-bottom-color: var(--nf-line-soft); }

html.theme-nordic .bill-film-title { color: var(--nf-text); }
html.theme-nordic .bill-film-title.big {
  color: var(--nf-big);
  font-weight: 700;
}
html.theme-nordic .bill-sub {
  background: var(--nf-panel-alt);
  color: var(--nf-accent);
  border-color: var(--nf-line-strong);
}

/* Times: tabular figures; the bold film-start time is Bebas Neue like Listings */
html.theme-nordic .bill-film-times {
  color: var(--nf-muted);
  font-variant-numeric: tabular-nums;
}
html.theme-nordic .bill-film-times:hover { color: var(--nf-text-2); }
html.theme-nordic .bill-film-times strong {
  font-family: var(--nf-display);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nf-text);
}
html.theme-nordic .bill-film-times:hover strong { color: var(--nf-accent); }

html.theme-nordic .bill-arrow { color: var(--nf-faint); }

/* Gap chips between films: ok (green) / tight (red) / long (amber) */
html.theme-nordic .bill-gap.ok {
  background: #DCFCE7; color: #15803D; border-color: #86EFAC;
}
html.theme-nordic .bill-gap.tight {
  background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5;
}
html.theme-nordic .bill-gap.long {
  background: #FEF3C7; color: #92400E; border-color: #FCD34D;
}

html.theme-nordic .bill-total { color: var(--nf-muted); font-variant-numeric: tabular-nums; }
html.theme-nordic .bill-screen { color: var(--nf-muted); }
html.theme-nordic .bill-screen.highlighted {
  color: var(--nf-green) !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(21, 128, 61, .25);
}

/* INLINE-STYLE text on this page (written by bills/index.html's JS with
   style="color:#..."): needs !important to be re-coloured.
     - the "N combinations found" summary line  -> muted
     - its "tight = less than N min" key        -> same red as the tight chip
     - the "Tip: try selecting more days" line  -> muted */
html.theme-nordic #results > div[style] { color: var(--nf-muted) !important; }
html.theme-nordic #results > div[style] span[style] { color: #B91C1C !important; }
html.theme-nordic .results-prompt span[style] { color: var(--nf-muted) !important; }


/* ======================================================================
   10. BANNERS, EMPTY STATES, FOOTER
   ====================================================================== */
/* Red banner: stale-data and data-gap alerts (Listings, Leicester Sq) */
html.theme-nordic .gap-banner {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #7F1D1D;
}
html.theme-nordic .gap-banner strong { color: #B91C1C; }

/* Amber banner: "Static info" notice (written by static-notice.js, id selector) */
html.theme-nordic #static-notice {
  font-family: var(--nf-body);
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #78350F;
}
html.theme-nordic #static-notice strong { color: #92400E; }

html.theme-nordic .empty { color: var(--nf-muted); }
html.theme-nordic .empty a { color: var(--nf-accent); }

html.theme-nordic footer {
  color: var(--nf-muted);
  border-top-color: var(--nf-line-soft);
}
html.theme-nordic footer a { color: var(--nf-muted); }
html.theme-nordic footer a:hover { color: var(--nf-accent); }
/* "Page build: ..." stamp and "updated" span carry an inline style="color:..." */
html.theme-nordic footer span[style] { color: var(--nf-muted) !important; }


/* ======================================================================
   11. GANTT PAGE
   Bars: big screen = dark slate, normal = soft blue (clearly different).
   "Shared"/overlap outline = amber inset. Empty day cell = #E9EEF3.
   ====================================================================== */
html.theme-nordic .panel {
  background: var(--nf-panel);
  border-color: var(--nf-line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* Date headers + frozen name column (needs an opaque bg to cover scrolled cells) */
html.theme-nordic .hdr-blank,
html.theme-nordic .hdr-date { color: var(--nf-muted); }
html.theme-nordic .hdr-date { font-variant-numeric: tabular-nums; }
html.theme-nordic .hdr-blank,
html.theme-nordic .row-label { background: var(--nf-panel); }

html.theme-nordic .row-label { color: var(--nf-text); }

/* Dismiss cross / restore tick on each row */
html.theme-nordic .row-toggle.cross { color: #C25B5B; }
html.theme-nordic .row-toggle.cross:hover { color: #B91C1C; }
html.theme-nordic .row-toggle.tick { color: #3F8F5F; }
html.theme-nordic .row-toggle.tick:hover { color: var(--nf-green); }

html.theme-nordic .row-label-text:hover { color: var(--nf-accent); }

/* Must See star button on each row. Off = faint; hover BEFORE the level rules
   (as in shared.css, so a coloured star stays coloured on hover). */
html.theme-nordic .must-see-star { color: #C0CAD7; }
html.theme-nordic .must-see-star:hover { color: var(--nf-muted); }
html.theme-nordic .must-see-star.lvl-1 { color: var(--ms1); }
html.theme-nordic .must-see-star.lvl-2 { color: var(--ms2); }
html.theme-nordic .must-see-star.lvl-3 { color: var(--ms3); }

/* Day cells. Order: base, row hover, then Must See tints (the tints win over
   hover, as they do today). Selectors are 4 classes deep so they also out-rank
   the hover rule above them. */
html.theme-nordic .day-cell { background: var(--nf-panel-alt); }
html.theme-nordic .row-label.row-hover { background: var(--nf-selected); }
html.theme-nordic .day-cell.row-hover  { background: #CFE3F2; }
html.theme-nordic .row-label.must-see-row.lvl-1 { background: var(--ms1-tint); }
html.theme-nordic .row-label.must-see-row.lvl-2 { background: var(--ms2-tint); }
html.theme-nordic .row-label.must-see-row.lvl-3 { background: var(--ms3-tint); }
html.theme-nordic .day-cell.must-see-row.lvl-1 { background: var(--ms1-cell); }
html.theme-nordic .day-cell.must-see-row.lvl-2 { background: var(--ms2-cell); }
html.theme-nordic .day-cell.must-see-row.lvl-3 { background: var(--ms3-cell); }

/* Bars ("lozenges") */
html.theme-nordic .seg.big  { background: #1E293B; }
html.theme-nordic .seg.norm { background: #7FA7C9; }
html.theme-nordic .seg.shared { box-shadow: inset 0 0 0 1.5px #F59E0B; }   /* overlap = "not to scale" */

/* Hover / tap tooltip: white panel, dark text, soft line border */
html.theme-nordic .seg:hover::after,
html.theme-nordic .seg.tapped::after {
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
  color: var(--nf-text);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
}

/* "Hidden in list N" divider row + build stamp footer row */
html.theme-nordic .section-divider {
  border-top-color: var(--nf-line-strong);
  color: var(--nf-muted);
}
html.theme-nordic .page-updated {
  border-top-color: var(--nf-line);
  color: var(--nf-muted);
}


/* ======================================================================
   12. POP-UPS (film-notes.js + changes-modal.js; both write their <style>
       into <head> at run time, so these selectors out-rank them by the prefix)
   ====================================================================== */

/* -- Hover box (PC): note + Odeon blurb + scores -- */
html.theme-nordic .fn-tip {
  font-family: var(--nf-body);
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
  color: var(--nf-text-2);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
html.theme-nordic .fn-tip b { color: var(--nf-text); }
html.theme-nordic .fn-tip .fn-note { color: #A16207; }               /* my own note */
html.theme-nordic .fn-tip .fn-showing { color: var(--nf-green); }    /* per-showing note, e.g. subtitled */
html.theme-nordic .fn-tip .fn-blurb { color: var(--nf-muted); }
html.theme-nordic .fn-scores .fn-n { color: var(--nf-muted); }
html.theme-nordic .fn-scores .fn-sep { color: var(--nf-faint); }
/* Rotten Tomatoes + CinemaScore */
html.theme-nordic .fn-rt.fresh { color: var(--nf-rt-fresh); }
html.theme-nordic .fn-rt.rotten { color: #B91C1C; }
html.theme-nordic .fn-cs.g-a { color: var(--nf-rt-fresh); }
html.theme-nordic .fn-cs.g-b { color: var(--nf-cinemascore); }
html.theme-nordic .fn-cs.g-c { color: #A16207; }
html.theme-nordic .fn-cs.g-d,
html.theme-nordic .fn-cs.g-f { color: #B91C1C; }

/* -- Note editor (pencil) -- */
html.theme-nordic .fn-back { background: rgba(15, 23, 42, .38); }
html.theme-nordic .fn-box {
  font-family: var(--nf-body);
  background: var(--nf-panel);
  border-color: var(--nf-line);
  color: var(--nf-text);
  box-shadow: 0 12px 40px rgba(15, 23, 42, .2);
}
html.theme-nordic .fn-box h2 {
  font-family: var(--nf-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nf-text);
}
html.theme-nordic .fn-box label { color: var(--nf-muted); }
html.theme-nordic .fn-box textarea {
  background: var(--nf-panel);
  color: var(--nf-text);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .fn-box textarea:focus { border-color: var(--nf-accent); }
html.theme-nordic .fn-box .fn-desc { color: var(--nf-muted); }
html.theme-nordic .fn-box .fn-desc b { color: var(--nf-muted); }
html.theme-nordic .fn-row button {
  background: var(--nf-panel);
  color: var(--nf-text);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .fn-row .fn-save { border-color: var(--nf-accent); color: var(--nf-accent); }
html.theme-nordic .fn-row .fn-del {
  background: transparent;
  color: #B91C1C;
  border-color: #FCA5A5;
}
html.theme-nordic .fn-row button:hover { background: var(--nf-panel-alt); }
html.theme-nordic .fn-row .fn-msg { color: #B91C1C; }

/* -- "Odeon changed its schedule" pop-up -- */
html.theme-nordic .cm-back { background: rgba(15, 23, 42, .38); }
html.theme-nordic .cm-box {
  font-family: var(--nf-body);
  background: var(--nf-panel);
  border-color: var(--nf-line);
  color: var(--nf-text);
  box-shadow: 0 12px 40px rgba(15, 23, 42, .2);
}
html.theme-nordic .cm-box h2 {
  font-family: var(--nf-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--nf-text);
}
html.theme-nordic .cm-box li { border-bottom-color: var(--nf-line-soft); }
html.theme-nordic .cm-bad  { color: #B91C1C; }
html.theme-nordic .cm-good { color: var(--nf-green); }
html.theme-nordic .cm-warn { color: #A16207; }
html.theme-nordic .cm-new  { color: var(--nf-accent); }
html.theme-nordic .cm-more { color: var(--nf-muted); }
html.theme-nordic .cm-row a { color: var(--nf-accent); }
html.theme-nordic .cm-row button {
  background: var(--nf-panel);
  color: var(--nf-text);
  border-color: var(--nf-accent);
}
html.theme-nordic .cm-row button:hover { background: var(--nf-selected); }


/* ======================================================================
   13. OTHER PAGES: Blurbs (overview), Notepad (pad), Changes, AI Conv
   ====================================================================== */

/* -- Blurbs -- */
html.theme-nordic .back-btn,
html.theme-nordic .unhide-btn {
  color: var(--nf-muted);
  background: var(--nf-panel);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .back-btn:hover { color: var(--nf-accent); border-color: var(--nf-accent); }
html.theme-nordic .unhide-btn:hover:not(:disabled) { color: var(--nf-orange); border-color: var(--nf-orange); }
html.theme-nordic .count-note,
html.theme-nordic .release-date { color: var(--nf-muted); }
html.theme-nordic .film-block { border-bottom-color: var(--nf-line-soft); }
html.theme-nordic .film-title { color: var(--nf-text); }
html.theme-nordic .new-badge {
  background: var(--nf-orange-tint);
  color: #9A3412;
}
html.theme-nordic .film-synopsis { color: var(--nf-text-2); }
html.theme-nordic .film-no-synopsis { color: var(--nf-muted); }
html.theme-nordic .film-google {
  color: var(--nf-accent);
  border-color: var(--nf-line-strong);
}
html.theme-nordic .film-google:hover { color: var(--nf-accent-dark); border-color: var(--nf-accent); }
html.theme-nordic .hide-control { color: var(--nf-muted); }
html.theme-nordic .hide-control:hover { color: var(--nf-orange); }
html.theme-nordic .hide-control input {       /* custom Hide checkbox */
  background: var(--nf-panel);
  border-color: var(--nf-faint);
}
html.theme-nordic .hide-control input:hover {
  border-color: var(--nf-accent);
  background: var(--nf-selected);
}

/* -- Notepad -- */
html.theme-nordic #status { color: var(--nf-muted); }
html.theme-nordic #status.bad { color: var(--nf-orange); }
html.theme-nordic #pad {
  background: var(--nf-panel);
  color: var(--nf-text);
  border-color: var(--nf-line-strong);
}
html.theme-nordic #pad:focus { border-color: var(--nf-accent); }
html.theme-nordic #conflict {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #78350F;
}
html.theme-nordic #conflict button {
  background: var(--nf-panel);
  color: var(--nf-text);
  border-color: var(--nf-line-strong);
}
html.theme-nordic #conflict button:hover { border-color: #F59E0B; }

/* -- Changes list -- */
/* (scoped to <main> so the pop-ups, which are appended to <body>, are untouched) */
html.theme-nordic .intro { color: var(--nf-muted); }
html.theme-nordic main h2 {
  color: var(--nf-muted);
  border-bottom-color: var(--nf-line);
}
html.theme-nordic main li { color: var(--nf-text-2); }
html.theme-nordic main li::before { color: var(--nf-faint); }
html.theme-nordic main li.k-cancelled strong,
html.theme-nordic main li.k-whole-day-gone strong { color: #B91C1C; }
html.theme-nordic main li.k-put-back strong { color: var(--nf-green); }
html.theme-nordic main li.k-moved-screen strong { color: #A16207; }
html.theme-nordic main li.k-new-week-released strong { color: var(--nf-accent); }

/* -- AI Conv -- */
html.theme-nordic .note { color: var(--nf-muted); }


/* ======================================================================
   14. SCROLLBARS, FOCUS OUTLINES, TEXT SELECTION
   ====================================================================== */
/* Page + panel scrollbars: soft grey thumb on the page colour. (The Gantt
   panel and anything else that scrolls inherits this.) */
html.theme-nordic { scrollbar-color: var(--nf-line-strong) var(--nf-bg); }

/* Day strip: slim accent thumb on white (shared.js sets its own dark colours) */
html.theme-nordic .day-strip-wrap { scrollbar-color: rgba(2, 115, 179, .55) var(--nf-panel); }
html.theme-nordic .day-strip-wrap::-webkit-scrollbar-track { background: var(--nf-panel); }
html.theme-nordic .day-strip-wrap::-webkit-scrollbar-thumb { background: rgba(2, 115, 179, .55); }
html.theme-nordic .day-strip-wrap::-webkit-scrollbar-thumb:hover { background: var(--nf-accent); }

/* Keyboard focus: one accent ring everywhere (mouse clicks do not show it). */
html.theme-nordic :focus-visible {
  outline: 2px solid var(--nf-accent);
  outline-offset: 2px;
}
/* These two draw their own accent border on focus instead. */
html.theme-nordic .fn-box textarea:focus-visible,
html.theme-nordic #pad:focus-visible { outline: none; }

html.theme-nordic ::selection { background: #BFE1F5; color: var(--nf-text); }