/*
 * Stylesheet of the OTA console single-page UI.
 *
 * Author: Trinh Van Phuc
 * Task-ID: #3954
 */

/* Road-sign visual language: sign blue for the top bar and buttons, signal
   yellow for "published / running", and Bahnschrift (a DIN-style font bundled
   with Windows; it covers Vietnamese except the rare letter y with hook above). */
:root {
  --sign: #0e4c8a;
  --sign-deep: #0b3d6f;
  --sign-text-2: #c9daee;
  --signal: #f2b705;
  --signal-ink: #7a5200;
  --asphalt: #2e3540;
  --muted: #5b6573;
  --kerb: #8d99a6;
  --line: #d3d9e0;
  --road: #eef1f4;
  --plate: #fff;
  --ok: #1f7a4d;
  --bad: #b42318;
  --font: Bahnschrift, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}

/* Pseudo-elements too: the stop circles and the rail are sized by border-box. */
*, *::before, *::after { box-sizing: border-box; }

/* Author display rules (nav { display: flex }) beat the browser's [hidden]
   rule, which once showed the menu before login. */
[hidden] { display: none !important; }

html { -webkit-tap-highlight-color: rgba(14, 76, 138, .15); }

body {
  margin: 0;
  background: var(--road);
  color: var(--asphalt);
  font: 15px/1.5 var(--font);
}

a { color: var(--sign); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
/* Drop the double-tap-to-zoom delay on touch screens. */
a, button, input, select, textarea, label { touch-action: manipulation; }
h1, h2 { text-wrap: balance; }

/* Skip link: parked above the page, shown when reached with Tab. */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 14px 16px;
  color: var(--sign);
  background: #fff;
  font-weight: 600;
  border: 3px solid var(--asphalt);
  border-radius: 3px;
  text-box: trim-both cap alphabetic;
}
.skip:focus { top: 8px; }

/* Optical centering: Bahnschrift reserves room below the baseline, so text sits
   ~1.5px above the box center (measured on every button and tab). text-box trims
   the text box to the cap height and baseline before centering. It only applies
   to block containers: <button> takes it directly; button-like links, tabs and
   app-pick links become blocks and get their height back from 1cap-based padding. */
.brand, .who { text-box: trim-both cap alphabetic; }

/* --- Top bar ---
   Content is one centered column at most 1280px wide; the text of the top bar
   lines up with the edge of the content below. */
header.top {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-height: 56px;
  padding: 0 max(32px, calc((100% - 1280px) / 2 + 32px));
  background: var(--sign);
  color: #fff;
}
.brand {
  align-self: center;
  font-size: 20px;
  font-weight: 600;
  font-stretch: 87.5%;
  white-space: nowrap;
}
nav { display: flex; flex: 1; align-items: stretch; min-width: 0; }
.tabs { display: flex; align-items: stretch; overflow-x: auto; }
.tabs a {
  display: block;
  /* 48px + two 4px bars = 56px, the top bar height. */
  padding: calc((48px - 1cap) / 2) 14px;
  text-box: trim-both cap alphabetic;
  color: #fff;
  text-decoration: none;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { background: var(--sign-deep); }
/* Current page: a yellow bar, like the current stop on the route. */
.tabs a.active { border-bottom-color: var(--signal); font-weight: 600; }
.tabs a:focus-visible, .account button:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.account { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-left: 16px; }
.who { color: var(--sign-text-2); white-space: nowrap; }
.account button {
  height: 34px;
  padding: 0 12px;
  font: 14px var(--font);
  color: #fff;
  background: transparent;
  border: 1px solid var(--sign-text-2);
  border-radius: 3px;
  cursor: pointer;
}
.account button:hover { background: var(--sign-deep); }

/* Language switch: two joined buttons on the blue sign; the current language
   is the filled one. */
.langs { display: flex; }
.langs button {
  height: 34px;
  min-width: 40px;
  padding: 0 10px;
  font: 600 13px var(--font);
  color: #fff;
  background: transparent;
  border: 1px solid var(--sign-text-2);
  border-radius: 0;
  cursor: pointer;
}
.langs button:first-child { border-radius: 3px 0 0 3px; }
.langs button:last-child { border-left: 0; border-radius: 0 3px 3px 0; }
.langs button:hover:not([aria-pressed="true"]) { background: var(--sign-deep); }
.langs button[aria-pressed="true"] { color: var(--sign); background: #fff; border-color: #fff; cursor: default; }
.langs button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
/* On the login screen: the top right corner of the page. */
.login-langs { position: absolute; top: 16px; right: 16px; }

/* --- Page frame --- */
main { max-width: 1280px; margin: 0 auto; padding: 28px 32px 56px; }
/* main is focused only by the skip link (tabindex=-1); it is not a click target. */
main:focus { outline: none; }
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 4px;
}
.page-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  font-stretch: 87.5%;
  line-height: 1.2;
}
.lead { margin: 0 0 20px; max-width: 72ch; color: var(--muted); }

