/* Scorigami Watch: pulse header, tonight board, landed list, near misses.
   Editorial, data first, calm. Global tokens only, so light and dark both
   work. wb- prefixes the board; wl- survives for the landed list. */

/* -------------------------------------------------- pulse header */
.wb-pulse {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 5px;
  box-shadow: var(--shadow);
}
.wb-pulse-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wb-pulse-lab {
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.wb-pulse-clock {
  font: 700 clamp(26px, 5vw, 38px)/1.05 var(--disp);
  color: var(--ink);
}
.wb-pulse-game {
  font: 400 13.5px/1.45 var(--body);
  color: var(--ink2);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-pulse-game b { font-family: var(--mono); color: var(--accent-deep); }
@media (hover: hover) { .wb-pulse-game:hover b { text-decoration: underline; } }
.wb-pulse-none { margin: 0; font: 400 14px var(--body); color: var(--muted); }
.wb-pulse-side {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 18px;
  border-left: 1px solid var(--hair);
  color: var(--muted);
}
.wb-pulse-side.is-hot { color: var(--cat2); }
.wb-pulse-n { font: 700 30px/1 var(--disp); }
.wb-pulse-sidelab { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .07em; }

/* -------------------------------------------------- sections */
.wb-sec { margin: 0 0 28px; }
.wb-sec:last-child { margin-bottom: 0; }
.wb-h {
  margin: 0 0 4px;
  font: 700 clamp(17px, 2.6vw, 21px)/1.15 var(--disp);
  letter-spacing: .01em;
  color: var(--ink);
}
.wb-h-n { font: 400 14px var(--mono); color: var(--muted); margin-left: 4px; }
.wb-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font: 400 12.5px/1.4 var(--body);
  color: var(--muted);
}
.wl-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: wl-pulse 2s infinite;
}
@keyframes wl-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.wb-empty { margin: 0; font: 400 14.5px/1.55 var(--body); color: var(--ink2);
  padding: 18px; background: var(--surface); border: 1px solid var(--hair); border-radius: 5px; }

/* -------------------------------------------------- tonight board */
.wb-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wb-game {
  /* Anchor for the score link's full-row tap stretch below. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
/* The whole card is one tap target (same pattern as .feed .fscorelink):
   only the small score text used to navigate. */
.wb-game-score::after, .wb-near-score::after {
  content: "";
  position: absolute;
  inset: 0;
}
.wb-game.is-brink { border-color: var(--cat2); border-left-width: 3px; }
.wb-game.is-hot:not(.is-brink) { border-color: var(--accent); }
.wb-game-score {
  flex: none;
  min-width: 84px;
  font: 700 22px var(--disp);
  color: var(--ink);
  text-decoration: none;
}
@media (hover: hover) { .wb-game-score:hover { color: var(--accent); } }
.wb-game-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wb-game-teams {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 13.5px var(--body); color: var(--ink2);
}
.wb-game-meta { font: 400 11.5px var(--body); color: var(--muted); }
.wb-brink-tag { color: color-mix(in srgb, var(--cat2) 72%, var(--ink)); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
.wb-meter { height: 5px; background: var(--paper); border: 1px solid var(--hair); overflow: hidden; max-width: 340px; }
.wb-meter i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.wb-meter.is-hot i { background: var(--cat2); }
.wb-game-chance {
  flex: none;
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.wb-game-chance b { font: 700 17px var(--mono); color: var(--ink); }
.wb-game.is-hot .wb-game-chance b { color: var(--cat2); }
.wb-game-chance span { font: 400 10.5px/1.3 var(--body); color: var(--muted); }

.wb-later {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 12px;
  font: 400 12.5px var(--body); color: var(--muted);
}
.wb-later-lab { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.wb-later-game { color: var(--ink2); white-space: nowrap; }
.wb-later-game i { font-style: normal; color: var(--muted); }

/* -------------------------------------------------- landed list */
/* The day's scorigamis as a quiet editorial results list, not a stack of
   boxes: hairline dividers, the score carrying the color (orange today). */
.wl-landed-list { list-style: none; margin: 0; padding: 0; }
.wl-landed { border-top: 1px solid var(--hair); }
.wl-landed:first-child { border-top: 0; }
.wl-landed a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 2px; text-decoration: none;
}
.wl-landed-score { flex: none; min-width: 66px; font: 700 21px var(--disp); color: var(--ink2); }
.wl-landed.is-today .wl-landed-score { color: var(--cat2); }
.wl-landed-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wl-landed-teams {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 14px var(--body); color: var(--ink2);
}
@media (hover: hover) { .wl-landed a:hover .wl-landed-teams { color: var(--ink); } }
.wl-landed-meta { font: 400 11.5px var(--body); color: var(--muted); }

/* -------------------------------------------------- near misses */
.wb-near-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wb-near {
  position: relative;   /* anchor for the .wb-near-score::after row stretch */
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 4px;
}
.wb-near-score {
  flex: none; min-width: 64px;
  font: 700 16px var(--mono); color: var(--ink);
  text-decoration: none;
}
@media (hover: hover) { .wb-near-score:hover { color: var(--accent); } }
.wb-near-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-near-teams { font: 600 13px var(--body); color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-near-meta { font: 400 11.5px var(--body); color: var(--muted); }
/* The never-seen deep link stays tappable ABOVE the full-row stretch. */
.wb-near-meta a { color: var(--accent-deep); text-decoration: none; position: relative; z-index: 1; }
@media (hover: hover) { .wb-near-meta a:hover { text-decoration: underline; } }
@media (pointer: coarse) {
  /* Grow the ~15px never-seen link to a usable target without moving layout. */
  .wb-near-meta a { display: inline-block; padding: 8px 6px; margin: -8px -6px; }
}

/* -------------------------------------------------- skeleton */
.pf-skel {
  position: relative; display: block; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  border-radius: 4px;
}
.pf-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--ink) 10%, transparent), transparent);
  animation: wb-sheen 1.25s infinite;
}
@keyframes wb-sheen { to { transform: translateX(100%); } }
.wb-skel-pulse { height: 64px; width: 100%; }
.wb-skel-row { height: 58px; width: 100%; margin-bottom: 8px; }

/* -------------------------------------------------- motion + narrow */
@media (prefers-reduced-motion: reduce) {
  .wl-dot { animation: none; }
  .pf-skel::after { animation: none; }
}
@media (max-width: 560px) {
  .wb-pulse { flex-direction: column; gap: 10px; }
  .wb-pulse-side { margin-left: 0; border-left: 0; border-top: 1px solid var(--hair);
    padding: 10px 0 0; flex-direction: row; gap: 8px; align-items: baseline; }
  .wb-game { flex-wrap: wrap; }
  .wb-game-chance { width: auto; flex-direction: row; gap: 6px; align-items: baseline; }
}