/* =========================================================
   UI-Element-Modem-Monitoring-Screen — card-media composition.
   WordPress variant of assets/Startpage Card Screens/
   UI-Element-Modem-Monitoring-Screen.html (published by
   startpage-card-scenes/register.php as snippet 160, linked by the
   shortcode snippet 159).

   Replaces `monitoring-screen_3.webm` in the start-page "02 Verbinden /
   Train-to-ground & WLAN" card. Same slot rules as the Device-Status
   screen (158): fluid width × 165px, 272px min, no scale wrapper.

   Story: the Unwired Edge Cloud monitoring tab for a vehicle router —
   a live signal-quality chart per modem. The video showed two equal
   charts, of which the card could only fit the first; here Modem 1
   (LTE) is the hero chart and Modem 2 (5G) a compact sparkline, so
   both fit the slot and both are legible.

   The beat (one per 8s loop): the LTE signal dips into the red band at
   the right edge; the active-SIM dot flips SIM1 → SIM2 and a
   "Failover → SIM2" chip appears; a few seconds later it quietly
   returns to SIM1 — the train stays connected.

   Differences from the standalone export: see 158 (no palette block,
   Core scene-contract overrides, sequenced mode).
   ========================================================= */

.c-ui-scene--modem-monitoring-screen {
  /* Permitted derived neutral tints (docs/ui-mockup-core.md). */
  --c-ui-tint-surface:       #f6f6f6;
  --c-ui-tint-border:        #ececec;
  --c-ui-tint-border-strong: #d6d6d6;
  /* UI-Mockup-Core aliases r500 but not r600; the red band of the
     quality gradient is the system's R600. Scene-local name on purpose:
     the `--c-ui-color-*` namespace belongs to Core. */
  --c-ui-mms-red: var(--R600);

  /* One loop for the chart scroll, the SIM flip and the chip; the
     sequencer (163) reads `--c-ui-scene-loop`. Entry delay (-43.75%)
     lands on a healthy frame: SIM1 active, chip hidden, the last dip
     already scrolled to mid-chart — the same frame the loop ends on,
     so a sequenced handover never jumps. */
  --c-ui-scene-loop: 8s;
  --c-ui-mms-loop: var(--c-ui-scene-loop);
  --c-ui-mms-entry: calc(var(--c-ui-mms-loop) * -0.4375);

  /* Overrides of the Core scene contract (see 158). */
  width: 100%;
  min-width: 272px;
  height: 165px;
  aspect-ratio: auto;
  margin: 0;
  /* Vertical budget (165): 14 pad + 22 tabs + 6 + 14 header + 3 + 62
     chart + 6 + 14 header + 3 + 22 sparkline + 7 pad = 163. The
     generous top pad keeps the tab bar off the card's media edge. */
  padding: 14px 8px 0;
  background: var(--c-ui-color-g50);
  font-size: 11px;
  overflow: hidden;
}

.c-ui-scene--modem-monitoring-screen,
.c-ui-scene--modem-monitoring-screen *,
.c-ui-scene--modem-monitoring-screen *::before,
.c-ui-scene--modem-monitoring-screen *::after { box-sizing: border-box; }

/* Card slot: corner treatment + sizing at (0,2,0), see 158. */
.c-card__media .c-ui-scene--modem-monitoring-screen {
  width: 100%;
  height: 165px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: var(--c-ui-radius-12) 0 var(--c-ui-radius-12) 0;
}

/* -------------------------
   Tab bar — console identity cue
------------------------- */
.c-ui-mms__tabs {
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c-ui-tint-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ui-color-g500);
  white-space: nowrap;
}
.c-ui-mms__tab {
  display: flex;
  align-items: center;
  padding: 0 2px;
  /* Transparent 2px bar on every tab so the active underline doesn't
     shift the baseline. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.c-ui-mms__tab--active {
  color: var(--c-ui-color-p800);
  border-bottom-color: var(--c-ui-color-p700);
}

/* -------------------------
   Modem header rows
------------------------- */
.c-ui-mms__head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 14px;
  margin-bottom: 3px;
  white-space: nowrap;
}
.c-ui-mms__name { font-weight: 600; }
.c-ui-mms__tech { color: var(--c-ui-color-g500); font-size: 10px; }

/* Anonymised device identifier — same skeleton-pill idiom as the
   Device-Status screen. */
.c-ui-mms__skeleton {
  display: inline-block;
  width: 44px;
  height: 9px;
  border-radius: 999px;
  background: var(--c-ui-tint-border);
}

/* SIM legend, right-aligned in the header row. Active SIM = filled
   green dot, standby = hollow grey ring. */
.c-ui-mms__sims {
  margin-left: auto;
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: var(--c-ui-color-g500);
}
.c-ui-mms__sim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.c-ui-mms__sim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--c-ui-color-g300);
  background: transparent;
}
.c-ui-mms__sim-dot--active {
  border-color: var(--c-ui-color-p700);
  background: var(--c-ui-color-p700);
}