.plate {
  margin: 0 0 20px;
  padding: 20px 24px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.plate h2 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.hint { margin: 0 0 14px; color: var(--muted); max-width: 72ch; }

.msg {
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--plate);
  border-left: 4px solid var(--ok);
  border-radius: 0 3px 3px 0;
  color: var(--ok);
}
.msg.err { border-left-color: var(--bad); color: var(--bad); }

/* --- Forms --- */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.field { margin: 0 0 14px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; margin: 0 0 4px; font-size: 14px; color: var(--muted); }
/* A value the console reads itself, shown at the height of the inputs beside it. */
.field output { display: flex; align-items: center; min-height: 40px; }
input, select, textarea {
  width: 100%;
  font: 15px var(--font);
  color: var(--asphalt);
  background: #fff;
  border: 2px solid var(--kerb);
  border-radius: 3px;
}
input, select { height: 40px; padding: 0 10px; }
textarea { padding: 8px 10px; resize: vertical; }
input[type=file] { height: auto; padding: 7px 8px; border-style: dashed; }
input:focus, select:focus, textarea:focus { border-color: var(--sign); outline: 3px solid var(--sign); outline-offset: 1px; }
/* Hide Edge's native password reveal and clear buttons; the login form has its own toggle. */
input::-ms-reveal, input::-ms-clear { display: none; }
progress { display: block; width: 100%; height: 8px; margin-top: 12px; accent-color: var(--sign); }

/* --- Buttons --- */
button { font: 15px var(--font); cursor: pointer; }
.go, .quiet {
  height: 40px;
  padding: 0 18px;
  border-radius: 3px;
  white-space: nowrap;
}
button:not(.link) { text-box: trim-both cap alphabetic; }
/* Button-like links: going to another page stays an <a> (it can open in a new
   tab) but matches the buttons next to it: same 40/32px height (minus the 1px
   border of .quiet). */
a.go, a.quiet { display: inline-block; height: auto; text-decoration: none; text-box: trim-both cap alphabetic; }
a.go { padding-block: calc((40px - 1cap) / 2); }
a.quiet { padding-block: calc((38px - 1cap) / 2); }
a.quiet.small { padding-block: calc((30px - 1cap) / 2); }
.go { color: #fff; background: var(--sign); border: 0; font-weight: 600; }
.go:hover:not(:disabled) { background: var(--sign-deep); }
.quiet { color: var(--sign); background: #fff; border: 1px solid var(--kerb); }
.quiet:hover:not(:disabled) { border-color: var(--sign); }
.small { height: 32px; padding: 0 12px; font-size: 14px; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--asphalt); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }

/* --- Tables --- */
/* position: relative keeps the absolutely placed .sr-only header inside the
   scroll box; without it that header widens the whole page on phones. */
.scroll { overflow-x: auto; margin: 0 0 20px; position: relative; }
table.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--plate);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
table.grid th {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--asphalt);
}
/* Cells in a row share the baseline of their first line: the large version
   number, app name, file name, status and actions read as one line. */
table.grid td {
  padding: 10px 12px;
  vertical-align: baseline;
  border-bottom: 1px solid var(--line);
}
table.grid tr:last-child td { border-bottom: 0; }
td.empty { color: var(--muted); text-align: center; padding: 24px 12px; }
.sub { display: block; font-size: 13px; color: var(--muted); }
.hash { font-family: var(--mono); font-size: 13px; color: var(--muted); word-break: break-all; }
.nowrap { white-space: nowrap; }

/* The version number is the main subject of the console: condensed, bold and
   large, like sign lettering. */
