/* Route pages swap the active-subscription screenshot for markup carrying their
   own stations, so this figure has to wear the bezel the <img> wears. It is also
   the query container: the screenshot scaled with the stage, and text does not,
   so every length below is a design pixel of the 366px app screen expressed in
   cqw. The fallback keeps the card readable where container queries are not
   supported; the second declaration wins everywhere they are. */
.seo-product-card {
  box-sizing: border-box;
  container-type: inline-size;
  overflow: hidden;
  border: 8px solid #17171d;
  border-radius: 30px;
  background: var(--trainys-paper);
  box-shadow: 0 32px 70px rgba(36, 36, 47, .28);
}

.monitor-screen {
  --u: 1.4px;
  --u: calc(100cqw / 366);
  display: block;
  color: var(--trainys-ink);
  font-size: calc(13 * var(--u));
}

.monitor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(3 * var(--u)) calc(10 * var(--u));
  padding: calc(13 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
}

.monitor-eyebrow {
  grid-area: 1 / 1;
  color: var(--trainys-coral);
  font-size: calc(11 * var(--u));
  font-weight: 950;
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
}

.monitor-heading {
  grid-area: 2 / 1;
  font-size: calc(27 * var(--u));
  font-weight: 950;
  line-height: .95;
}

.monitor-count {
  display: grid;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  grid-area: 1 / 2 / 3 / 3;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--trainys-coral);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(255, 116, 79, .22);
  font-size: calc(23 * var(--u));
  font-weight: 950;
  line-height: 1;
}

.monitor-card {
  overflow: hidden;
  margin: calc(5 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--trainys-line);
  border-radius: calc(22 * var(--u));
  background: #fff;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(36, 36, 47, .08);
}

.monitor-band {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: calc(11 * var(--u)) calc(14 * var(--u));
}

.monitor-band-label {
  flex: 1 1 auto;
  overflow: hidden;
  font-size: calc(12 * var(--u));
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-band-meta {
  flex: none;
  font-size: calc(10 * var(--u));
  font-weight: 850;
  white-space: nowrap;
}

.monitor-dot {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  flex: none;
  border-radius: 999px;
}

/* Both band palettes are darkened from the app's: #8d897f and #3f7a62 metas read
   at 3.4:1 and 4.4:1 on these tints, and this text is below 18px everywhere. */
.monitor-band-watch {
  background: #e7f3ec;
  box-shadow: inset 0 -1px 0 rgba(36, 36, 47, .05);
}

.monitor-band-watch .monitor-band-label {
  color: #15724e;
}

.monitor-band-watch .monitor-band-meta {
  color: #35705a;
}

.monitor-band-watch .monitor-dot {
  background: #1c8f62;
}

.monitor-band-match {
  color: #fff;
  background: var(--trainys-ticket);
}

.monitor-band-match .monitor-dot {
  background: var(--trainys-coral);
}

.monitor-chevron {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  flex: none;
  color: var(--trainys-coral);
}

.monitor-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(calc(96 * var(--u)), .7fr);
  gap: calc(12 * var(--u));
  min-height: calc(196 * var(--u));
  padding: calc(11 * var(--u));
}

.monitor-route {
  display: grid;
  align-content: center;
  gap: calc(10 * var(--u));
  min-width: 0;
  padding-right: calc(12 * var(--u));
  border-right: 1px solid var(--trainys-line);
}

.monitor-point {
  display: grid;
  gap: calc(4 * var(--u));
  min-width: 0;
}

.monitor-code {
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  font-size: calc(36 * var(--u));
  font-weight: 950;
  line-height: .92;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-code::after {
  position: absolute;
  right: 0;
  bottom: calc(2 * var(--u));
  left: 0;
  z-index: -1;
  height: calc(6 * var(--u));
  border-radius: 999px;
  background: var(--trainys-coral);
  content: "";
}

.monitor-point b {
  overflow: hidden;
  color: var(--trainys-muted);
  font-size: calc(11 * var(--u));
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The dash pattern is derived from the border width, so a fixed 2px rail keeps
   hairline dashes while the type around it scales up with the stage. */
.monitor-rail {
  width: calc(2 * var(--u));
  height: calc(30 * var(--u));
  margin-left: calc(31 * var(--u));
  border-left: calc(2 * var(--u)) dashed #bfbbae;
}

.monitor-details {
  display: grid;
  align-content: center;
  gap: calc(7 * var(--u));
  min-width: 0;
}

/* The app puts the train number here; without a timetable there is no number to
   put, so the slot carries the subscription's real state instead — two short
   lines where the app has one, at a size that keeps the block the same height. */
.monitor-details strong {
  font-size: calc(17 * var(--u));
  font-weight: 950;
  line-height: 1.05;
}

.monitor-details span,
.monitor-details b {
  font-size: calc(13 * var(--u));
  font-weight: 950;
  line-height: 1.15;
}

.monitor-details em {
  color: var(--trainys-muted);
  font-size: calc(12 * var(--u));
  font-style: normal;
  font-weight: 850;
}

/* Look-alikes, not controls: nothing here is clickable, so they must not be
   focus stops or announce themselves as buttons. */
.monitor-action {
  display: flex;
  min-height: calc(34 * var(--u));
  align-items: center;
  justify-content: center;
  padding: 0 calc(10 * var(--u));
  border: 1px solid var(--trainys-line);
  border-radius: calc(12 * var(--u));
  background: #fff;
  font-size: calc(12 * var(--u));
  font-weight: 900;
}

.monitor-action:first-of-type {
  margin-top: calc(3 * var(--u));
}

.monitor-action-danger {
  border-color: #efc1bc;
  color: #9c2d1b;
  background: #fff2ef;
}

/* Matches the thinner bezel the shots take at phone width. Declared after the
   figure rule above, which would otherwise win on source order. */
@media (max-width: 620px) {
  .seo-product-card {
    border-width: 6px;
    border-radius: 26px;
  }
}

/* The caption pill is centred over the figure and on a narrow card it is nearly
   as wide as the card, so it lands on the screen's own header. A screenshot can
   only sit under it; the card can step out of the way. */
@container (max-width: 420px) {
  .monitor-head {
    padding-top: calc(50 * var(--u));
  }
}