/* Cyber City · the season of the day (inc/board.php). Loaded only while a season is on.
   A season is a light layer over the identity: the logo, the chrome, the lime, the type, the backgrounds and the
   buttons do not change. inc/board.php sets three values on :root: --ecc-season (the colour on a light surface),
   --ecc-season-on-dark (on a dark panel) and --ecc-season-tile (the season's pixel icon, as a mask). This file puts
   them in fixed places and nowhere else:
     1 · the season's word and icon in the notice bar
     2 · the first slide of the board: its badge, the icon, and the icon as a faint pattern behind the product
     3 · a strip of the icon along the top of the board
     4 · the pips and sparks of the section heads, and the click burst of the pointer
   <html data-ecc-season-state="lead"> is the week before: only the words show (1), nothing is coloured. */

/* 1 · the notice bar */
.ecc-season-word { display: inline-flex; align-items: center; gap: var(--ecc-s-2); margin-right: var(--ecc-s-3); font-weight: var(--ecc-fw-strong); white-space: nowrap; }
.ecc-season-icon { flex: none; width: calc(var(--ecc-s-3) + 2px); height: calc(var(--ecc-s-3) + 2px); color: var(--ecc-season); }
.ecc-ctx-panel .ecc-season-icon { color: var(--ecc-season-on-dark); }

/* 2 · the season's slide */
:root[data-ecc-season-state="live"] [data-ecc-season-slide] .ecc-board__kind { color: var(--ecc-ink); }
:root[data-ecc-season-state="live"] [data-ecc-season-slide] .ecc-board__kind .ecc-pip { background: var(--ecc-season); }
:root[data-ecc-season-state="live"] .ecc-ctx-panel [data-ecc-season-slide] .ecc-board__kind .ecc-pip { background: var(--ecc-season-on-dark); }
:root[data-ecc-season-state="live"] [data-ecc-season-slide] .ecc-board__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .16; background: var(--ecc-season);
  -webkit-mask: var(--ecc-season-tile) 0 0 / calc(var(--ecc-s-8) + var(--ecc-s-5)) calc(var(--ecc-s-7) - var(--ecc-s-1)); mask: var(--ecc-season-tile) 0 0 / calc(var(--ecc-s-8) + var(--ecc-s-5)) calc(var(--ecc-s-7) - var(--ecc-s-1));
}

/* 3 · the strip above the board: the icon, repeated, at its own size */
.ecc-season-strip {
  display: block; height: calc(var(--ecc-s-3) + 2px); margin: var(--ecc-s-3) var(--ecc-s-4) 0; background: var(--ecc-season);
  -webkit-mask: var(--ecc-season-tile) 0 0 / calc(var(--ecc-s-6) - var(--ecc-s-1)) calc(var(--ecc-s-3) + 2px) repeat-x; mask: var(--ecc-season-tile) 0 0 / calc(var(--ecc-s-6) - var(--ecc-s-1)) calc(var(--ecc-s-3) + 2px) repeat-x;
}
.ecc-ctx-panel .ecc-season-strip { background: var(--ecc-season-on-dark); }

/* 4 · section heads and the pointer */
:root[data-ecc-season-state="live"] .ecc-hsec__rule .ecc-spark,
:root[data-ecc-season-state="live"] .ecc-hsec__head .ecc-pip { background: var(--ecc-season); }
:root[data-ecc-season-state="live"] { --pk-cursor-trail: var(--ecc-season); }