.ver { font-weight: 600; font-stretch: 87.5%; white-space: nowrap; }
.ver.big { font-size: 24px; line-height: 1.15; }
.ver.huge { font-size: 36px; line-height: 1.1; }

.ok { color: var(--ok); }
.bad { color: var(--bad); }
/* "Published" / "public": a signal-yellow dot before the text. */
.live { color: var(--signal-ink); font-weight: 600; white-space: nowrap; }
.live::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 2px var(--signal-ink);
}

.idle { color: var(--muted); white-space: nowrap; }

/* Row actions (Installers): text links kept on one right-aligned line; wrapping
   with right alignment would stagger the left edges of the links. */
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; white-space: nowrap; }
.prune-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
button.link.danger { color: var(--bad); }

/* --- Storage and the app picker --- */
.app-name { font-weight: 600; font-size: 16px; }

/* --- Releases --- */
.app-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
/* Each app is a link (#/releases/<appid>), so a reload keeps the selected app. */
.app-pick a {
  display: inline-block;
  /* 38px + 1px border = 40px; long names that wrap keep their top/bottom padding. */
  padding: calc((38px - 1cap) / 2) 14px;
  text-box: trim-both cap alphabetic;
  font-size: 15px;
  font-weight: 400;
  color: var(--asphalt);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--kerb);
  border-radius: 3px;
}
.app-pick a:hover { border-color: var(--sign); }
.app-pick a[aria-current="page"] { border: 2px solid var(--sign); color: var(--sign); font-weight: 600; padding: calc((36px - 1cap) / 2) 13px; }
.live-plate { display: grid; grid-template-columns: auto 1fr; gap: 4px 28px; align-items: end; }
.live-plate .label { grid-column: 1 / -1; }
/* Mark inside a circle: Bahnschrift reserves room below the baseline, so the
   glyph sits ~1.4px above center. Trim the text box to the cap height before
   centering; text-box only applies to block containers, so it goes on the child
   (the grid item), not on the circle. */
.warning-icon { font-variant-numeric: tabular-nums; }
.warning-icon > span { line-height: 1; text-box: trim-both cap alphabetic; }

/* --- Pre-publish check: summary list of key / value / action --- */
button.link {
  padding: 0;
  font: inherit;
  color: var(--sign);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.link:hover { text-decoration-thickness: 2px; }
.back {
  display: inline-block;
  position: relative;
  margin: 0 0 12px;
  /* The text box is trimmed to the cap height, so the arrow's top: 50% lands on
     the middle of the text. */
  padding: 6px 0 6px 14px;
  text-box: trim-both cap alphabetic;
  font-size: 14px;
  color: var(--asphalt);
}
/* Arrow drawn with borders: it does not depend on the font having a "‹" glyph. */
.back::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: translateY(-50%) rotate(45deg);
}
.check-title { margin: 0 0 4px; font-size: 28px; font-weight: 600; font-stretch: 87.5%; line-height: 1.2; }
.check-title:focus { outline: none; }

