/* ============================================================
   FORECAST PANEL — additions

   The panel is styled in juq.css exactly as the mockup drew it. This file adds
   only what the mockup could not show, because its calendar was invented: days
   with no record yet, and days that link to a VOD.
   ============================================================ */

/* NOT the same as a day off. The nightly job deliberately leaves today blank,
   and last night too until its VOD posts, because recording a stream day as
   "off" and then correcting it would be worse than saying nothing yet. A dash
   reads as "not known", where an empty square would read as "did not stream". */
.cal-cell.none {
  background: transparent;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

/* A day whose VOD still exists is clickable. Twitch VODs age out after about
   60 days, so most of the year has none and only recent days light up. */
.cal-cell.vod {
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
/* z-index, not just position. The cells are already positioned, so among
   positioned siblings the LATER one still paints on top and covers the
   outline's right and bottom edges. The offset makes it worse by pushing the
   ring further into the neighbour. Same bug as the leaderboard rows. */
.cal-cell.vod:hover { outline: var(--bw) solid var(--ink); outline-offset: 1px; z-index: 1; }

/* A search link is a guess, not a VOD, so it does not get the "there is
   something here" dot below. It stays clickable and says so on hover. */
.cal-cell.vod.search::after { display: none; }

/* A reference streamer who is live right now. This is the row that moved
   today's percentage, so it is worth pointing at.

   .ov-name clips its overflow to keep long names on one line, and the pulse
   animation grows a ring OUTWARD from the dot, so inside that box the ring got
   sliced off at the left edge. The name is unclipped only on a live row, where
   there is a dot to make room for. */
.ov-row.live .ov-name { color: var(--ink); overflow: visible; }
.ov-row.live .pulse {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  margin-right: var(--s-2); vertical-align: middle; flex-shrink: 0;
  background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2s infinite;
}

/* ---------- linked events ---------- */

/* Only a row that actually goes somewhere gets the arrow and the hover. */
.up-ext {
  width: 11px; height: 11px; margin-left: var(--s-2);
  display: inline-block; vertical-align: baseline; opacity: 0.55;
}
.up.linked { cursor: pointer; text-decoration: none; color: inherit; }
.up.linked:hover .up-title { color: var(--accent); }
.up.linked:hover .up-ext { opacity: 1; }

/* ---------- rich tooltip ---------- */

.tipt-date {
  font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-1);
}
.tipt-l1 { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tipt-badge {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px var(--s-2); border-radius: var(--radius); border: 1.5px solid currentColor;
}
/* The badge colours match the calendar squares they describe, so the tooltip
   reads as an explanation of the cell rather than a separate legend. */
.tipt-badge.full { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.tipt-badge.half { color: var(--accent); background: var(--accent-soft); }
.tipt-badge.off  { color: var(--muted); border-style: dashed; }
.tipt-badge.none { color: var(--muted); opacity: 0.7; }

.tipt-hrs { font-weight: 700; font-variant-numeric: tabular-nums; }
.tipt-count { color: var(--muted); }

.tipt-titles {
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line);
}
.tipt-title { color: var(--ink); font-size: var(--t-label); line-height: 1.5; }

/* Bulleted only when there is more than one, so a single title is a sentence
   rather than a list of one. */
.tipt-title.multi { padding-left: var(--s-4); position: relative; }
.tipt-title.multi + .tipt-title.multi { margin-top: var(--s-1); }
.tipt-title.multi::before {
  content: '•'; position: absolute; left: 0; color: var(--accent);
}
.tipt-note { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-micro); }

/* The dot marks "there is something to click here", so the affordance does not
   depend on hovering to discover it. */
.cal-cell.vod::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.65;
}

/* ---------- the wait ----------

   The panel is four columns of numbers that arrive together, so before they do
   there is nothing to show but four headings over empty space.

   IT IS THE PANEL, EMPTY, not an egg on its own. Borrowing the card's box means
   the popup still opens as the object you pressed a button to open; a loader
   floating on the page with no panel around it reads as something misfiring
   rather than as the panel filling in.

   The explicit [hidden] rule is not redundant: `.fc-load` sets `display`, and
   any class that sets display beats the browser's own [hidden] rule. */
.fc-load {
  /* Same box as .fc-card, so the panel is the same shape either way. The
     negative top margin is .fc-card's own, pulling the panel up under the
     navbar's border; it is not a spacing decision and has no step on the
     scale. */
  margin: calc(var(--s-1) * -1) 0 var(--s-5); background: var(--surface);
  border: var(--bw) solid var(--ink); border-radius: var(--radius);
  box-shadow: 9px 9px 0 var(--accent);
  display: grid; place-items: center; min-height: 300px;
}
[data-skin="sweet"] .fc-load { border-color: transparent; box-shadow: 0 24px 60px var(--shadow); }
.fc-load[hidden] { display: none; }
.fcpop.loading .fc-card { display: none; }

/* THE EVENT'S EMOTE. Sized in em so it rides the title's line rather than a
   fixed pixel height that stops matching the moment the title's size changes,
   and given a max-width because 7TV emotes are not all square: a wide one at
   a fixed height would push the title off the row. */
.up-emo {
  height: 1.35em; max-width: 2.6em; width: auto; object-fit: contain;
  vertical-align: -0.28em; margin-right: 0.35em;
}