/* OBEINSON FREQUENCY X — the counts strip on phones.
 *
 * Ships with stats-in-player.js and only with it. This file hides the strip on
 * the landing; that script is what puts it back on screen inside the player
 * while a station plays. Shipping the stylesheet without the script would hide
 * the figures on phones with nothing to bring them back.
 *
 * Nothing here applies above phone width: the strip stays in the header on a
 * tablet or a desktop exactly as before.
 */

/* ---- the landing: gone, while the strip is still in the header ----
   Scoped to `header` rather than to the element, so the moment the script
   moves it into #nowFab the rule stops matching and it shows, with no class to
   keep in step. */
html.obn-phone header #obnHitCount { display: none !important; }

/* ---- inside the player ---- */
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer {
  display: flex !important;
  /* hit-count.css gives #obnHitCount `order: 101` so it sits at the END of the
     header. #nowFab is also a flex column, so that order came with it and sank
     the strip to the bottom of the player, behind the mini bar, wherever it was
     actually inserted. These three undo the header layout it is no longer in. */
  order: 0 !important;
  flex: 0 0 auto !important;
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 12px;
  width: 100%;
  margin: 8px 0 2px;
  padding: 7px 10px;
  border-radius: 10px 2px 10px 2px;        /* the chart's cut-corner motif */
  border: 1px solid rgba(130, 170, 215, .18);
  background: linear-gradient(160deg, rgba(130, 170, 215, .10), rgba(130, 170, 215, .03));
  font: 600 10.5px/1.35 var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9db2cc;
  -webkit-text-fill-color: #9db2cc;
}

/* `:not([hidden])` is not decoration. live-stats.js hides the "Daily hits"
   row with the hidden attribute, because the strip leads with people and the
   lifetime total is the one hit figure worth the room. A bare `> span` rule
   sets a display and overrides that attribute, which put "Daily hits" back on
   screen here only. */
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer > span:not([hidden]),
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer > .obnStat:not([hidden]) {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer > [hidden] { display: none !important; }

/* the figures themselves carry the weight and the colour */
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer strong {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  color: #ffb039;
  -webkit-text-fill-color: #ffb039;
}

/* "Listening now" is the one that moves while you listen, so it leads in the
   player's own live colour rather than the amber the totals use. */
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer .obnStatLive strong {
  color: #45e3a0;
  -webkit-text-fill-color: #45e3a0;
}

/* The status line ("Loading counts…" / "Counts unavailable") is a whole
   sentence and would wrap the strip onto three lines inside a player that is
   mostly controls. It stays in the markup for screen readers and still shows
   in the header on wider screens; here it is only taken out of the flow. */
html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer #obnHitState {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:root[data-theme="light"] html.obn-phone #nowFab #obnHitCount.obnStatsInPlayer,
html.obn-phone :root[data-theme="light"] #nowFab #obnHitCount.obnStatsInPlayer {
  border-color: #d3dde8;
  background: linear-gradient(160deg, #ffffff, #eef4fa);
  color: #55687e;
  -webkit-text-fill-color: #55687e;
}