/* ---------------------------------------------------------------------------
   The calendar bar — src/calendar_view.js.

   The week as PICTURE CARDS along the foot of the club header: every day is
   a small picture of where the club is that day (Monday the film room,
   Tuesday the practice field … Sunday the stadium — src/room.js knows the
   week), its day and date in the display face, and what the day is under
   it. The days gone by sit in ink, today is gold under the gold cursor, a
   game carries the other club's crest. Same rules as everywhere else: ink
   frames, solid colour, nothing at regular weight.
--------------------------------------------------------------------------- */
/* Not a bar of its own: #calbar sits inside the club header (#hdr, game.css)
   and its strip is the header's last row. The phase is painted into the
   header's .hd-phase block in big letters. */
#calbar { display: contents; }
#calbar[hidden] { display: none; }
/* before there is a club header (front door, wizard, briefing) the strip has
   nowhere to sit: never let it spill over the page loose */
#app > #calbar { display: none !important; }
/* only when the header has no phase block of its own */
.cb-now { flex: none; display: grid; gap: 4px; justify-items: start; align-content: center; max-width: 210px; }

/* --- what today is -------------------------------------------------------- */
/* the date in words, under the phase */
.cb-what {
  display: block; padding: 2px 0 0; color: var(--on-tm);
  font: 900 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
/* the day the run stopped on flashes once */
.cb-what.hit { animation: cb-hit .45s steps(4, end) 2; }
@keyframes cb-hit { 0%, 100% { background: var(--gold); color: var(--ink); } 50% { background: var(--ink); color: #fff; } }

/* --- the strip ------------------------------------------------------------ */
/* the header's last row, the whole width; the gold cursor above today */
.cb-wrap { position: relative; order: 20; flex: 1 1 100%; min-width: 0; margin: 2px 3px 0; padding-top: 16px; }
.cb-strip {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  background: var(--ink); box-shadow: var(--frame);
}
.cb-strip::-webkit-scrollbar { display: none; }
.cb-track { display: flex; align-items: stretch; gap: 6px; padding: 5px 0; width: max-content; }

/* Every day is the same card: a picture, the day and date, what it is.
   What a day IS is told by its colour and its picture, never its width. */
.cb-d {
  position: relative; flex: none; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 7px; align-items: center;
  width: 164px; height: 50px; padding: 4px 6px 4px 4px; margin: 2px 0;
  background: var(--ink-2); color: #fff; box-shadow: 0 0 0 2px #000; overflow: hidden;
}
/* the picture: the whole room, small (smoothly scaled down) */
.cb-pic {
  display: block; width: 64px; height: 36px; background: #000 center / cover no-repeat;
  box-shadow: 0 0 0 2px #000; image-rendering: auto;
}
.cb-tx { display: grid; gap: 2px; min-width: 0; }
.cb-tx b { font: 400 21px/.9 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.cb-w { color: var(--gold); }
.cb-n { color: inherit; }
.cb-d em {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; overflow: hidden;
  font: 900 9.5px/1.1 var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--soft);
}
/* a game: the other club's crest on the picture */
.cb-opp {
  position: absolute; left: 34px; top: 20px; width: 32px; height: 32px; padding: 2px;
  background: #fff; box-shadow: 0 0 0 2px #000; image-rendering: pixelated;
}
.cb-d.game { background: var(--tm); color: var(--on-tm); }
.cb-d.game em { color: var(--on-tm); }
.cb-d.game .cb-w { color: var(--tm-acc); }

/* a day that matters: its name in gold */
.cb-d.w3 em { color: var(--gold); }

/* the days before the strip's first day, and the days behind you: ink, the
   picture dimmed so what is coming stands out */
.cb-d.pre, .cb-d.past { background: #0a1424; }
.cb-d.pre .cb-pic, .cb-d.past .cb-pic { filter: brightness(.55); }
.cb-d.pre .cb-w, .cb-d.past .cb-w { color: #8fa3c4; }
.cb-d.past.game { background: #0a1424; color: #fff; }
.cb-d.past.game .cb-w { color: #8fa3c4; }
/* a game already played: the result in its caption, as a solid badge */
.cb-d.past.rW em, .cb-d.past.rL em, .cb-d.past.rT em { display: block; justify-self: start; padding: 2px 5px 1px; color: #fff; box-shadow: 0 0 0 2px #000; }
.cb-d.past.rW em { background: var(--good); }
.cb-d.past.rL em { background: var(--bad); }
.cb-d.past.rT em { background: #4b5563; }

/* today: gold, the words in ink */
.cb-d.now { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold-hi); }
.cb-d.now .cb-w, .cb-d.now em { color: var(--ink); }
.cb-d.now .cb-pic { filter: none; }
#calbar.go .cb-d.now { box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--gold); }

/* the gold cursor today sits under (the strip slides the day to it) */
.cb-pin {
  position: absolute; top: -2px; width: 22px; height: 14px; margin-left: -11px; pointer-events: none;
  background: var(--cur-dn) center / 100% 100% no-repeat; image-rendering: pixelated;
  animation: rm-bobdn .7s steps(2, jump-none) infinite;
}
@media (prefers-reduced-motion: reduce) { .cb-pin { animation: none; } }

@media (max-width: 720px) {
  /* the header's last row: the picture on top, the day under it */
  .cb-now { max-width: none; }
  .cb-wrap { order: 12; flex: 1 1 100%; margin-top: 2px; padding-top: 16px; }
  .cb-track { gap: 4px; padding: 4px 0; }
  .cb-d { grid-template-columns: 1fr; gap: 3px; width: 72px; height: auto; padding: 4px; justify-items: center; }
  .cb-pic { width: 64px; height: 36px; }
  .cb-tx b { font-size: 16px; }
  .cb-d em { display: none; }
  img.cb-opp { left: auto; right: 4px; top: 20px; width: 24px; height: 24px; image-rendering: auto; }
  .cb-d.past.rW em, .cb-d.past.rL em, .cb-d.past.rT em { display: none; }
}