.summary-list {
  max-width: 900px;
  margin: 0 0 20px;
  padding: 0 24px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.summary-list .row {
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.summary-list .row:last-child { border-bottom: 0; }
.summary-list dt { font-weight: 600; }
.summary-list dd { margin: 0; min-width: 0; }
.summary-list dd.act { text-align: right; white-space: nowrap; }
.summary-list .ver.was { color: var(--muted); }
.arrow { margin: 0 10px; font-size: 20px; color: var(--muted); }
.sub.inline { display: inline; font-size: 15px; }
.cmd { font-family: var(--mono); font-size: 14px; word-break: break-all; }
.cmd-edit { max-width: 900px; margin-top: -8px; }
.cmd-edit .fields { gap: 14px 20px; }
.cmd-edit .field { margin-bottom: 0; }

/* Warning: bold text next to an exclamation mark in a circle; not yellow,
   because yellow is reserved for "published". */
.warning { display: flex; gap: 14px; align-items: flex-start; max-width: 72ch; margin: 24px 0; }
.warning p { margin: 7.5px 0 0; font-weight: 600; }
.warning-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--asphalt);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.check-form { max-width: 420px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Published: a large green panel, then "Next". */
.panel-done {
  max-width: 900px;
  margin: 0 0 24px;
  padding: 28px 24px;
  color: #fff;
  background: var(--ok);
  border-radius: 4px;
  text-align: center;
}
.panel-done h1 { margin: 0 0 6px; font-size: 34px; font-weight: 600; font-stretch: 87.5%; line-height: 1.15; }
.panel-done h1:focus { outline: none; }
.panel-done p { margin: 0; font-size: 17px; word-break: break-word; }
.next-title { margin: 0 0 4px; font-size: 21px; font-weight: 600; }

/* --- Health: a task list, one plate per group --- */
.summary { margin: 0 0 20px; font-size: 19px; }
#view-health .page-head { max-width: 900px; }
.task-group { max-width: 900px; padding-bottom: 6px; }
.task-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.task-head h2 { margin: 0; }
/* Same right inset as the text inside the status tags below. */
.task-head > span { padding-right: 10px; font-weight: 600; white-space: nowrap; }
.tasks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.task {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: 0; }
.task-main { min-width: 0; }
.task-name { display: block; font-size: 17px; overflow-wrap: anywhere; }
.task-hint { display: block; color: var(--muted); word-break: break-word; }
.task-fix { margin: 10px 0 2px; padding-left: 12px; border-left: 4px solid var(--bad); }
.task-fix p { margin: 0 0 8px; max-width: 72ch; }
/* Status tag: a pass is plain text, a fail gets a red background to catch the eye. */
.tag { flex: none; padding: 5px 10px; border-radius: 3px; font-weight: 600; white-space: nowrap; text-box: trim-both cap alphabetic; }
.tag.bad { color: #8a1c12; background: #fbe3e0; }

/* --- Confirm dialog --- */
dialog {
  width: calc(100% - 32px);
  max-width: 600px;
  padding: 24px;
  color: var(--asphalt);
  border: 0;
  border-radius: 4px;
  /* Scrolling inside the dialog does not scroll the page behind it. */
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgba(11, 61, 111, .55); }
dialog h2 { margin: 0 0 12px; font-size: 24px; font-weight: 600; font-stretch: 87.5%; }
dialog pre {
  margin: 0 0 16px;
  padding: 12px 14px;
  white-space: pre-wrap;
  font: 13px/1.6 var(--mono);
  background: var(--road);
  border-radius: 3px;
}
dialog .field { margin-bottom: 12px; }
dialog menu { display: flex; justify-content: flex-end; gap: 10px; margin: 18px 0 0; padding: 0; }

/* --- Login screen ---
   Draws the real path of an update: Build -> Console -> OTA server -> User
   machine. The form sits at the Console stop because that is the checkpoint
   before an update reaches every machine. */
body.is-login { background: var(--sign); color: #fff; }
body.is-login header.top { display: none; }
body.is-login main { max-width: none; padding: 0; }

.login {
  max-width: 900px;
  padding: clamp(32px, 7vh, 72px) 16px 56px clamp(16px, 17vw, 320px);
}
.login-product { margin: 0; font-size: 15px; color: var(--sign-text-2); }
.login-title {
  margin: 2px 0 40px;
  font-size: 32px;
  font-weight: 600;
  font-stretch: 87.5%;
  line-height: 1.1;
}

/* Route of stops. --dot: stop circle diameter; --dot-top: offset from the top
   of a stop to its circle, which puts the dot center level with the middle of
   the stop name's capitals (measured on an 8x zoomed screenshot). */
.route { --dot: 34px; --dot-top: -3.5px; list-style: none; margin: 0; padding: 0 0 0 48px; }
.stop { position: relative; padding: 0 0 26px; }
.stop:last-child { padding-bottom: 0; }
.stop::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -48px;
  top: var(--dot-top);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--stop-fill, var(--sign));
}
/* Rail: each segment joins the center of this stop to the center of the next,
   so it always passes through the circle centers and never runs past the last stop. */
.stop:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-48px + var(--dot) / 2 - 2px);
  top: calc(var(--dot-top) + var(--dot) / 2);
  bottom: calc(0px - var(--dot-top) - var(--dot) / 2);
  width: 4px;
  background: #fff;
  transform-origin: top;
}
.stop-name { display: block; font-size: 24px; font-weight: 600; font-stretch: 87.5%; line-height: 1.3; }
.stop-note { display: block; font-size: 15px; }

