/* Live: the stop monitor that stands in the device's place (js/live.js), after a Vienna stop's passenger display:
   a red mast with the brand set vertically, the stop sign H, the mode and the line plates; a dark housing with a
   red rim, column heads and an amber LED board; a white stop sign below. It keeps its own colours in light and
   dark (the board stays dark, the mast red, the sign white). Around it the website's own controls. */
.uhrschnell-page .us-live-view {
  --mon-mast: #c62828;
  --mon-mast-light: #d9483c;
  --mon-mast-shade: #a31d1d;
  --mon-housing: #2c2f33;
  --mon-head: #f1f1f1;
  --mon-led: #0b0b09;
  --mon-led-dot: #251d0b;
  --mon-amber: #ffb000;
  --mon-amber-dim: #d0940f;
  --mon-sign: #ffffff;
  --mon-sign-text: #111111;
  --mon-sign-muted: #3d3d3d;
  --mon-sign-edge: #8f949a;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  width: min(100%, 30rem);
  min-width: 0;
}

/* The monitor reacts to its own width: under 400px (phones, a 280px column) a 32px mast, tight padding and line
   and minutes at 24px; from 400px a 40px mast and 32px. Destinations, info and the bottom line stay at 16px, so
   the destination column keeps room for long Viennese names. Every LED face is a multiple of 8px. */
.uhrschnell-page .us-mon { container: monitor / inline-size; position: relative; min-width: 0; }
.uhrschnell-page .us-mon-room { position: absolute; top: 0; left: 0; width: 0; height: var(--us-room, 600px); visibility: hidden; pointer-events: none; }
.uhrschnell-page .us-mon-stop { --mast-w: 32px; display: grid; grid-template-columns: var(--mast-w) minmax(0, 1fr); }