/* -------------------------
   Charts
   Quality band = green (top/good) → yellow → red (bottom/poor), all
   derived from system tokens via color-mix. Vertical grid every 12.5%
   like the console's time grid.
------------------------- */
.c-ui-mms__chart {
  position: relative;
  height: 62px;
  border-radius: 4px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(12.5% - 1px),
      color-mix(in srgb, var(--c-ui-color-g800) 6%, transparent) calc(12.5% - 1px) 12.5%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-ui-color-p700) 30%, transparent) 0%,
      color-mix(in srgb, var(--c-ui-color-y600) 28%, transparent) 55%,
      color-mix(in srgb, var(--c-ui-mms-red) 26%, transparent) 100%
    );
}
.c-ui-mms__chart--spark {
  height: 22px;
  margin-bottom: 7px;
}

.c-ui-mms__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.c-ui-mms__line {
  fill: none;
  stroke: var(--c-ui-color-g800);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* preserveAspectRatio="none" stretches the viewBox; keep the stroke
     at CSS-pixel width regardless. */
  vector-effect: non-scaling-stroke;
}
.c-ui-mms__line--5g { stroke: var(--c-ui-color-b600); }

/* Scroll: the <g> holds two copies of a 200-unit pattern and
   translates by exactly one pattern per loop, so the wrap is seamless.
   CSS `px` in a transform on an SVG element are USER units
   (transform-box: view-box), which is what makes this work at any
   chart width — the viewBox is 200 wide, the CSS box is whatever the
   card gives us. */
.c-ui-mms__scroll {
  animation: c-ui-mms-scroll var(--c-ui-mms-loop) linear var(--c-ui-mms-entry) infinite;
}
@keyframes c-ui-mms-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-200px); }
}

/* -------------------------
   Failover beat
   Timing is derived from the dip's position in the pattern: the dip
   bottom sits at pattern x=180, so its copy at x=380 reaches the right
   edge (visible 200) after 180/200 of the scroll = 90% of the loop.
   The SIM flip + chip follow at 91% and SIM1 takes over again at 40%
   of the next cycle.
------------------------- */
.c-ui-mms__sim-dot--sim1 {
  animation: c-ui-mms-sim1 var(--c-ui-mms-loop) linear var(--c-ui-mms-entry) infinite;
}
.c-ui-mms__sim-dot--sim2 {
  animation: c-ui-mms-sim2 var(--c-ui-mms-loop) linear var(--c-ui-mms-entry) infinite;
}
/* Adjacent identical keyframes = hard switch, no tween. */
@keyframes c-ui-mms-sim1 {
  0%, 40%    { border-color: var(--c-ui-color-g300); background: transparent; }
  40.01%, 91% { border-color: var(--c-ui-color-p700); background: var(--c-ui-color-p700); }
  91.01%, 100% { border-color: var(--c-ui-color-g300); background: transparent; }
}
@keyframes c-ui-mms-sim2 {
  0%, 40%    { border-color: var(--c-ui-color-p700); background: var(--c-ui-color-p700); }
  40.01%, 91% { border-color: var(--c-ui-color-g300); background: transparent; }
  91.01%, 100% { border-color: var(--c-ui-color-p700); background: var(--c-ui-color-p700); }
}

.c-ui-mms__chip {
  position: absolute;
  top: 5px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 15px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-ui-color-g50);
  border: 1px solid var(--c-ui-color-p700);
  color: var(--c-ui-color-p800);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-ui-color-g800) 12%, transparent);
  opacity: 0;
  animation: c-ui-mms-chip var(--c-ui-mms-loop) linear var(--c-ui-mms-entry) infinite;
}
.c-ui-mms__chip svg {
  width: 9px;
  height: 9px;
  fill: var(--c-ui-color-p700);
}
/* Visible 91% → 100% → 22%, short fades at both ends. */
@keyframes c-ui-mms-chip {
  0%, 22%   { opacity: 1; transform: translateY(0); }
  26%, 90%  { opacity: 0; transform: translateY(-3px); }
  91%, 100% { opacity: 1; transform: translateY(0); }
}

/* -------------------------
   Sequenced mode (snippet 163) — idle scenes freeze on their base
   styles; the playing scene runs one `--c-ui-scene-loop` from the
   entry frame and ends on it. See 158 for the mechanism.
   The SIM dots and the chip already have base styles equal to the
   43.75% entry frame, the chart scroll does NOT: its base is
   translateX(0) while the entry frame sits 43.75% into the pattern
   (0.4375 × 200 = 87.5 user units). Without this rule the line would
   snap by 44% of the chart width every time the scene starts or
   freezes (found in review, 2026-10-19).
------------------------- */
.c-ui-scene--modem-monitoring-screen.is-uw-seq .c-ui-mms__scroll {
  transform: translateX(-87.5px);
}
.c-ui-scene--modem-monitoring-screen.is-uw-seq:not(.is-uw-playing) * {
  animation: none;
}

/* Reduced motion: freeze on the healthy frame. */
@media (prefers-reduced-motion: reduce) {
  .c-ui-mms__scroll,
  .c-ui-mms__sim-dot--sim1,
  .c-ui-mms__sim-dot--sim2,
  .c-ui-mms__chip { animation: none; }
}