.login .stop { padding-bottom: 30px; }
.login .stop:last-child { padding-bottom: 0; }
.login .stop-note { color: var(--sign-text-2); }
/* Draw the rail top to bottom once on load, like an update passing each stop. */
.login .stop:not(:last-child)::after { animation: rail-draw 240ms linear both; }
.login .stop:nth-child(2)::after { animation-delay: 240ms; }
.login .stop:nth-child(3)::after { animation-delay: 480ms; }
@keyframes rail-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Current stop: the only accent on the page. */
.login .stop-here { --stop-fill: var(--signal); }
.login .stop-here .stop-name { color: var(--signal); }
.login .stop:not(.stop-here) .stop-name { color: var(--sign-text-2); }

/* Form plate: a plain white sign plate, no shadow. */
.login .plate { margin: 16px 0 6px; max-width: 380px; padding: 22px 24px 18px; color: var(--asphalt); border: 0; }
/* Visually hidden but read by screen readers (e.g. the login form heading,
   which would repeat the text of the Login button). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.login .plate label { display: block; margin: 14px 0 4px; font-size: 15px; }
.login .plate label:first-of-type { margin-top: 0; }
.login .plate input { height: 42px; padding: 0 12px; font-size: 16px; }

.pw { position: relative; }
.pw input { padding-right: 64px; }
.pw-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 34px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--sign);
  background: transparent;
  border: 0;
  border-radius: 2px;
}
.pw-toggle:hover { text-decoration: underline; }
.pw-toggle:focus-visible { outline: 3px solid var(--sign); outline-offset: 0; }

.caps { margin: 6px 0 0; font-size: 13px; color: var(--signal-ink); }

.login .plate button.go { display: block; width: 100%; height: 46px; margin-top: 20px; font-size: 17px; }
.login .plate button.go:disabled { opacity: 1; background: var(--kerb); cursor: progress; }

.login-error {
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 4px solid var(--bad);
  color: var(--bad);
}
.login-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* Browsers without text-box (Firefox): 1cap-based padding would make
   button-like links ~52px and the top bar ~68px tall, so keep the older
   centering with flex and fixed heights. */
@supports not (text-box: trim-both cap alphabetic) {
  a.go, a.quiet { display: inline-flex; align-items: center; height: 40px; padding-block: 0; }
  a.quiet.small { height: 32px; }
  .tabs a { display: flex; align-items: center; padding-block: 0; }
  .app-pick a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 6px; }
  .app-pick a[aria-current="page"] { padding-block: 5px; }
  .back { padding-block: 0; }
  @media (max-width: 700px) {
    .tabs a { height: 42px; padding-block: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .stop::after { animation: none !important; }
}

/* --- Narrow screens --- */
@media (max-width: 700px) {
  header.top { flex-wrap: wrap; gap: 0 16px; padding: 0 16px; }
  .brand { padding: 12px 0 4px; }
  nav { flex-basis: 100%; flex-wrap: wrap; }
  /* Wrap instead of scrolling sideways, so the last tab is never hidden. */
  .tabs { flex-basis: 100%; flex-wrap: wrap; margin: 0 -16px; padding: 0 4px; overflow: visible; }
  .tabs a { padding-block: calc((34px - 1cap) / 2); }
  .account { margin: 0 0 10px; padding: 0; }
  main { padding: 20px 16px 40px; }
  .page-head h1 { font-size: 24px; }
  .ver.huge { font-size: 30px; }
  .live-plate { grid-template-columns: minmax(0, 1fr); }
  .plate { padding: 16px; }
  .summary-list { padding: 0 16px; }
  /* Key on top, value below, action on a line of its own. */
  .summary-list .row { grid-template-columns: minmax(0, 1fr); }
  .summary-list dd.act { text-align: left; }
  .summary-list dd.act:empty { display: none; }
  .check-title { font-size: 24px; }
  .panel-done h1 { font-size: 28px; }
}
@media (max-width: 600px) {
  .login { padding: 28px 16px 40px; }
  .login-title { margin-bottom: 28px; font-size: 28px; }
  .login .stop-name { font-size: 21px; }
  /* A smaller stop name puts the middle of its capitals ~1.2px higher: move the dot up with it. */
  .route { --dot-top: -4.7px; }
  .login .plate { padding: 18px 16px 16px; }
}