/* Mast: drawn with the structural offset like the Reise; its content never sizes it (contain: size), the monitor does. */
.uhrschnell-page .us-mon-mast {
  contain: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  padding: 10px 0 0;
  background: linear-gradient(90deg, var(--mon-mast-light), var(--mon-mast) 45%, var(--mon-mast-shade));
  box-shadow: 6px 6px 0 var(--pixel-shadow);
  color: #ffffff;
}
.uhrschnell-page .us-mon-brand { writing-mode: vertical-rl; font: 500 1rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #ffffff; }
.uhrschnell-page .us-mon-mast-signs { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.uhrschnell-page .us-mon-halt svg { display: block; width: 28px; height: 28px; }
.uhrschnell-page .us-mon-mode { display: grid; place-items: center; height: 32px; }
.uhrschnell-page .us-mon-mode .us-glyph { width: 32px; height: 32px; color: #ffffff; }
.uhrschnell-page .us-mon-plates { display: flex; flex-direction: column; width: 100%; }
.uhrschnell-page .us-mon-plates > span { display: grid; place-items: center; height: 28px; border-top: 2px solid #ffffff; font: 800 1rem/1 var(--font-ui); color: #ffffff; white-space: nowrap; }
.uhrschnell-page .us-mon-plates > span.is-long { font-size: .875rem; letter-spacing: -.02em; }

/* Housing: dark grey with the red rim, white column heads, then the LED board. */
.uhrschnell-page .us-mon-body { display: flex; flex-direction: column; min-width: 0; }
.uhrschnell-page .us-mon-housing {
  position: relative;
  padding: 2px 4px 4px;
  background: var(--mon-housing);
  border: 3px solid var(--mon-mast);
  box-shadow: 6px 6px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-mon-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; min-width: 0; padding: 0 2px 2px; overflow-wrap: break-word; hyphens: auto; font: 700 .875rem/1.5 var(--font-ui); color: var(--mon-head); }

/* LED board: amber Uhrschnell Pixel on almost black, a fine raster of unlit dots. Its height is fixed by the
   number of slots the window has room for (--led-rows, js/live.js) plus the bottom slot, so nothing on the page
   moves while departures come and go or an info line opens. */
.uhrschnell-page .us-mon-led {
  --led-slot: 48px;
  --led-pad: 6px;
  position: relative;
  box-sizing: border-box;
  height: calc((var(--led-rows, 8) + 1) * var(--led-slot) + 2 * var(--led-pad) + 4px);
  padding: var(--led-pad) 4px;
  overflow: hidden;
  background: radial-gradient(circle at 1.5px 1.5px, var(--mon-led-dot) 1px, transparent 1.5px) 0 0 / 4px 4px, var(--mon-led);
  border: 2px solid #121315;
  color: var(--mon-amber);
  font: 500 1rem/1.25 var(--font-pixel);
  text-shadow: 0 0 6px rgb(255 176 0 / .35);
}
.uhrschnell-page .us-mon-status { position: absolute; top: var(--led-pad); left: 6px; right: 6px; margin: 0; padding-top: 4px; font: inherit; color: var(--mon-amber); }
.uhrschnell-page .us-mon-status:empty { display: none; }
.uhrschnell-page .us-mon-led[data-state="loading"] .us-mon-status::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -3px;
  background: currentColor;
  animation: us-led-blink 1s steps(1, end) infinite;
}
@keyframes us-led-blink { 50% { visibility: hidden; } }

/* Rows: line number large left, destination in up to two lines (broken only between words; a word longer than
   the column is cut at the edge, never split), minutes right. One grid, so the columns line up across rows. */
.uhrschnell-page .us-mon-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; margin: 0; padding: 0; list-style: none; }
.uhrschnell-page .us-mon-rows > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.uhrschnell-page .us-mon-rows > li:has(> [aria-expanded="true"]) { background: #1d1709; }
.uhrschnell-page .us-mon-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  height: var(--led-slot);
  margin: 0;
  padding: 0 2px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-shadow: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uhrschnell-page .us-mon-row:hover { background: #17130b; }
.uhrschnell-page .us-mon-row:focus-visible { outline: 3px solid var(--mon-amber); outline-offset: -3px; }
.uhrschnell-page .us-mon-line { font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.uhrschnell-page .us-mon-towards {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  font-size: 1rem;
  line-height: 1.25;
}
/* A single word longer than the column runs off its edge like on a real board, fading out instead of breaking. */
.uhrschnell-page .us-mon-towards.is-cut { -webkit-mask-image: linear-gradient(to left, transparent, #000 1rem); mask-image: linear-gradient(to left, transparent, #000 1rem); }
.uhrschnell-page .us-mon-minutes { display: flex; align-items: center; justify-content: flex-end; min-width: 24px; font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.uhrschnell-page .us-mon-number[hidden] { display: none; }
/* Under a minute the asterisk blinks in held steps, drawn on the LED grid (7 × 7 at 3 or 4px). */
.uhrschnell-page .us-mon-soon { width: 21px; height: 21px; fill: currentColor; shape-rendering: crispEdges; filter: drop-shadow(0 0 3px rgb(255 176 0 / .5)); animation: us-led-blink 1s steps(1, end) infinite; }
/* The info line of a tapped or focused row takes the next slot; the bottom slot gives way to it. */
.uhrschnell-page .us-mon-info {
  grid-column: 2 / -1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  box-sizing: border-box;
  height: var(--led-slot);
  margin: 0;
  padding: 4px 2px 0 0;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.25;
}
.uhrschnell-page .us-mon-info[hidden] { display: none; }
.uhrschnell-page .us-mon-more { display: flex; align-items: center; height: var(--led-slot); margin: 0; padding: 0 2px; font-size: 1rem; line-height: 1.25; }
.uhrschnell-page .us-mon-more.is-hint { color: var(--mon-amber-dim); text-shadow: none; }
.uhrschnell-page .us-mon-more[hidden] { display: none; }
@container monitor (min-width: 400px) {
  .uhrschnell-page .us-mon-stop { --mast-w: 40px; }
  .uhrschnell-page .us-mon-housing { padding: 2px 8px 8px; }
  .uhrschnell-page .us-mon-led { padding-inline: 6px; }
  .uhrschnell-page .us-mon-status { left: 8px; right: 8px; }
  .uhrschnell-page .us-mon-rows { column-gap: 8px; }
  .uhrschnell-page :is(.us-mon-line, .us-mon-minutes) { font-size: 2rem; }
  .uhrschnell-page .us-mon-minutes { min-width: 38px; }
  .uhrschnell-page .us-mon-soon { width: 28px; height: 28px; }
}

/* Stop sign: white, the name large in black Manrope, the lines below, the star saves the stop. */
.uhrschnell-page .us-mon-sign {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 10px 12px;
  background: var(--mon-sign);
  color: var(--mon-sign-text);
  border: 2px solid var(--mon-sign-edge);
  border-top: 0;
  box-shadow: 6px 6px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-mon-sign-text { flex: 1; min-width: 0; }
.uhrschnell-page .us-mon .us-mon-name { margin: 0; font: 800 1.5rem/1.15 var(--font-ui); letter-spacing: -.015em; color: var(--mon-sign-text); overflow-wrap: break-word; text-wrap: balance; }
/* One line is always reserved, so the sign keeps its height while a stop's departures load (hubs take a second). */
.uhrschnell-page .us-mon-lines { min-height: 1.4em; margin: 2px 0 0; font: 600 .875rem/1.4 var(--font-ui); color: var(--mon-sign-muted); }
@container monitor (min-width: 440px) {
  .uhrschnell-page .us-mon .us-mon-name { font-size: 1.75rem; }
}

.uhrschnell-page .us-pixel-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: inset -2px -2px 0 var(--bevel), 2px 2px 0 var(--ink);
  cursor: pointer;
}
.uhrschnell-page .us-pixel-button .us-icon { width: 22px; height: 22px; }
.uhrschnell-page .us-pixel-button:active { transform: translate(2px, 2px); box-shadow: inset -2px -2px 0 var(--bevel); }
.uhrschnell-page .us-pixel-button[aria-pressed="true"] { --icon-fill: #ffcc00; }
.uhrschnell-page .us-pixel-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.uhrschnell-page .us-pixel-button[hidden] { display: none; }

/* Around the monitor, in the page's own look: square fields and chips with the action offset. */
.uhrschnell-page .us-live-view .us-label { display: block; margin: 0 0 .25rem; font: 750 var(--fs-small)/1.4 var(--font-ui); color: var(--text); }
.uhrschnell-page .us-live-view .us-hint { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); }
.uhrschnell-page .us-live-view .us-hint:empty, .uhrschnell-page .us-live-view .us-hint[hidden] { display: none; }
.uhrschnell-page .us-live-search { position: relative; z-index: 4; }
.uhrschnell-page .us-live-view .us-field {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 .75rem;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--control-border);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-live-view .us-field:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.uhrschnell-page .us-live-view .us-field input {
  flex: 1;
  min-width: 0;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-body)/1.3 var(--font-ui);
  /* The line's search tile brings the field into view: below the header, on S below the sticky line too. */
  scroll-margin: calc(var(--navigation-height, 64px) + 3rem) 0 1rem;
}
.uhrschnell-page .us-live-view .us-field input:focus-visible { outline: none; }
.uhrschnell-page .us-live-view .us-field input::placeholder { color: var(--text-secondary); opacity: 1; }
@media (max-width: 639px) {
  .uhrschnell-page .us-live-view .us-field input { scroll-margin-top: calc(var(--navigation-height, 64px) + 112px + 2rem); }
}
.uhrschnell-page .us-live-drop {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: min(60vh, 22rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface-card);
  border: 2px solid var(--control-border);
  box-shadow: 5px 5px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-live-drop[hidden] { display: none; }
.uhrschnell-page .us-live-drop .us-results { display: flex; flex-direction: column; }
.uhrschnell-page .us-live-drop .us-results:empty { display: none; }
.uhrschnell-page .us-live-drop .us-hint { padding: .6rem .85rem; }
.uhrschnell-page .us-live-drop .us-result {
  min-height: 44px;
  padding: .6rem .85rem;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--separator);
  font: 650 var(--fs-body)/1.35 var(--font-ui);
  cursor: pointer;
}
.uhrschnell-page .us-live-drop .us-result:last-child { border-bottom: 0; }
.uhrschnell-page .us-live-drop .us-result:hover { background: var(--accent-tint); }
.uhrschnell-page .us-live-drop .us-result:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.uhrschnell-page .us-live-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding-top: .25rem; }
.uhrschnell-page .us-live-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); }
.uhrschnell-page .us-live-meta .us-icon { width: 1rem; height: 1rem; color: var(--text); }
.uhrschnell-page .us-live-meta .text-button { min-height: 44px; margin-left: auto; padding-block: 0; font-size: var(--fs-small); }
.uhrschnell-page .us-live-meta .text-button[hidden] { display: none; }
.uhrschnell-page .us-live-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.uhrschnell-page .us-live-chips:empty { display: none; }
.uhrschnell-page .us-live-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem .75rem;
  background: var(--surface-card);
  color: var(--text);
  border: 2px solid var(--control-border);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  font: 750 var(--fs-small)/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.uhrschnell-page .us-live-chip .us-icon { width: 1.1rem; height: 1.1rem; }
.uhrschnell-page .us-live-chip:hover { background: var(--surface-subtle); }
.uhrschnell-page .us-live-chip[aria-current="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.uhrschnell-page .us-live-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.uhrschnell-page :is(.us-live-note, .us-live-source) { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); }
.uhrschnell-page .us-live-note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .uhrschnell-page .us-mon-soon, .uhrschnell-page .us-mon-led[data-state="loading"] .us-mon-status::after { animation: none; }
}
@media (forced-colors: active) {
  .uhrschnell-page :is(.us-mon-mast, .us-mon-housing, .us-mon-sign, .us-live-view .us-field, .us-live-chip) { box-shadow: none; }
  .uhrschnell-page .us-mon-led { border-color: CanvasText; }
  .uhrschnell-page .us-mon-row:focus-visible { outline-color: Highlight; }
}