/* Step on board: Journeys. Screen design mock-ups, 07-11-2026.
   Builds on /dsb/assets/css/style.css and /dsb/ombord/assets/ride.css: same tokens, same top bar,
   same stage and driver's display. Mobile first. System fonts only. */

:root {
  --ok: #2fbf71;
  --ok-2: #8fe3b0;
  --late: #f2b33d;
  --very-late: #ef3349;
  --glass: rgba(8, 9, 12, .62);
  --glass-line: rgba(255, 255, 255, .14);
  --card: #16181e;
  --card-2: #1b1e25;
  --map-sea: #0f1822;
  --map-land: #1c2129;
  --map-coast: #2b333e;
  --map-rail: rgba(255, 255, 255, .13);
  --map-route: #ef3349;
  --map-route-glow: rgba(239, 51, 73, .22);
  --map-done: #f4f5f7;
}

/* ---------- Mock-up note (not part of the design) ---------- */
.mk-note { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 400; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(242, 179, 61, .92); color: #15171c; font: 700 11px/1.3 var(--font); letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.mk-hide-note .mk-note { display: none; }

/* ---------- Shared bits ---------- */
.j-i { display: inline-block; vertical-align: middle; width: 20px; height: 20px; flex: none; fill: currentColor; }
.j-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.j-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.j-chip--red { border-color: transparent; background: var(--red); color: #fff; }
.j-chip--amber { border-color: rgba(242, 179, 61, .45); color: #f6d48e; background: rgba(242, 179, 61, .08); }
.j-chip--ok { border-color: rgba(47, 191, 113, .45); color: var(--ok-2); background: rgba(47, 191, 113, .08); }
.j-chip--soft { border-color: transparent; background: rgba(255, 255, 255, .07); color: #d5d9df; }
.j-chip .j-i { width: 14px; height: 14px; }
.j-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.j-muted { color: var(--muted); }
.j-sep { height: 1px; border: 0; margin: 0; background: var(--line); }

.j-main { padding: calc(var(--top) + 22px) 0 56px; }
.j-hero { margin-bottom: 22px; }
.j-hero .eyebrow--plate { margin-bottom: 14px; }
.j-title { font-size: clamp(34px, 9vw, 60px); font-weight: 800; }
.j-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: -9px 0 5px; padding-right: 8px; color: var(--muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.j-back .j-i { width: 18px; height: 18px; }

/* ---------- Route cards (ready-made journeys) ---------- */
.rc-filter { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 16px; padding: 0 var(--gutter) 2px; scrollbar-width: none; }
.rc-filter::-webkit-scrollbar { display: none; }
.rc-filter button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 14px; font-weight: 650; cursor: pointer; }
.rc-filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

.rc-grid { display: grid; gap: 14px; }
.rc { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease); }
.rc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.rc-media > img, .rc-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-map svg { width: 100%; height: 100%; display: block; }
.rc-media.rc-media--map::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 86%, rgba(10, 11, 14, .45) 100%); }   /* the last station name near the bottom stays readable */
.rc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(10, 11, 14, .85) 100%); pointer-events: none; }
.rc-tags { position: absolute; left: 12px; top: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-tags .j-chip { background: rgba(8, 9, 12, .7); border-color: rgba(255, 255, 255, .18); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rc-tags .j-chip--red { background: var(--red); border-color: transparent; }
.rc-mapthumb { position: absolute; left: 12px; bottom: 12px; z-index: 1; width: 34%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.rc-mapthumb svg { width: 100%; height: 100%; display: block; }
.rc-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 18px; flex: 1; }
.rc-title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.rc-title .arr { color: var(--faint); font-weight: 600; margin: 0 4px; }
.rc-sub { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.rc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 10px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.rc-facts div { background: var(--card-2); padding: 8px 10px; }
.rc-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rc-facts dd { margin: 2px 0 0; font: 700 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.rc-line { display: flex; align-items: center; gap: 0; padding: 2px 4px 0; }
.rc-line i { flex: 1; height: 2px; background: rgba(255, 255, 255, .18); }
.rc-line b { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--card); border: 2px solid rgba(255, 255, 255, .55); }
.rc-line b.is-end { width: 12px; height: 12px; border-color: var(--red-2); background: var(--red-2); }
.rc-line .is-sea { background: repeating-linear-gradient(90deg, #5aa7d6 0 6px, transparent 6px 10px); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 2px; }
.rc-best { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.rc-best b { color: var(--text); font-size: 14px; }
.rc-best .j-i { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; fill: var(--amber); }
.rc .btn { flex: none; }
@media (hover: hover) { .rc:hover { border-color: var(--line-2); transform: translateY(-2px); } }

.rc--feature .rc-media { aspect-ratio: 16 / 9; }

.rc-own { display: grid; gap: 14px; align-items: center; margin-top: 18px; padding: 20px; border-radius: var(--radius); border: 1px dashed rgba(255, 255, 255, .22); background: linear-gradient(135deg, rgba(210, 18, 46, .08), rgba(255, 255, 255, .02)); }
.rc-own h2 { font-size: 22px; font-weight: 800; }
.rc-own p { margin-top: 6px; color: var(--muted); font-size: 15px; }

@media (min-width: 700px) {
  .rc-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .rc--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; }
  .rc--feature .rc-media { aspect-ratio: auto; min-height: 330px; }
  .rc--feature .rc-media::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 60%, rgba(22, 24, 30, .9) 100%); }
  .rc--feature .rc-body { padding: 24px; justify-content: center; }
  .rc--feature .rc-title { font-size: 28px; }
  .rc-own { grid-template-columns: 1fr auto; padding: 24px 28px; }
}
@media (min-width: 1100px) {
  .rc-grid { grid-template-columns: repeat(3, 1fr); }
  .rc--feature { grid-column: 1 / -1; }
}

/* ---------- Planner ---------- */
.pl { display: grid; gap: 18px; }
.pl-card { padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.pl-card + .pl-card { margin-top: 14px; }
.pl-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 17px; font-weight: 800; }
.pl-h small { font-size: 13px; font-weight: 600; color: var(--faint); }
.pl-step { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--muted); font: 800 12px/1 var(--font); flex: none; align-self: center; }

.fld-pair { position: relative; display: grid; gap: 8px; }
.fld { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); }
.fld:focus-within, .fld.is-focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242, 179, 61, .18); }
.fld-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text); }
.fld-dot.is-to { background: var(--red-2); border-color: var(--red-2); }
.fld-in { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fld-in span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.fld-in b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld-swap { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text); cursor: pointer; }
.fld-swap .j-i { width: 18px; height: 18px; }

.dd { margin-top: 6px; border-radius: 12px; overflow: hidden; background: #1f232b; border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9); }
.dd-q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 650; }
.dd-q .j-i { fill: var(--faint); }
.dd-q em { font-style: normal; border-right: 2px solid var(--amber); padding-right: 1px; }
.dd ul { list-style: none; margin: 0; padding: 6px; }
.dd li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 8px; font-size: 15px; }
.dd li.is-active { background: rgba(255, 255, 255, .07); }
.dd li mark { background: none; color: var(--amber); font-weight: 750; }
.dd li small { color: var(--faint); font-size: 12px; font-weight: 650; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.seg button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; line-height: 1.2; cursor: pointer; }
.seg button small { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.seg button[aria-pressed="true"] { background: #3a3f49; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 18px -10px rgba(0, 0, 0, .8); }
.seg button[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }
.seg--round { border-radius: 999px; }
.seg--round button { border-radius: 999px; min-height: 44px; }

.stops { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.stops::before { content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 2px; background: rgba(255, 255, 255, .14); }
.stops li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; min-height: 48px; }
.stops li > i { justify-self: center; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid rgba(255, 255, 255, .6); }
.stops li.is-end > i { width: 16px; height: 16px; background: var(--red-2); border-color: var(--red-2); }
.stops li.is-skip > i { border-color: rgba(255, 255, 255, .25); width: 8px; height: 8px; }
.stops li.is-skip .st-n { color: var(--faint); font-weight: 600; }
.stops li.is-sea > i { opacity: 0; }
.st-n { font-weight: 700; font-size: 15px; }
.st-n small { display: block; font-weight: 600; font-size: 12.5px; color: var(--faint); }
.tgl { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 0; cursor: pointer; transition: background-color .2s; }
.tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.tgl::before { content: ""; position: absolute; inset: -8px -6px; }   /* a finger-sized hit area, same look */
.tgl[aria-checked="true"] { background: var(--ok); }
.tgl[aria-checked="true"]::after { transform: translateX(18px); }
.tgl[disabled] { opacity: .45; }
.stops .st-cross { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(90, 167, 214, .08); border: 1px solid rgba(90, 167, 214, .25); color: #bfe0f3; font-size: 13px; font-weight: 650; }
.stops .st-cross .j-i { width: 18px; height: 18px; }

.ch-grid { display: grid; gap: 10px; }
.ch { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: start; padding: 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); text-align: left; color: var(--text); cursor: pointer; }
.ch-ic { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--muted); }
.ch-ic .j-i { width: 26px; height: 26px; }
.ch b { font-size: 15.5px; font-weight: 750; }
.ch span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ch .ch-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ch[aria-pressed="true"] { border-color: rgba(255, 255, 255, .5); background: #2a2e36; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.ch[aria-pressed="true"] .ch-ic { background: rgba(255, 255, 255, .1); color: #fff; }
.ch[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2315171c' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ch[aria-disabled="true"] { opacity: .55; cursor: default; }

.pl-aside { display: flex; flex-direction: column; gap: 14px; }
.pl-map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--map-sea); }
.pl-map svg { width: 100%; height: 100%; display: block; }
.pl-sum { padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.pl-sum h2 { font-size: 20px; font-weight: 800; }
.pl-sum dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 14px 0 16px; }
.pl-sum dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pl-sum dd { margin: 2px 0 0; font: 700 16px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.pl-sum .btn { width: 100%; }
.pl-note { display: flex; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.pl-note .j-i { width: 16px; height: 16px; margin-top: 1px; fill: var(--faint); }

/* phone: the start button stays in reach */
.pl-bar { position: sticky; bottom: 0; z-index: 30; margin: 18px calc(var(--gutter) * -1) -56px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(13, 14, 17, .92); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; align-items: center; gap: 12px; }
.pl-bar div { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.pl-bar b { display: block; color: var(--text); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) {
  .pl { grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
  .pl-aside { position: sticky; top: calc(var(--top) + 20px); }
  .pl-bar { display: none; }
  .ch-grid--2 { grid-template-columns: 1fr 1fr; }
  .fld-pair { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fld-swap { right: auto; left: 50%; transform: translate(-50%, -50%); }
  .fld + .fld { padding-left: 30px; }
}
@media (max-width: 959px) { .pl-aside .pl-sum .btn { display: none; } .j-main.pl-page { padding-bottom: 0; } }

/* ---------- Journey screens: the stage with a journey panel ---------- */
.jx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.jx-head h1 { font-size: clamp(22px, 5vw, 30px); font-weight: 800; }
.jx-head h1 .arr { color: var(--faint); font-weight: 600; margin: 0 6px; }
.jx-head .j-chip { margin-right: 4px; }
.jx-sw { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
.jx-sw button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.jx-sw button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.jx-sw .j-i { width: 18px; height: 18px; }

.so-stage .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* journey bar: next stop with planned time and punctuality */
.jb { position: absolute; left: 12px; top: 64px; width: min(330px, calc(100% - 112px)); padding: 10px 12px 11px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: #fff; }
.jb-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 2px; }
.jb-row b { font-size: 17px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-row .j-num { font-size: 15px; font-weight: 700; }
.jb-times { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: #d5d9df; }
.jb-times .j-num { font-weight: 700; color: #fff; }
.jb-pill { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.jb-pill.is-ok { background: rgba(47, 191, 113, .18); color: var(--ok-2); }
.jb-pill.is-late { background: rgba(242, 179, 61, .18); color: #f6d48e; }
.jb-pill.is-early { background: rgba(90, 167, 214, .2); color: #bfe0f3; }
.jb-bar { position: relative; height: 3px; margin-top: 9px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.jb-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--red); }

.jx-mapbtn { position: absolute; right: 108px; bottom: 12px; }

/* journey panel beside the stage */
.jp { display: flex; flex-direction: column; gap: 12px; }
.jp-card { padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.jp-prog { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jp-prog b { font: 700 22px/1 var(--mono); font-variant-numeric: tabular-nums; }
.jp-prog span { color: var(--muted); font-size: 13px; }
.jp-track { position: relative; height: 6px; margin-top: 12px; border-radius: 6px; background: rgba(255, 255, 255, .09); }
.jp-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--red), var(--red-2)); }
.jp-track em { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(239, 51, 73, .35); }

.tt { list-style: none; margin: 0; padding: 0; }
.tt li { position: relative; display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0; font-size: 14px; }
.tt li::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .12); }
.tt li:first-child::before { top: 50%; }
.tt li:last-child::before { bottom: 50%; }
.tt li.is-done::before { background: rgba(255, 255, 255, .45); }
.tt li > i { position: relative; z-index: 1; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid rgba(255, 255, 255, .5); }
.tt li.is-done > i { background: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .8); }
.tt li.is-next > i { width: 14px; height: 14px; background: var(--red-2); border-color: var(--red-2); box-shadow: 0 0 0 4px rgba(239, 51, 73, .25); }
.tt li.is-next { font-weight: 750; }
.tt .tt-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt li.is-done .tt-n { color: var(--muted); }
.tt .tt-t { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 700; color: #d5d9df; }
.tt .tt-d { min-width: 52px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 750; }
.tt .tt-d.is-ok { color: var(--ok-2); }
.tt .tt-d.is-late { color: #f6d48e; }
.tt .tt-d.is-early { color: #bfe0f3; }
.tt .tt-d.is-none { color: var(--faint); font-weight: 600; }
.tt-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tt-head small { color: var(--faint); font-size: 12px; font-weight: 650; }
.tt li.is-sea { min-height: 30px; }
.tt li.is-sea > i { opacity: 0; }
.tt li.is-sea .tt-n { display: inline-flex; align-items: center; gap: 6px; color: #9fcbe6; font-size: 12.5px; font-weight: 650; }
.tt li.is-sea .tt-n .j-i { width: 16px; height: 16px; }
.tt li.is-sea::before { background: repeating-linear-gradient(180deg, #5aa7d6 0 4px, transparent 4px 8px); }

.jp-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.jp-key span { display: inline-flex; align-items: center; gap: 6px; }
.jp-key i { width: 8px; height: 8px; border-radius: 50%; }

@media (min-width: 960px) {
  .so-app.jx-app { grid-template-columns: minmax(0, 1fr) 320px; }
  .jx-app .so-stage { aspect-ratio: 16 / 10; }
}

/* ---------- Map view ---------- */
.jmap { width: 100%; height: 100%; display: block; }
.jmap-st circle { fill: var(--map-land); stroke: #f4f5f7; stroke-width: 2.5; }
.jmap-st.is-end circle { fill: var(--map-route); stroke: #fff; stroke-width: 2.5; }
.jmap-st.is-passed circle { fill: #f4f5f7; }
.jmap-st text { fill: #f4f5f7; font: 700 17px var(--font); paint-order: stroke; stroke: rgba(10, 13, 18, .85); stroke-width: 4px; stroke-linejoin: round; }
.jmap-st.is-end text { font-size: 19px; font-weight: 800; }
.jmap-note { fill: rgba(170, 196, 220, .5); font: italic 600 18px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.jmap-train circle { fill: var(--map-route); stroke: #fff; stroke-width: 3; }
.jmap-train .pulse { fill: rgba(239, 51, 73, .25); stroke: none; animation: jm-pulse 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.jmap-train path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes jm-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.rc-mapthumb .jmap-st text, .rc-media .jmap-st text { font-size: 30px; stroke-width: 6px; }
.rc-mapthumb .jmap-note, .rc-mapthumb .jmap-st text { display: none; }

.mv { position: absolute; inset: 0; background: var(--map-sea); }
.mv-card { position: absolute; left: 12px; top: 12px; width: min(300px, calc(100% - 24px)); padding: 12px 14px; border-radius: 12px; background: rgba(13, 14, 17, .86); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mv-card .jb-row b { font-size: 16px; }
.mv-zoom { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: rgba(13, 14, 17, .86); }
.mv-zoom button { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 22px; font-weight: 600; cursor: pointer; }
.mv-zoom button + button { border-top: 1px solid var(--line-2); }
.mv-credit { position: absolute; right: 10px; bottom: 8px; margin: 0; color: rgba(255, 255, 255, .55); font-size: 10.5px; }
.mv-follow { position: absolute; left: 12px; bottom: 12px; }
.mv-mini { position: absolute; right: 12px; bottom: 30px; width: 30%; max-width: 240px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .9); }
.mv-mini img { width: 100%; height: 100%; object-fit: cover; }
.mv-mini span { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 700; }

/* ---------- Station stop ---------- */
.ss { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 18px 18px 16px; border-radius: var(--radius); background: rgba(20, 22, 27, .94); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); text-align: center; }
.ss-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-2); }
.ss-name { margin-top: 4px; font-size: 26px; font-weight: 800; }
.ss-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 2px; }
.ss-score b { font: 800 52px/1 var(--font); letter-spacing: -.03em; }
.ss-score span { font-size: 17px; font-weight: 700; color: var(--muted); }
.ss-verdict { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--ok-2); }
.ss .so-res-bars { margin-top: 14px; }
.ss .so-res-bars div { grid-template-columns: 104px 1fr; }
.ss-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px; border-radius: 10px; overflow: hidden; background: var(--line); border: 1px solid var(--line); text-align: left; }
.ss-detail div { padding: 8px 10px; background: var(--card-2); }
.ss-detail dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ss-detail dd { margin: 2px 0 0; font: 700 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.ss-dep { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); text-align: left; }
.ring { position: relative; flex: none; width: 46px; height: 46px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .r0 { stroke: rgba(255, 255, 255, .12); }
.ring .r1 { stroke: var(--amber); stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--mono); }
.ss-dep p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.ss-dep p b { color: var(--text); font-size: 14px; }

/* ---------- Great Belt crossing ---------- */
.gx { position: absolute; z-index: 3; left: 12px; right: 108px; bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: #fff; }
.gx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gx-top b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 750; }
.gx-top b .j-i { width: 20px; height: 20px; fill: #9fcbe6; }
.gx-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 10px; }
.gx-steps div { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 650; color: var(--muted); line-height: 1.3; }
.gx-steps div::before { content: ""; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.gx-steps div.is-done { color: #d5d9df; }
.gx-steps div.is-done::before { background: rgba(255, 255, 255, .7); }
.gx-steps div.is-now { color: #fff; }
.gx-steps div.is-now::before { background: linear-gradient(90deg, #5aa7d6 0 58%, rgba(255, 255, 255, .14) 58%); }
.gx-steps small { font: 700 11.5px/1 var(--mono); color: var(--faint); }
.gx-skip { min-height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; flex: none; }
.gx-banner { position: absolute; z-index: 3; left: 50%; top: 18%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(8, 9, 12, .7); border: 1px solid var(--glass-line); color: #fff; font-weight: 750; font-size: 15px; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gx-banner span { color: var(--muted); font-weight: 600; margin-left: 6px; }

/* ---------- Dialogs and overlays ---------- */
.ov { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 14px; background: rgba(5, 6, 8, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ov--page { position: fixed; z-index: 200; padding: 16px; overflow: auto; place-items: start center; }
.ov--page > .dlg { margin: auto 0; max-height: none; overflow: visible; }
.ov--page { display: flex; flex-direction: column; align-items: center; }
.dlg { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 22px 20px 20px; border-radius: 18px; background: #17191f; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.dlg--wide { width: min(620px, 100%); }
.dlg-x { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; }
.dlg-x .j-i { width: 18px; height: 18px; }
.dlg h2 { font-size: 22px; font-weight: 800; padding-right: 44px; }
.dlg > p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* welcome / tutorial start */
.wl { width: min(520px, 100%); text-align: left; }
.wl .eyebrow { margin-bottom: 8px; }
.wl h2 { font-size: clamp(26px, 6vw, 34px); padding-right: 0; }
.wl-steps { display: grid; gap: 10px; margin: 18px 0; }
.wl-steps div { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; }
.wl-steps .ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--red-2); }
.wl-steps b { font-size: 15px; }
.wl-steps span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.wl-route { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.wl-route .j-i { fill: var(--red-2); width: 22px; height: 22px; }
.wl-route div { flex: 1; min-width: 0; }
.wl-route b { display: block; font-size: 15px; }
.wl-route span { color: var(--muted); font-size: 13px; }
.wl-act { display: grid; gap: 8px; margin-top: 16px; }
@media (min-width: 520px) { .wl-act { grid-template-columns: 1fr auto; } }

/* turn your phone */
@media (prefers-reduced-motion: reduce) { .jmap-train .pulse { animation: none; } }

/* ---------- Summary ---------- */
.sm { display: grid; gap: 16px; }
.sm-hero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: #000; }
.sm-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 14, 17, .1) 0%, rgba(13, 14, 17, .92) 78%); }
.sm-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 90px 18px 20px; }
.sm-score { display: flex; align-items: baseline; gap: 6px; }
.sm-score b { font: 800 clamp(64px, 16vw, 104px)/.9 var(--font); letter-spacing: -.04em; }
.sm-score span { font-size: 22px; font-weight: 700; color: var(--muted); }
.sm-route { font-size: clamp(20px, 4.6vw, 28px); font-weight: 800; }
.sm-route .arr { color: var(--faint); font-weight: 600; margin: 0 6px; }
.sm-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--radius); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.sm-stats div { padding: 14px 16px; background: var(--card); }
.sm-stats dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sm-stats dd { margin: 4px 0 0; font: 700 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.sm-stats dd small { font: 600 13px var(--font); color: var(--muted); }
.sm-card { padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.sm-card h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.sm-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.sm-tbl th { padding: 0 0 8px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sm-tbl td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.sm-tbl td:first-child { font-weight: 700; }
.sm-tbl .r { text-align: right; }
.sm-tbl .j-num { font-weight: 700; }
.sm-bar { display: block; width: 100%; max-width: 160px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: 8px; background: var(--ok); }
.sm-bar i.is-ok { background: var(--amber); }
.sm-tbl .hide-s { display: none; }
.sm-act { display: grid; gap: 10px; }
.sm-act .btn { width: 100%; }
.sm-private { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.sm-private .j-i { width: 18px; height: 18px; fill: var(--faint); margin-top: 1px; }
.sm-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
@media (min-width: 600px) { .sm-tbl .hide-s { display: table-cell; } .sm-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) {
  .sm { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 20px; }
  .sm-hero-in { padding: 160px 28px 28px; }
  .sm-side { position: sticky; top: calc(var(--top) + 20px); display: flex; flex-direction: column; gap: 14px; }
}
.sm-side, .sm-mainc { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- Share ---------- */
.og { position: relative; aspect-ratio: 1200 / 630; border-radius: 12px; overflow: hidden; background: #000; container-type: inline-size; border: 1px solid var(--line-2); }
.og img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.og::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 14, .94) 0%, rgba(10, 11, 14, .78) 42%, rgba(10, 11, 14, 0) 72%); }
.og-in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 5cqw 5cqw; width: 66%; }
.og-brand { display: flex; align-items: center; gap: 1.6cqw; font-size: 2.6cqw; font-weight: 750; color: #fff; }
.og-brand i { display: grid; place-items: center; width: 5.2cqw; height: 5.2cqw; border-radius: 1.3cqw; background: var(--red); font: 800 2cqw/1 var(--font); font-style: normal; }
.og-t { font-size: 2.3cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-2); }
.og-score { display: flex; align-items: baseline; gap: 1cqw; margin-top: .6cqw; }
.og-score b { font: 800 12.5cqw/.9 var(--font); letter-spacing: -.04em; color: #fff; }
.og-score span { font-size: 4cqw; font-weight: 700; color: #a5abb6; }
.og-route { margin-top: 1cqw; font-size: 3.9cqw; font-weight: 800; color: #fff; line-height: 1.1; }
.og-meta { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.6cqw; }
.og-meta span { padding: .5cqw 1.4cqw; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #d5d9df; font-size: 1.9cqw; font-weight: 700; white-space: nowrap; }
.og-meta .v { background: rgba(47, 191, 113, .18); border-color: transparent; color: var(--ok-2); }
.og-url { font-size: 2.1cqw; font-weight: 650; color: #a5abb6; }
@supports not (container-type: inline-size) { .og-in { font-size: 10px; } }

.sh-prev { margin: 16px 0 6px; }
.sh-prev-cap { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--faint); font-size: 12.5px; }
.sh-prev-cap .j-i { width: 14px; height: 14px; }
.sh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.sh-b { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); font-size: 12.5px; font-weight: 650; cursor: pointer; }
.sh-b span.ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.sh-b span.ic svg { width: 22px; height: 22px; fill: #fff; }
.sh-copy { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); }
.sh-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px var(--mono); color: #d5d9df; }
.sh-copy .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.sh-opts { display: grid; gap: 4px; margin-top: 14px; }
.sh-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 14px; }
.sh-opt div { display: flex; flex-direction: column; }
.sh-opt small { color: var(--faint); font-size: 12.5px; }
@media (min-width: 560px) { .sh-grid { grid-template-columns: repeat(7, 1fr); } }

/* verified result page */
.vr { display: grid; gap: 16px; }
.vr-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(47, 191, 113, .14); color: var(--ok-2); font-size: 13px; font-weight: 750; }
.vr-badge .j-i { width: 18px; height: 18px; }
.vr-who { display: flex; align-items: center; gap: 12px; }
.av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #2a6f97, #1b3a4b); color: #fff; font-weight: 800; font-size: 16px; flex: none; }
.vr-who b { display: block; font-size: 16px; }
.vr-who span { color: var(--muted); font-size: 13px; }
.vr-cta { padding: 20px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(210, 18, 46, .18), rgba(210, 18, 46, .04)); border: 1px solid rgba(239, 51, 73, .35); }
.vr-cta h2 { font-size: 22px; font-weight: 800; }
.vr-cta p { margin: 6px 0 14px; color: #d5d9df; font-size: 15px; }
@media (min-width: 960px) { .vr { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 20px; } }

/* ---------- Top ten ---------- */
.tp-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 14px; padding: 0 var(--gutter); scrollbar-width: none; }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tabs button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.tp-tabs button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.tp { list-style: none; margin: 0; padding: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.tp li { display: grid; grid-template-columns: 34px 36px 1fr auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px; border-top: 1px solid var(--line); }
.tp li:first-child { border-top: 0; }
.tp .rk { font: 800 15px/1 var(--mono); color: var(--muted); text-align: center; }
.tp li:nth-child(-n+3) .rk { color: #15171c; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.tp li:nth-child(1) .rk { background: #f2c94c; }
.tp li:nth-child(2) .rk { background: #cfd4dc; }
.tp li:nth-child(3) .rk { background: #d69a62; }
.tp .av { width: 36px; height: 36px; font-size: 13px; }
.tp .nm { min-width: 0; }
.tp .nm b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp .nm span { color: var(--faint); font-size: 12.5px; }
.tp .sc { text-align: right; }
.tp .sc b { display: block; font: 800 20px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.tp .sc span { color: var(--faint); font-size: 12px; }
.tp li.is-me { background: linear-gradient(90deg, rgba(210, 18, 46, .16), rgba(210, 18, 46, .03)); box-shadow: inset 3px 0 0 var(--red); }
.tp-you { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px dashed rgba(255, 255, 255, .22); color: var(--muted); font-size: 14px; }
.tp-you b { color: var(--text); }
.tp-rules { display: grid; gap: 10px; }
.tp-rules div { display: flex; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.tp-rules .j-i { width: 18px; height: 18px; margin-top: 2px; fill: var(--ok-2); }
@media (min-width: 960px) { .tp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } }

/* sign-in dialog: same look as DW Social's sign-in */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 18px; border-radius: 999px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-size: 16px; font-weight: 650; cursor: pointer; }
.gbtn svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--faint); font-size: 12.5px; font-weight: 650; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.si-mail { display: flex; gap: 8px; }
.si-mail span { flex: 1; display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--faint); font-size: 15px; }
.si-mail .btn { min-height: 52px; }
.si-name { margin-top: 16px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.si-name label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.si-name div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 16px; font-weight: 700; }
.si-name small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.si-social { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(90, 167, 214, .07); border: 1px solid rgba(90, 167, 214, .22); color: #cfe6f4; font-size: 13.5px; line-height: 1.5; }
.si-social .j-i { width: 20px; height: 20px; fill: #8cc4e6; margin-top: 1px; }
.si-legal { margin-top: 14px; color: var(--faint); font-size: 12.5px; line-height: 1.5; text-align: center; }
.si-legal a { color: var(--muted); }

/* ---------- Screens index (mock-up only) ---------- */
.mx { display: grid; gap: 12px; }
.mx a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.mx a b { display: block; font-size: 16px; }
.mx a span { color: var(--muted); font-size: 13.5px; }
.mx a em { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .07); font: 800 13px var(--font); }
@media (min-width: 900px) { .mx { grid-template-columns: 1fr 1fr; } }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .jb { width: calc(100% - 112px); padding: 8px 10px 9px; }
  .jb-row b { font-size: 16px; }
  .jb-times { gap: 6px; font-size: 12px; flex-wrap: wrap; }
  .jb-times .jb-exp { display: none; }
  .gx { right: 100px; padding: 10px 12px; }
  .gx-top b { font-size: 14px; }
  .gx-steps { grid-auto-columns: auto; grid-template-columns: none; display: flex; }
  .gx-steps div { flex: 1; font-size: 0; gap: 0; }
  .gx-steps div small { display: none; }
  .gx-steps div.is-now { flex: 2.5; font-size: 12px; gap: 6px; }
  .gx-skip { min-height: 34px; padding: 0 10px; font-size: 12px; }
  .gx-banner { top: 64px; bottom: auto; left: 12px; right: 100px; transform: none; white-space: normal; text-align: left; border-radius: 12px; font-size: 13px; padding: 8px 12px; }
  .gx-banner span { display: block; margin: 0; }
  .ss { padding: 14px 14px 12px; }
  .ss-name { font-size: 22px; }
  .ss-score b { font-size: 42px; }
  .ss .so-res-bars { gap: 6px; margin-top: 10px; }
  .ss .so-res-bars dd { height: 18px; }
  .ss .so-res-bars dd span { line-height: 18px; }
  .ss-detail { display: none; }
  .ss-dep { margin-top: 10px; padding: 8px 10px; }
}

/* Phone turned sideways: the journey fills the screen, like a game */
@media (orientation: landscape) and (max-height: 520px) {
  .jx-app .so-stage { position: fixed; inset: 0; z-index: 120; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; border-radius: 0; border: 0; }
  .jx-app .so-stage .so-dash { left: max(12px, env(safe-area-inset-left)); }
  .jx-app .jb { left: max(12px, env(safe-area-inset-left)); top: 62px; width: 300px; }
  .jx-app .so-ctl { top: 66px; right: max(12px, env(safe-area-inset-right)); }
  .jx-app .so-tools { right: max(12px, env(safe-area-inset-right)); }
  .jx-app .so-status { left: max(12px, env(safe-area-inset-left)); right: 112px; max-width: 520px; }
  .ss { width: min(640px, calc(100% - 140px)); display: grid; grid-template-columns: 190px 1fr; column-gap: 18px; align-items: center; text-align: left; padding: 14px 16px; }
  .ss > .ss-eyebrow, .ss > .ss-name, .ss > .ss-score, .ss > .ss-verdict { grid-column: 1; justify-content: flex-start; }
  .ss > .so-res-bars, .ss > .ss-dep { grid-column: 2; }
  .ss > .so-res-bars { grid-row: 1 / span 3; margin-top: 0; }
  .ss > .ss-dep { grid-row: 4 / span 2; margin-top: 8px; }
  .ss-detail { display: none; }
  .ss-score b { font-size: 46px; }
  .gx { left: max(12px, env(safe-area-inset-left)); right: 112px; max-width: 560px; }
  .gx-banner { top: 66px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; border-radius: 999px; }
  .gx-banner span { display: inline; margin-left: 6px; }
  .gx-steps div { font-size: 12px; gap: 6px; }
  .gx-steps div small { display: block; }
  .mv-card { top: 12px; left: max(12px, env(safe-area-inset-left)); }
  .jx-head .jx-sw { position: fixed; z-index: 130; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(8, 9, 12, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.jmap--sm .jmap-st text { font-size: 20px; stroke-width: 5px; } .jmap--sm .jmap-st.is-end text { font-size: 21px; }

.mv .jmap { overflow: visible; }
@media (orientation: landscape) and (max-height: 520px) {
  .ov--page > .wl { width: min(780px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 18px 20px; }
  .wl > .eyebrow, .wl > h2, .wl > p { grid-column: 1; }
  .wl > .wl-steps { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .wl > .wl-route { grid-column: 1; margin-top: 12px; }
  .wl > .wl-act { grid-column: 2; margin-top: 12px; }
  .wl h2 { font-size: 26px; }
  .jx-app .mv-card { top: 62px; }
}
.mv-wide, .mv-zoomed { position: absolute; inset: 0; }
.mv-zoomed { display: none; }
@media (orientation: portrait) and (max-width: 700px) { .mv-wide { display: none; } .mv-zoomed { display: block; } }
.jmap--zoom .jmap-st text { font-size: 22px; }

/* ---------- Outside cameras: one small control, no extra buttons ---------- */
.so-stage.is-outside .so-tools { top: 12px; bottom: auto; }
.cam { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: #fff; }
.cam-arr { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.cam-arr.is-next .j-i { transform: rotate(180deg); }
.cam-now { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; white-space: nowrap; }
.cam-now .j-i { width: 18px; height: 18px; opacity: .8; }
.cam-now b { font-size: 14px; font-weight: 750; }
.cam-now small { color: var(--muted); font: 700 12px var(--mono); }
@media (hover: hover) { .cam-arr:hover { background: rgba(255, 255, 255, .1); } }
@media (max-width: 599px) {
  .jx-sw button { padding: 0 11px; }
  .cam { left: 12px; transform: none; }
  .cam-now small { display: none; }
}

/* ---------- Controls overview (design review page) ---------- */
.mk { position: absolute; z-index: 9; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #15171c; font: 800 12px/1 var(--font); font-style: normal; box-shadow: 0 0 0 3px rgba(13, 14, 17, .85); pointer-events: none; }
.mk--alt { background: #8cc4e6; }
.so-dash > .mk { left: -8px; top: -8px; }
.jb > .mk { left: -8px; top: -8px; }
.so-status > .mk { left: -8px; top: -10px; }
.so-ctl > .mk { left: -14px; top: -6px; }
.so-ctl { overflow: visible; }
.mk-eb { position: relative; width: 100%; height: 0; }
.mk-eb > .mk { left: -14px; top: 4px; }
.so-tools > .mk { left: -10px; top: -8px; }
.ctl-side { position: relative; }
.ctl-side > .mk { left: -8px; top: -8px; }
.ctl-sw { position: relative; }
.ctl-sw > .mk { left: -10px; top: -10px; }
.ctl-legend { display: grid; gap: 14px; margin-top: 20px; }
.ctl-legend section { padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.ctl-legend h2 { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctl-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ctl-legend li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.ctl-legend li .mk { position: static; box-shadow: none; }
.ctl-legend b { display: block; font-size: 15px; }
.ctl-legend span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.ctl-rules { margin-top: 14px; }
@media (min-width: 900px) { .ctl-legend { grid-template-columns: 1fr 1fr; } }

/* view switch as links */
.jx-sw a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.jx-sw a[aria-pressed="true"] { background: var(--text); color: var(--bg); }
@media (max-width: 599px) { .jx-sw a { padding: 0 11px; } }
.mk-note a { color: #15171c; text-decoration: underline; pointer-events: auto; }
.mk-note { pointer-events: auto; }

/* before you depart */
.dp .seg button { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
.dp .seg button small { flex-basis: 100%; }
.dp .seg button .j-i { width: 18px; height: 18px; }
.dp-more { margin-top: 12px; text-align: center; font-size: 14px; }
.dp-more a { color: var(--muted); }

/* next journey */
.nx { display: grid; grid-template-columns: 88px 1fr 20px; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.nx img { width: 88px; height: 58px; object-fit: cover; border-radius: 8px; }
.nx small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-2); }
.nx b { display: block; font-size: 15px; }
.nx em { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; }
.nx > .j-i { transform: rotate(180deg); fill: var(--faint); }

/* user journey flow */
.fl { margin-top: 22px; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.fl h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.fl-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-size: 14px; }
.fl-d { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.fl-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.fl-st { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; padding: 8px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); text-decoration: none; }
.fl-img { grid-row: span 2; position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.fl-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fl-img i { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: #15171c; font: 800 12px var(--font); font-style: normal; }
.fl-st b { align-self: end; font-size: 15px; }
.fl-st > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.4; }
.fl-ar { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--faint); }
.fl-ar svg { width: 20px; height: 20px; fill: currentColor; transform: rotate(90deg); }
.fl-ar em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.fl-branch { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 14px; line-height: 1.5; }
.fl-branch .j-i { width: 18px; height: 18px; fill: var(--faint); margin-top: 2px; flex: none; }
.fl-branch a { color: var(--text); }
.fl-rules { margin-top: 22px; }
@media (min-width: 900px) {
  .fl-row { flex-direction: row; align-items: stretch; gap: 6px; }
  .fl-st { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .fl-img { width: 100%; }
  .fl-st b { align-self: auto; margin-top: 4px; }
  .fl-ar { flex: none; flex-direction: column; width: 40px; }
  .fl-ar svg { transform: none; }
}

/* depart sheet: route and timetable beside the choices on wide screens */
.dp-side, .dp-map { display: none; }
@media (min-width: 900px) {
  .dlg.dp { width: min(860px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 28px; }
  .dp-main { display: flex; flex-direction: column; }
  .dp-side { display: flex; flex-direction: column; gap: 12px; margin-top: 44px; padding-left: 28px; border-left: 1px solid var(--line, rgba(255,255,255,.08)); }
  .dp-map { display: block; margin-top: 22px; aspect-ratio: 16 / 10; border: 0; border-radius: 10px; overflow: hidden; }
  .dp-side .tt li { padding-top: 6px; padding-bottom: 6px; }
}

/* planner side: chosen options and the route's top three */
.pl-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.pl-top .tt-head a { font-size: 13px; font-weight: 600; color: var(--muted); }
.pl-top ol { list-style: none; margin: 10px 0 0; padding: 0; }
.pl-top li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.pl-top li:first-child { border-top: 0; }
.pl-top em { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px/1 var(--mono); font-style: normal; background: rgba(255,255,255,.08); color: var(--muted); }
.pl-top li:first-child em { background: var(--amber); color: #1a1405; }
.pl-top .j-num { font-weight: 700; }
@media (min-width: 960px) { .pl-aside .pl-map { aspect-ratio: 2 / 1; } .pl-aside .pl-sum dl { grid-template-columns: repeat(4, auto); gap: 8px 12px; } .pl-top li { padding: 6px 0; } }

/* top ten side: the route itself, ready to drive, then the rules */
.tp-side { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.tp-route .pl-map { aspect-ratio: 2 / 1; margin: -2px -4px 14px; }
.tp-route dl { grid-template-columns: repeat(4, auto); gap: 8px 12px; }
@media (min-width: 960px) { .tp-side { position: sticky; top: calc(var(--top) + 20px); margin-top: 0; } }

/* colour rule: red is kept for the one main action per screen; selections are graphite */
.btn--dark { background: #3a3f49; color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
@media (hover: hover) { .btn--dark:hover { background: #474d59; } }
.btn--dark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* driver names link to their DW Social page */
.pname { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .pname:hover { text-decoration-color: currentColor; } }
.pname:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
a.av { text-decoration: none; color: inherit; }

/* summary celebration: shown only when the drive earns a top ten place (or, smaller, a personal best) */
.sm-hero--win { border-color: rgba(242, 201, 76, .45); box-shadow: 0 0 0 1px rgba(242, 201, 76, .18), 0 30px 80px -40px rgba(242, 201, 76, .45); }
.win-sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 226, 140, .22) 50%, transparent 65%); transform: translateX(-100%); animation: winSweep 1.8s .4s var(--ease) 1 forwards; }
@keyframes winSweep { to { transform: translateX(100%); } }
.win-badge { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 8px 16px 8px 8px; align-self: flex-start; border-radius: 999px; background: rgba(13, 14, 17, .72); border: 1px solid rgba(242, 201, 76, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: winPop .6s .2s var(--ease) both; }
.win-badge b { display: block; color: #f6d48e; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.win-badge small { display: block; color: #c9ced6; font-size: 12.5px; }
.win-medal { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #cfd4dc; color: #15171c; font: 800 18px/1 var(--font); box-shadow: 0 0 0 3px rgba(207, 212, 220, .25); }
@keyframes winPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.win-card { border-color: rgba(242, 201, 76, .35); }
.win-card h2 { font-size: 20px; }
.win-p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.win-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.win-list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 14.5px; }
.win-list li:first-child { border-top: 0; }
.win-list em { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 12px/1 var(--font); font-style: normal; color: #15171c; }
.win-list li:nth-child(1) em { background: #f2c94c; } .win-list li:nth-child(2) em { background: #cfd4dc; } .win-list li:nth-child(3) em { background: #d69a62; }
.win-list .is-you { background: rgba(242, 201, 76, .1); box-shadow: inset 3px 0 0 #f2c94c; }
.win-list .is-you b { color: #f6d48e; }
.win-list .j-num { font-weight: 800; }
.win-again { justify-self: center; padding: 6px 10px; color: var(--muted); font-size: 14px; font-weight: 650; }
.og-t { color: #f6d48e; }
@media (prefers-reduced-motion: reduce) { .win-sweep { display: none; } .win-badge { animation: none; } }

/* phone and tablet: the celebration and Share come straight after the score */
@media (max-width: 959px) {
  .sm--win .sm-mainc, .sm--win .sm-side { display: contents; }
  .sm--win { gap: 14px; }
  .sm--win .sm-hero { order: 1; } .sm--win .win-card { order: 2; } .sm--win .sm-stats { order: 3; }
  .sm--win .sm-mainc > .sm-card { order: 4; } .sm--win .sm-private { order: 5; } .sm--win .nx { order: 6; }
}
/* over the speed limit: speed and sign turn red while points run off */
.so-dash.is-over .so-speedo { background: rgba(210, 18, 46, .88); border-color: transparent; }
.so-dash.is-over .so-limit { border-color: rgba(239, 51, 73, .9); box-shadow: 0 0 0 3px rgba(210, 18, 46, .35); animation: overPulse 1.2s ease-in-out infinite; }
@keyframes overPulse { 50% { box-shadow: 0 0 0 6px rgba(210, 18, 46, .15); } }
@media (prefers-reduced-motion: reduce) { .so-dash.is-over .so-limit { animation: none; } }
.is-outside .so-status { bottom: 70px; }
.sm-fair { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.45; }
.sm-fair b { color: var(--text); font-weight: 700; }
.sm-fair .j-i { width: 18px; height: 18px; flex: none; fill: var(--ok); margin-top: 1px; }
/* a little over the limit (up to 5%): friendly amber warning with a countdown, no minus points yet */
.so-dash.is-near .so-speedo { background: rgba(242, 179, 61, .92); border-color: transparent; color: #1a1405; }
.so-dash.is-near .so-speedo span { color: rgba(26, 20, 5, .7); }
.so-dash.is-near .so-limit { border-color: rgba(242, 179, 61, .9); }
.so-status.is-near { display: flex; align-items: center; gap: 10px; background: rgba(8, 9, 12, .78); border-color: rgba(242, 179, 61, .6); }
.near-t { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(242, 179, 61, .92); color: #1a1405; font: 800 13px/1.2 var(--mono); }

/* ---------- Driver's handbook ---------- */
.hb-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter); scrollbar-width: none; }
.hb-chips::-webkit-scrollbar { display: none; }
.hb-chips a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; font-weight: 650; white-space: nowrap; text-decoration: none; }
.hb { display: grid; gap: 20px; }
.hb-toc { display: none; }
.hb-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hb-sec { scroll-margin-top: calc(var(--top) + 16px); padding: 20px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.hb-sec h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.hb-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.hb-ic .j-i { width: 22px; height: 22px; fill: var(--text); }
.hb-sec > p { margin: 0 0 12px; color: #c9ced6; font-size: 15.5px; line-height: 1.6; max-width: 68ch; }
.hb-sec > p:last-child { margin-bottom: 0; }
.hb-grid3, .hb-grid2 { display: grid; gap: 10px; margin-top: 4px; }
.hb-grid3 > div, .hb-grid2 > div { padding: 14px; border-radius: 12px; background: var(--bg-3, #1c1f26); border: 1px solid var(--line); }
.hb-grid3 b, .hb-grid2 b { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.hb-grid2 b .j-i { width: 18px; height: 18px; }
.hb-grid3 span, .hb-grid2 span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hb-split { display: grid; gap: 10px; margin: 4px 0 12px; }
.hb-part { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px; border-radius: 12px; background: var(--bg-3, #1c1f26); border: 1px solid var(--line); overflow: hidden; }
.hb-part b { font-size: 15px; }
.hb-part em { align-self: center; font: 800 26px/1 var(--mono); font-style: normal; }
.hb-part small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.hb-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: var(--ok); }
.hb-note { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.hb-note .j-i { width: 18px; height: 18px; flex: none; fill: var(--faint); margin-top: 1px; }
.hb-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.hb-keys i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.hb-speed { display: grid; gap: 10px; }
.hb-sp { display: grid; grid-template-columns: 78px 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg-3, #1c1f26); border: 1px solid var(--line); }
.hb-sp b { font-size: 15px; align-self: end; }
.hb-sp small { color: var(--muted); font-size: 13.5px; line-height: 1.45; align-self: start; }
.hb-spd { grid-row: span 2; display: grid; place-items: center; height: 44px; border-radius: 10px; font: 800 20px/1 var(--mono); }
.hb-spd.is-ok { background: rgba(255, 255, 255, .08); }
.hb-spd.is-near { background: rgba(242, 179, 61, .92); color: #1a1405; }
.hb-spd.is-over { background: rgba(210, 18, 46, .9); color: #fff; }
.hb-minus { color: var(--red-2); font: 800 14px var(--mono); }
.hb-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.hb-sum > span { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; border-radius: 10px; background: var(--bg-3, #1c1f26); border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.hb-sum > span b { color: var(--text); font: 800 18px/1.2 var(--mono); }
.hb-sum > span.op { min-width: 0; padding: 0 2px; background: none; border: 0; font-size: 18px; }
.hb-sum > .hb-pen { border-color: rgba(239, 51, 73, .5); background: rgba(210, 18, 46, .1); }
.hb-sum > .hb-pen b { color: var(--red-2); }
.hb-sum > .hb-total { flex-direction: row; align-items: baseline; gap: 4px; border-color: rgba(255, 255, 255, .3); }
.hb-sum > .hb-total b { font-size: 22px; }
.hb-list { margin: 0; padding-left: 20px; color: #c9ced6; font-size: 15px; line-height: 1.6; }
.hb-list li + li { margin-top: 6px; }
@media (min-width: 700px) {
  .hb-grid3 { grid-template-columns: repeat(3, 1fr); }
  .hb-grid2, .hb-split { grid-template-columns: repeat(2, 1fr); }
  .hb-split { grid-template-columns: 2fr 1fr 1fr; }
  .hb-sec { padding: 24px; }
}
@media (min-width: 960px) {
  .hb-chips { display: none; }
  .hb { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
  .hb-toc { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--top) + 20px); padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
  .hb-toc a:not(.btn) { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 650; text-decoration: none; }
  .hb-toc a:not(.btn) em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .06); font: 800 11px/1 var(--mono); font-style: normal; }
  .hb-toc a[aria-current="true"] { background: rgba(255, 255, 255, .07); color: var(--text); }
  .hb-toc a[aria-current="true"] em { background: var(--text); color: var(--bg); }
}
@media (hover: hover) { .hb-toc a:not(.btn):hover { color: var(--text); } .hb-chips a:hover { color: var(--text); border-color: var(--line-3, rgba(255,255,255,.3)); } }
.hb-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; font-weight: 650; }
.hb-link .j-i { width: 16px; height: 16px; fill: currentColor; }
.wl-hb { margin: 12px 0 0; text-align: center; }
.ss-hb { margin: 10px 0 0; text-align: center; }
.sm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sm-h h2 { margin: 0; }
.rc-hb { margin: 16px 0 0; text-align: center; }
/* stop score parts: one row each, points on the left like the speed rows */
.hb-split, .hb-split { grid-template-columns: 1fr !important; }
.hb-part { grid-template-columns: 78px 1fr; grid-template-areas: "n t" "n d"; gap: 2px 14px; align-items: center; }
.hb-part b { grid-area: t; align-self: end; }
.hb-part small { grid-area: d; align-self: start; }
.hb-part em { grid-area: n; display: grid; place-items: center; height: 44px; border-radius: 10px; background: rgba(47, 191, 113, .14); color: var(--ok-2); font-size: 20px; }
/* profile photo from DW Social replaces the initials when the member has one */
.av.has-photo { background: #22262e; overflow: hidden; padding: 0; }
.av.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.sm-hero .av.has-photo img { position: static; inset: auto; opacity: 1; width: 100%; height: 100%; }

/* ---------- Welcome back (returning rider, kept on the device) ---------- */
.wb { display: grid; gap: 14px; margin: 4px 0 22px; }
.wb-last { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: #000; min-height: 300px; display: flex; }
.wb-last > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.wb-last::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 14, 17, .05) 0%, rgba(13, 14, 17, .94) 80%); }
.wb-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; width: 100%; padding: 110px 18px 18px; }
.wb-route { font-size: clamp(24px, 6vw, 36px); font-weight: 800; letter-spacing: -.01em; }
.wb-route .arr { color: var(--faint); font-weight: 600; margin: 0 8px; }
.wb-score { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.wb-score b { font: 800 44px/1 var(--font); letter-spacing: -.03em; }
.wb-score span { color: #c9ced6; font-size: 14px; font-weight: 600; }
.wb-act { display: grid; gap: 10px; margin-top: 8px; }
.wb-act .btn--dark { flex-direction: column; gap: 0; line-height: 1.2; }
.wb-act .btn--dark small { font-size: 12px; font-weight: 600; color: #b9bec7; }
.wb-col { padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.wb-h { display: flex; justify-content: space-between; align-items: baseline; }
.wb-h b { font: 800 18px var(--mono); }
.wb-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wb-prog i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.wb-prog i.on { background: var(--ok); }
.wb-list { list-style: none; margin: 0; padding: 0; }
.wb-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.wb-list li:first-child { border-top: 0; }
.wb-list .j-i { width: 18px; height: 18px; fill: var(--ok); }
.wb-list b { font-weight: 800; }
.wb-list li.is-new i { width: 14px; height: 14px; margin-left: 2px; border-radius: 50%; border: 2px dashed rgba(242, 179, 61, .8); }
.wb-list li.is-new em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #f6d48e; }
.wb-keep { display: flex; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.45; }
.wb-keep .j-i { width: 16px; height: 16px; flex: none; fill: var(--faint); margin-top: 1px; }
.wb-keep a { color: var(--text); }
.j-chip--done { background: rgba(47, 191, 113, .85) !important; border-color: transparent !important; color: #fff; }
.j-chip--done .j-i { width: 14px; height: 14px; fill: #fff; }
.j-chip--new { background: rgba(242, 179, 61, .92) !important; border-color: transparent !important; color: #1a1405 !important; }
.rc-scores { display: flex; gap: 16px; min-width: 0; }
.rc-mine { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); line-height: 1.35; padding-left: 14px; border-left: 1px solid var(--line); }
.rc-mine b { color: var(--ok-2); font: 800 14px/1.35 var(--mono); }
.rc-mine.is-new b { color: #f6d48e; font: 700 13px/1.45 var(--font); }
@media (min-width: 600px) { .wb-act { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 960px) {
  .wb { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; }
  .wb-in { padding: 140px 28px 26px; }
}
.wb-try { align-self: flex-start; }

/* ---------- Replay on the map ---------- */
.jx-head .btn--small .j-i { width: 16px; height: 16px; }
.rp { display: grid; gap: 16px; }
.rp-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-stage { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--map-sea); }
.rp-map svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 625; }
.jmap--replay { --map-route: rgba(255, 255, 255, .22); --map-route-glow: transparent; --map-done: transparent; }
.jmap--replay .jmap-train circle { fill: #ef3349; }
.jmap--replay .jmap-train .pulse { fill: rgba(239, 51, 73, .25); }
.rp-seg.rp-ok { stroke: #2fbf71; } .rp-seg.rp-near { stroke: #f2b33d; } .rp-seg.rp-over { stroke: #ef3349; }
.rp-now { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(8, 9, 12, .78); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; }
.rp-now span { color: #c9ced6; font-size: 13px; font-weight: 700; }
.rp-pop { position: absolute; transform: translate(-50%, calc(-100% - 22px)); display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 12px; background: #17191f; border: 1px solid rgba(47, 191, 113, .55); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9); white-space: nowrap; animation: winPop .5s var(--ease) both; }
.rp-pop::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #17191f; border-right: 1px solid rgba(47, 191, 113, .55); border-bottom: 1px solid rgba(47, 191, 113, .55); transform: translateX(-50%) rotate(45deg); }
.rp-pop small { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rp-pop b { font-size: 15px; }
.rp-pop span { display: flex; align-items: baseline; gap: 6px; color: #f6d48e; font-size: 12.5px; font-weight: 700; }
.rp-pop em { font-style: normal; color: #fff; font: 800 20px/1 var(--mono); }
.rp-key { position: absolute; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 7px 12px; border-radius: 10px; background: rgba(8, 9, 12, .72); color: #c9ced6; font-size: 12px; font-weight: 650; }
.rp-key i { display: inline-block; width: 14px; height: 4px; border-radius: 3px; margin-right: 6px; vertical-align: 2px; }
.rp-key .ok { background: #2fbf71; } .rp-key .near { background: #f2b33d; } .rp-key .over { background: #ef3349; }
.rp-bar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "p t time" "s s s"; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.rp-play { grid-area: p; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; }
.rp-play .j-i { width: 22px; height: 22px; fill: #111; margin-left: 2px; }
.rp-track { grid-area: t; position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.rp-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #fff; }
.rp-track > b { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #2b2f38; border: 2px solid rgba(255, 255, 255, .5); }
.rp-track > b.is-done { background: #2fbf71; border-color: #2fbf71; }
.rp-track > em { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.rp-time { grid-area: time; color: var(--muted); font-size: 13px; font-weight: 700; }
.rp-speed { grid-area: s; }
.rp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li { display: grid; grid-template-columns: 14px 1fr auto 34px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--faint); font-size: 14.5px; }
.rp-list li:first-child { border-top: 0; }
.rp-list li i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.rp-list li.is-done { color: var(--text); }
.rp-list li.is-done i { background: #2fbf71; border-color: #2fbf71; }
.rp-list li small { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.rp-list li b { text-align: right; font-weight: 800; }
.rp-list li.is-now { background: rgba(255, 255, 255, .05); margin: 0 -10px; padding: 8px 10px; border-radius: 10px; }
@media (min-width: 700px) { .rp-bar { grid-template-columns: auto 1fr auto auto; grid-template-areas: "p t time s"; } .rp-speed { width: 260px; } }
@media (max-width: 599px) { .rp-key { left: 12px; right: auto; bottom: 10px; font-size: 11px; } .rp-pop { padding: 6px 10px; } .rp-pop small { display: none; } .rp-now { font-size: 12.5px; } }
@media (min-width: 960px) { .rp { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .rp-side { position: sticky; top: calc(var(--top) + 20px); } }
.rp-pop { left: var(--px); top: var(--py); }
.rp-map--phone { display: none; }
.rp-map--phone svg { aspect-ratio: 600 / 470; }
@media (max-width: 599px) {
  .rp-map--wide { display: none; } .rp-map--phone { display: block; }
  .rp-pop { left: var(--ppx); top: var(--ppy); }
  .rp-key { position: static; border-radius: 0; background: rgba(8, 9, 12, .6); justify-content: center; }
}
@media (max-width: 959px) {
  .rp-side { display: contents; }
  .rp { gap: 12px; }
  .rp-side > .sm-act { order: 1; } .rp-side > .sm-card { order: 2; } .rp-side > .sm-private { order: 3; }
}
@media (max-width: 599px) {
  .rp-pop { transform: translate(-50%, 20px); }
  .rp-pop::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); }
}
.vr-replay { align-self: flex-start; margin-top: 6px; } .vr-replay .j-i { width: 16px; height: 16px; }
.vr-badge { align-self: flex-start; }

/* ---------- pilot page (live drive) ---------- */
.jx-app .so-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-act { display: flex; justify-content: center; margin-top: 14px; }
.ss-act .btn { min-width: 200px; }
.ss.is-overrun .ss-score b { color: var(--red-2); }
.jp-credit { margin: 2px 2px 0; color: var(--faint); font-size: 12px; line-height: 1.45; }
.so-status.is-near .near-t { margin-right: 0; }
.wl-act .btn[disabled] { opacity: .7; cursor: progress; }
@media (orientation: landscape) and (max-height: 520px) {
  .ss-act { grid-column: 1 / -1; margin-top: 8px; }
}
/* the knob is 30px tall: keep it clear of the POWER and BRAKE labels at full travel */
.jx-app .so-lever { gap: 19px; padding: 9px 0; }
.ss.is-overrun .ss-verdict { color: #ff9aa5; }
/* map view: the map fills the stage, the live cab view shrinks into the corner */
.jx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mv[hidden], .mv-ui[hidden] { display: none; }
.mv { z-index: 0; touch-action: none; cursor: grab; }
.mv:active { cursor: grabbing; }
.mv .jmap { position: absolute; inset: 0; }
.mv-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mv-ui > * { pointer-events: auto; }
.so-stage.is-map .so-canvas { left: auto; top: auto; right: 12px; bottom: 30px; width: min(30%, 240px); height: auto; aspect-ratio: 16 / 10; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .9); z-index: 2; }
.so-stage.is-map .mv-mini { position: absolute; right: 12px; bottom: 30px; width: min(30%, 240px); aspect-ratio: 16 / 10; padding: 0; border: 2px solid transparent; background: transparent; cursor: pointer; z-index: 3; box-shadow: none; }
.so-stage.is-map .mv-mini span { position: absolute; left: 6px; bottom: 6px; }
.so-stage.is-map .jb, .so-stage.is-map .so-dash { display: none; }
.so-stage.is-map .so-ctl { display: none; }
.so-stage.is-map .so-status { z-index: 4; left: 12px; right: auto; bottom: 64px; max-width: min(420px, 60%); }
.mv-follow[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #15171c; }
.mv-follow[aria-pressed="true"] .so-i { fill: #15171c; }
.mv-mini b { font-weight: 700; } .mv-mini i { font-style: normal; } .mv-short { display: none; }
@media (max-width: 560px) {
  .mv-card { width: auto; right: 64px; }
  .mv-long { display: none; } .mv-short { display: inline; }
  .mv-credit { left: 66px; right: 10px; bottom: 6px; text-align: right; font-size: 9.5px; line-height: 1.3; }
}
/* tap targets: the Cab / Map switch is at least 44 px high (Apple and Android guidance) */
.jx-sw button, .jx-sw a { min-height: 44px; }
/* phone sideways in the map view: keep clear of the notch and the corner cab view */
@media (orientation: landscape) and (max-height: 520px) {
  .jx-app .mv-follow { left: max(12px, env(safe-area-inset-left)); }
  .jx-app .mv-credit { right: max(10px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); }
  .jx-app .mv-zoom { top: 66px; transform: none; right: max(12px, env(safe-area-inset-right)); }
  .jx-app .so-stage.is-map .so-canvas, .jx-app .so-stage.is-map .mv-mini { right: max(12px, env(safe-area-inset-right)); bottom: max(30px, calc(env(safe-area-inset-bottom) + 22px)); }
  .jx-app .so-stage.is-map .so-status { left: max(12px, env(safe-area-inset-left)); }
}
@media (orientation: landscape) and (max-height: 520px) { .jx-app .jb, .jx-app .mv-card { top: 70px; } }
/* phone upright, map view: the next-stop card sits under the Sound and Full screen buttons */
@media (max-width: 560px) and (orientation: portrait) { .mv-card { top: 66px; right: 12px; } }
/* outside view */
.jx-sw button.is-busy { cursor: progress; opacity: .7; }
.cam[hidden] { display: none; }
.cam-arr { width: 44px; height: 44px; }

/* ---------- Train choice: header button, picker cards, dialog ---------- */
.eyebrow--plate .j-train { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; margin: 0; padding: 4px 8px 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; }
.eyebrow--plate .j-train span { border: 0; border-radius: 0; padding: 0; }
.eyebrow--plate .j-train .j-i { width: 15px; height: 15px; color: var(--red-2); }
.eyebrow--plate .j-train:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.eyebrow--plate .j-train:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (pointer: coarse) { .eyebrow--plate .j-train { position: relative; } .eyebrow--plate .j-train::after { content: ""; position: absolute; inset: -9px -4px; } }

.wl-train { margin-top: 14px; }
.tpk-h { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tpk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpk-c { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 12px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, box-shadow .15s; }
.tpk-c:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.tpk-c input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tpk-img { position: relative; display: block; height: 0; padding-bottom: 46.5%; margin: 0 -4px 6px; border-radius: 10px; background: radial-gradient(60% 55% at 55% 60%, rgba(255, 255, 255, .08), transparent 70%); }
.tpk-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tpk-b { position: relative; display: grid; gap: 2px; min-width: 0; padding-right: 30px; }
.tpk-b b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 24px; }
.tpk-b small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.tpk-f { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 5px; color: var(--text); font-size: 12.5px; font-weight: 600; }
.tpk-f > span { white-space: nowrap; }
.tpk-f .j-num { font-size: 12px; }
.tpk-ok { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); color: transparent; transition: background .15s, border-color .15s, color .15s; }
.tpk-ok .j-i { width: 15px; height: 15px; }
.tpk-c:has(input:checked) { border-color: var(--red); background: linear-gradient(180deg, rgba(210, 18, 46, .14), rgba(210, 18, 46, .04)); box-shadow: inset 0 0 0 1px var(--red); }
.tpk-c:has(input:checked) .tpk-ok { background: var(--red); border-color: var(--red); color: #fff; }
.tpk-c:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
/* browsers without :has() (older Firefox) get the same look from a class set by the page */
.tpk-c.is-on { border-color: var(--red); background: linear-gradient(180deg, rgba(210, 18, 46, .14), rgba(210, 18, 46, .04)); box-shadow: inset 0 0 0 1px var(--red); }
.tpk-c.is-on .tpk-ok { background: var(--red); border-color: var(--red); color: #fff; }
.tpk-c.is-focus { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 359px) { .tpk-b small { display: none; } }

.tsel { width: min(520px, 100%); }
.tsel .tpk { margin-top: 16px; }
.tsel-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(242, 179, 61, .1); border: 1px solid rgba(242, 179, 61, .3); color: var(--text); font-size: 13.5px; line-height: 1.4; }
.tsel-note[hidden] { display: none; }
.tsel-note .j-i { width: 18px; height: 18px; color: var(--late); margin-top: 1px; }
.tsel .wl-act { grid-template-columns: 1fr; }
.sm-act .btn--ghost .j-i { width: 18px; height: 18px; }

/* phones on their side: the cards turn into short rows, picture on the left */
@media (orientation: landscape) and (max-height: 520px) {
  .wl > .wl-route { align-self: start; }
  .wl > .wl-train { grid-column: 2; margin-top: 12px; }
  .wl .tpk-h { display: none; }
  .wl .tpk-c, .tsel .tpk-c { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; }
  .wl .tpk-img, .tsel .tpk-img { flex: none; width: 76px; padding-bottom: 36px; margin: 0; }
  .wl .tpk-b, .tsel .tpk-b { flex: 1; padding-right: 26px; }
  .wl .tpk-b small, .tsel .tpk-b small { display: none; }
  .wl .tpk-b b, .tsel .tpk-b b { font-size: 15px; line-height: 20px; }
  .wl .tpk-f, .tsel .tpk-f { margin-top: 0; font-size: 11.5px; }
  .wl .tpk-f .j-num, .tsel .tpk-f .j-num { font-size: 11px; }
  .wl .tpk-ok, .tsel .tpk-ok { top: 50%; margin-top: -12px; }
  .tsel { width: min(640px, 100%); padding: 16px 18px; }
  .tsel > p:not(.tsel-note):not(.eyebrow) { display: none; }
  .tsel .tpk { margin-top: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* in the welcome the two cards are narrow: the red frame alone shows the choice */
  .wl .tpk-ok { display: none; }
  .wl .tpk-b { padding-right: 0; }
  .wl .tpk-img { width: 60px; padding-bottom: 30px; }
  .wl .tpk-f { gap: 0 8px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  .wl .tpk-f > span + span { display: none; }
  .wl .wl-steps { gap: 6px; }
  .ov--page > .wl { padding-top: 14px; padding-bottom: 14px; }
}
.tpk-b b { white-space: nowrap; }
@media (orientation: landscape) and (max-height: 520px) { .wl > .wl-route { grid-row: 4 / span 2; } .wl > .wl-train { grid-row: 4; } .wl > .wl-act { grid-row: 5; } }

/* routes page (phase 3) */
.rc-bar .rc-filter { margin-bottom: 10px; }
.rc-train { margin: 0 0 14px; color: var(--faint); font-size: 13px; font-weight: 650; }
.rc-best .rc-none { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.rc-empty { margin: 8px 0 0; color: var(--muted); }
.rc[hidden] { display: none !important; }
.rc-soon { justify-self: start; color: var(--muted); }
.rc-credit { margin: 22px 0 8px; color: var(--faint); font-size: 12.5px; text-align: center; }
.rc-map .jmap-st text, .dp-map .jmap-st text { fill: #f4f5f7; font-weight: 700; paint-order: stroke; stroke: rgba(10, 13, 18, .85); stroke-linejoin: round; }
.rc-map .jmap-st circle, .dp-map .jmap-st circle { fill: var(--map-land); stroke: #f4f5f7; }
.rc-map .jmap-st.is-end circle, .dp-map .jmap-st.is-end circle { fill: var(--map-route); stroke: #fff; }
@media (min-width: 600px) { .rc-own .rc-soon { justify-self: end; } }

/* ---------- ready to depart (phase 3) ---------- */
.dp .dp-facts { margin: 6px 0 0; color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dp .j-label { margin-top: 18px; }
.dp .seg button { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
.dp .seg button small { flex-basis: 100%; }
.dp .seg button .j-i { width: 18px; height: 18px; flex: none; }
.dp .seg button.is-soon { cursor: default; opacity: .62; }
.dp .seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dp .seg--round button { flex-wrap: nowrap; }
#dp-go { margin-top: 20px; width: 100%; }
#dp-go[disabled] { opacity: .7; cursor: progress; }
.dp-more { margin: 12px 0 0; text-align: center; font-size: 14px; }
.dp-more button { padding: 6px 8px; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dp-more button:hover { color: var(--text); }
.dp-more button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.dp .tt li.is-sea { min-height: 30px; }
.dp .tt .tt-sea { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 6px; color: #8fc3e6; font-size: 13.5px; font-weight: 700; }
.dp .tt .tt-sea .j-i { width: 18px; height: 18px; flex: none; }
.dp .tt li.is-sea::before { background: repeating-linear-gradient(180deg, #5aa7d6 0 4px, transparent 4px 8px); }
.dp-side, .dp-map { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  .dlg.dp { width: min(880px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 28px; padding: 26px 26px 24px; }
  .dp-main { display: flex; flex-direction: column; min-width: 0; }
  .dp-side { display: flex; flex-direction: column; gap: 8px; margin-top: 46px; padding-left: 26px; border-left: 1px solid var(--line); min-width: 0; }
  .dp-map { display: block; margin-top: 20px; aspect-ratio: 16 / 10; border: 0; border-radius: 12px; overflow: hidden; background: var(--map-sea); }
  .dp-side .tt li { min-height: 38px; }
  .dp .dlg-x { right: 14px; top: 14px; }
}
.dlg.dp:focus { outline: none; }
@media (max-width: 520px) {
  .dp .seg:not(.seg--round) button { flex-direction: column; flex-wrap: nowrap; gap: 3px; }
  .dp .seg:not(.seg--round) button small { flex-basis: auto; }
}
/* phones held sideways: the two choices side by side, so Depart shows without scrolling */
@media (max-height: 520px) and (min-width: 600px) {
  .dlg.dp { width: min(720px, 100%); padding: 18px 20px 16px; }
  .dp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .dp-main > * { grid-column: 1 / -1; }
  .dp-main > #dp-cross, .dp-main > #dp-time { grid-column: auto; }
  .dp-main > #dp-cross[hidden] + #dp-time { grid-column: 1 / -1; }
  .dp .j-label { margin-top: 12px; }
  .dp .seg button { min-height: 44px; }
  #dp-go { margin-top: 14px; }
  .dp-more { margin-top: 6px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .dp .seg:not(.seg--round) button { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .dp .seg:not(.seg--round) button small { flex-basis: auto; }
}

/* ---------- pause, and welcome back (phase 3) ---------- */
.ov#ps { z-index: 30; }
.dlg.ps, .dlg.rs { width: min(460px, 100%); }
.dlg.ps:focus, .dlg.rs:focus { outline: none; }
.ps-where { margin: 6px 0 0; color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-act { display: grid; gap: 10px; margin-top: 18px; }
.ps-act .btn { width: 100%; }
.ps-act [hidden] { display: none; }
.ps-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--faint); font-size: 13px; line-height: 1.45; }
.ps-note .j-i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.rs-prog { height: 6px; margin-top: 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rs-prog i { display: block; height: 100%; border-radius: inherit; background: var(--red-2); }
.rs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; border: 1px solid var(--line); border-radius: 12px; }
.rs-facts > div { padding: 9px 11px; min-width: 0; }
.rs-facts > div + div { border-left: 1px solid var(--line); }
.rs-facts dt { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rs-facts dd { margin: 3px 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-height: 520px) and (min-width: 600px) {
  .dlg.ps, .dlg.rs { width: min(620px, 100%); padding: 16px 18px; }
  .ps-act { grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .ps-note { display: none; }
}

/* touch: every control gets a hit area of at least 44 px, without changing how it looks */
.so-lang button, #train-btn { position: relative; }
.so-lang button::after { content: ""; position: absolute; inset: -4px 0; }
#train-btn::after { content: ""; position: absolute; inset: -8px -2px; }
.dp-more button { min-height: 44px; }
.nw { white-space: nowrap; }
/* phones: the route filters wrap onto two lines, so none is cut off at the edge */
@media (max-width: 599px) {
  .rc-filter { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
/* dialog titles: no lone last word; the pause card has no close button, so its title may use the full width */
.dlg h2 { text-wrap: balance; }
.dlg.ps h2 { padding-right: 0; }

/* a longer wait at a stop: the countdown, and a button to skip the wait (a quiet button: red is kept for the one main action) */
.so-status.is-wait { display: flex; align-items: center; gap: 12px; pointer-events: auto; padding: 7px 7px 7px 13px; }
.so-status.is-wait .wait-t { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.so-skip { flex: none; min-height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: relative; }
.so-skip::after { content: ""; position: absolute; inset: -6px -4px; }
@media (hover: hover) { .so-skip:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); } }
.so-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 599px) { .so-status.is-wait { flex-wrap: wrap; gap: 6px 10px; } .so-status.is-wait .wait-t { flex-basis: 100%; } }

/* the next speed limit: the sign that is coming, and how far off it is */
.so-ahead { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 12px; background: rgba(8, 9, 12, .62); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: #fff; transition: background-color .25s ease, border-color .25s ease; }
.so-ahead[hidden] { display: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .so-ahead { background: rgba(8, 9, 12, .86); } }
.so-ahead b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111; border: 3px solid #d2122e; font: 800 11px/1 var(--font); letter-spacing: -.02em; }
.so-ahead-t { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.so-ahead-t > span:first-child { font: 700 9px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.so-ahead-t .j-num { font: 700 13px/1 var(--mono, ui-monospace, monospace); color: #fff; white-space: nowrap; }
.so-ahead.is-up b { border-color: rgba(210, 18, 46, .75); }
.so-ahead.is-down { border-color: rgba(242, 179, 61, .55); }
.so-ahead.is-down .so-ahead-t > span:first-child { color: #f2b33d; }
.so-ahead.is-now { background: rgba(242, 179, 61, .92); border-color: transparent; }
.so-ahead.is-now .so-ahead-t > span:first-child { color: rgba(26, 20, 5, .72); }
.so-ahead.is-now .so-ahead-t .j-num { color: #1a1405; }
@media (max-width: 599px) {
  .so-ahead { gap: 5px; padding: 4px 7px 4px 4px; }
  .so-ahead b { width: 27px; height: 27px; font-size: 10px; }
  .so-ahead-t .j-num { font-size: 12px; }
}
/* Phones upright: the top row has no room beside the sound, pause and full screen buttons, so the next
   speed limit sits on its own row under the speed, and the stop card moves down while it shows */
@media (max-width: 599px) and (orientation: portrait) {
  .so-dash .so-ahead { position: absolute; left: 0; top: calc(100% + 6px); }
  .so-stage.has-ahead .jb { top: 104px; }
}
/* any other narrow screen where the sign does not fit beside the view switch (measured in jmain.js fitAhead) */
.so-stage.ahead-low .so-dash .so-ahead { position: absolute; left: 0; top: calc(100% + 6px); }
.so-stage.ahead-low.has-ahead .jb { left: var(--jb-low, 122px); }


/* at a platform: passengers getting off and boarding, in place of the times */
.jb-pax { margin-top: 6px; color: #d5d9df; }
.jb-pax[hidden], .jb-times[hidden] { display: none; }
.jb-pax .jb-aboard { margin: 0; font-size: 15px; color: #fff; white-space: nowrap; }
.jb-pax .jb-aboard .j-num { display: inline-block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jb-pax .jb-flow { margin: 2px 0 0; font-size: 12.5px; color: #aeb4bd; display: flex; align-items: center; gap: 7px; }
.jb-pax .jb-flow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber, #f5b942); animation: jbFlow 1.1s ease-in-out infinite; }
.jb-pax .jb-flow.is-done::before { background: #34c26b; animation: none; }
.jb-pax .jb-flow.is-close::before { background: #e5484d; animation: jbFlow .5s ease-in-out infinite; }
.jb-pax .jb-flow.is-shut::before { background: #e6e9ee; animation: none; }
@keyframes jbFlow { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .jb-pax .jb-flow::before { animation: none; } }
@media (max-width: 599px) { .jb-pax .jb-aboard { font-size: 14px; } .jb-pax .jb-aboard .j-num { font-size: 16px; } .jb-pax .jb-flow { font-size: 12px; } }

/* ---------- Share your result ---------- */
.sh-lock, .sh-lock body { overflow: hidden; }
.ov.sh-ov { z-index: 300; }
.dlg--share { width: min(680px, 100%); padding: 24px 24px 20px; }
.dlg--share h2 { margin: 0 44px 0 0; font-size: 24px; line-height: 1.2; }
.sh-p { margin: 8px 0 16px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.sh-x { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; }
.sh-x:hover { background: rgba(255, 255, 255, .06); }
.sh-x:focus-visible, .sh-b:focus-visible, .sh-tog input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }
.sh-card { position: relative; aspect-ratio: 1200 / 630; border-radius: 14px; overflow: hidden; background: #0d0f13; border: 1px solid var(--line-2); }
@supports not (aspect-ratio: 1) { .sh-card { height: 0; padding-top: 52.5%; } }
.sh-card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sh-card img:not([src]) { visibility: hidden; }
.sh-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 14px; }
.sh-wait[hidden] { display: none; }
.sh-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; color: var(--faint); font-size: 13px; line-height: 1.45; }
.sh-note .j-i { width: 16px; height: 16px; margin-top: 1px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.sh-b { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 92px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 700 13px/1.2 var(--font); cursor: pointer; text-align: center; transition: background-color .15s ease, border-color .15s ease; }
.sh-b:hover { background: #22262e; border-color: rgba(255, 255, 255, .22); }
.sh-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.sh-ic svg { width: 24px; height: 24px; }
.sh-ic--q { background: #2a2e37; color: #fff; }
.sh-link { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 6px 6px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #111318; }
.sh-link input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 600 14px var(--mono); outline: none; }
.sh-link .btn { min-height: 40px; padding: 0 16px; }
.sh-tog { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; cursor: pointer; }
.sh-tog b { display: block; font-size: 15px; }
.sh-tog small { display: block; margin-top: 3px; color: var(--faint); font-size: 13px; line-height: 1.4; }
.sh-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-tog i { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: #3a3f49; transition: background-color .15s ease; }
.sh-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.sh-tog input:checked + i { background: var(--ok); }
.sh-tog input:checked + i::after { transform: translateX(20px); }
.sh-done { min-height: 18px; margin: 10px 0 0; color: var(--ok-2); font-size: 13px; font-weight: 600; }
@media (max-width: 599px) {
  .dlg--share { padding: 20px 16px 16px; }
  .dlg--share h2 { font-size: 21px; }
  .sh-p { font-size: 14px; }
  .sh-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sh-b { min-height: 84px; font-size: 12px; padding: 10px 2px 8px; }
  .sh-ic { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .sh-tog i, .sh-tog i::after, .sh-b { transition: none; } }
.dlg--share:focus { outline: none; }
/* shared result page (r/index.php): language links look like the game's language buttons */
.so-lang a { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 42px; min-height: 36px; padding: 0 10px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.so-lang a::after { content: ""; position: absolute; inset: -4px 0; }
.so-lang a[aria-current="true"] { background: var(--text); color: var(--bg); }
@media (hover: hover) { .so-lang a:not([aria-current="true"]):hover { color: var(--text); } }
.vr-meta { margin: 8px 0 0; color: #d5d9df; font-size: 14.5px; line-height: 1.5; }
.vr-all { margin-top: 10px; }
.vr-gone { padding: 48px 0 64px; }
.vr-gone .btn { margin-top: 18px; }
/* share window: while the result's link is being made, the link buttons wait */
.sh-b[aria-disabled="true"], .sh-link .btn[aria-disabled="true"] { opacity: .45; cursor: progress; }
.sh-grid.is-wait + .sh-link input { color: var(--muted); font-style: italic; }
/* replay page (r/CODE/replay) */
.rp-load { display: grid; place-items: center; aspect-ratio: 1000 / 625; color: var(--muted); font-size: 14px; font-weight: 650; padding: 16px; text-align: center; }
.rp-map--phone .rp-load { aspect-ratio: 600 / 470; }
.rp-pop i { font-style: normal; }
.rp-credit { margin: 2px 2px 0; color: var(--faint); font-size: 12px; }
.rp-track { cursor: pointer; touch-action: none; }
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.rp-track:focus-visible { outline: 2px solid var(--amber); outline-offset: 8px; }
.rp-play:disabled { opacity: .5; cursor: default; }
.rp-now b { white-space: nowrap; }
/* the stop pop-up keeps its place: its own fade, which never touches the transform that positions it */
.rp-pop { animation: rpPop .45s var(--ease) both; }
@keyframes rpPop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rp-pop { animation: none; } }
/* the pop-up opens above or below the station, whichever side has room on the map */
.rp-stage .rp-pop.is-up { transform: translate(-50%, calc(-100% - 22px)); }
.rp-stage .rp-pop.is-up::after { top: auto; bottom: -7px; transform: translateX(-50%) rotate(45deg); }
.rp-stage .rp-pop.is-down { transform: translate(-50%, 20px); }
.rp-stage .rp-pop.is-down::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); }
.rp-pop i.is-ok { color: var(--ok-2); } .rp-pop i.is-late { color: #f6d48e; } .rp-pop i.is-early { color: #bfe0f3; }

/* The replay of the player's own drive, over the summary (closing it brings them back to their result) */
/* inside that view the replay page drops its own top bar */
html.rp-embed .topbar, html.rp-embed .skip { display: none; }
html.rp-embed .j-main { padding-top: 12px; }
html.rp-embed .jx-head { padding-right: 56px; }
/* loading failed: a clear message and Try again, never a bar that waits for ever */
.so-loading.is-error .so-loading-bar { display: none; }
.so-loading.is-error .so-loading-txt { color: #f6d48e; font-weight: 600; line-height: 1.5; max-width: 34ch; margin-inline: auto; }
.so-loading .so-retry { margin-top: 14px; pointer-events: auto; }
.so-loading .so-fail-what { display: block; margin-top: 10px; font-size: 11px; color: rgba(255, 255, 255, .45); word-break: break-all; max-width: 40ch; margin-inline: auto; }
/* small phones sideways (iPhone SE, mini): the view switcher sits in the middle, so Sound is an icon only and never runs under it */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 799px) {
  .jx-app .so-tool-txt { display: none; }
  .jx-app .so-tool { width: 46px; padding: 0; }
}
/* the smallest phones sideways: only the chosen view keeps its word, the others show their icon (the word stays for screen readers) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 699px) {
  .jx-head .jx-sw button { padding: 0 10px; }
  .jx-head .jx-sw button:not([aria-pressed="true"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* ---------- the replay in the 3D world: the bar along the bottom of the stage ---------- */
.rp-tag { display: none; }
html.is-replay .rp-tag { display: inline-flex; }
html.is-replay [data-t="tagRoute"], html.is-replay #train-btn { display: none; }
.so-stage.is-replay .so-ctl, .so-stage.is-replay #so-status, .so-stage.is-replay #so-pause, .so-stage.is-replay .jb-exp { display: none; }
.rpb { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(8, 9, 12, .7); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); color: #fff; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .rpb { background: rgba(8, 9, 12, .9); } }
.rpb[hidden] { display: none; }
.rpb-play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; }
.rpb-play .j-i { width: 22px; height: 22px; fill: #111; }
.rpb-skip { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer; }
.rpb-skip .j-i { width: 20px; height: 20px; fill: currentColor; }
.rpb-track { flex: 1 1 auto; min-width: 80px; height: 6px; margin: 0 8px; }
.rpb-track::before { content: ""; position: absolute; left: -8px; right: -8px; top: -19px; bottom: -19px; }   /* a finger-sized target */
.rpb-time { flex: none; font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.rpb-speed { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.rpb-speed button { min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .78); font: 700 13px var(--mono); cursor: pointer; }
.rpb-speed button[aria-pressed="true"] { background: #fff; color: #111; }
.rpb-back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.rpb-back .j-i { width: 16px; height: 16px; fill: currentColor; }
.rpb-back[hidden] { display: none; }
@media (hover: hover) { .rpb-skip:hover, .rpb-back:hover { background: rgba(255, 255, 255, .1); } .rpb-speed button:not([aria-pressed="true"]):hover { color: #fff; } }
.rpb button:focus-visible, .rpb a:focus-visible, .rpb-track:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the camera picker and the notes sit above the bar */
/* narrow pictures (the page marks the stage rp-narrow under 760 px wide): two tidy rows.
   The track and the time across the top, the buttons below */
.rp-narrow .rpb { flex-wrap: wrap; gap: 4px 6px; padding: 10px 10px 8px; }
.rp-narrow .rpb-track { order: 0; flex: 1 1 calc(100% - 165px); margin: 0 12px 0 8px; }   /* room for the longest time, 1:30:06 / 1:30:06 */
.rp-narrow .rpb-time { order: 1; font-size: 12.5px; }
.rp-narrow #rpb-prev { order: 2; } .rp-narrow .rpb-play { order: 3; } .rp-narrow #rpb-next { order: 4; }
.rp-narrow .rpb-speed { order: 5; margin-left: auto; } .rp-narrow .rpb-back { order: 6; }
.rpb-s { display: none; }
/* small pictures (rp-small, under 560 px): one speed button that steps through the speeds, and a short label on the way back */
.rp-small .rpb { gap: 4px 3px; padding: 8px 8px 6px; }
.rp-small .rpb-skip { width: 36px; height: 40px; } .rp-small .rpb-play { width: 42px; height: 42px; }
.rp-small .rpb-speed { padding: 0; background: transparent; }
.rp-small .rpb-speed button:not([aria-pressed="true"]) { display: none; }
.rp-small .rpb-speed button[aria-pressed="true"] { min-width: 46px; min-height: 38px; background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.rp-small .rpb-l { display: none; } .rp-small .rpb-s { display: inline; }
.rp-small .rpb-back { padding: 0 11px 0 9px; gap: 4px; }
/* the very smallest phones: the way back keeps its arrow and its spoken name, the word goes */
.rp-tiny .rpb-s { display: none; } .rp-tiny .rpb-back { width: 38px; padding: 0; justify-content: center; }
.rp-tiny .rpb-skip { width: 34px; } .rp-tiny .rpb-play { width: 40px; height: 40px; }
/* phones sideways (full screen): the bar stays one line, slim */
@media (orientation: landscape) and (max-height: 520px) {
  .jx-app .rpb { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); flex-wrap: nowrap; padding: 5px 10px 5px 5px; gap: 6px; }
  .jx-app .rpb-play { width: 38px; height: 38px; }
  .jx-app .rpb-track { order: 0; flex-basis: auto; }
  .jx-app .rpb-play, .jx-app #rpb-prev, .jx-app #rpb-next, .jx-app .rpb-time, .jx-app .rpb-speed, .jx-app .rpb-back { order: 0; margin-left: 0; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 699px) { .jx-app .rpb-speed button { min-width: 38px; padding: 0 6px; } }
.vr-replays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vr-replays .vr-replay { margin: 0; }
.rp-head-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the map while watching a replay: the small live view, the credit, Follow and zoom sit clear of the replay bar.
   --rpb-top (set by the page) is the space from the bottom of the picture to the top of the bar. */
.so-stage.is-replay.is-map .so-canvas.is-mini, .so-stage.is-replay.is-map .mv-mini, .jx-app .so-stage.is-replay.is-map .so-canvas.is-mini, .jx-app .so-stage.is-replay.is-map .mv-mini { bottom: calc(var(--rpb-top, 74px) + var(--rpc-h, 18px) + 10px); }
@media (orientation: landscape) and (max-height: 520px) { .jx-app .so-stage.is-replay.is-map .so-canvas.is-mini, .jx-app .so-stage.is-replay.is-map .mv-mini { width: min(22%, 170px); } }
.so-stage.is-replay .mv-credit, .jx-app .so-stage.is-replay .mv-credit { bottom: calc(var(--rpb-top, 74px) + 5px); }
.so-stage.is-replay .mv-follow, .jx-app .so-stage.is-replay .mv-follow { bottom: calc(var(--rpb-top, 74px) + 6px); }
.so-stage.is-replay .mv-zoom, .jx-app .so-stage.is-replay .mv-zoom { top: 74px; transform: none; }
.so-stage.is-replay .mv-zoom.is-off { display: none; }
/* the camera picker and the stop notes sit just above the replay bar, whatever its height */
.so-stage.is-replay .cam, .jx-app .so-stage.is-replay .cam { bottom: calc(var(--rpb-top, 74px) + 8px); }
.so-stage.is-replay .so-toast, .jx-app .so-stage.is-replay .so-toast { bottom: calc(var(--rpb-top, 74px) + 62px); }
/* low sideways phones: smaller zoom buttons so they stay clear of the small live view */
@media (orientation: landscape) and (max-height: 340px) { .jx-app .so-stage.is-replay .mv-zoom button { width: 36px; height: 36px; font-size: 19px; } }
/* the result page: red stays for the one main button (Drive this route); the replay is the white one */
.vr-replay--main { background: #fff; color: #111; border: 1px solid #fff; }
.vr-replay--main .j-i { fill: #111; }
@media (hover: hover) { .vr-replay--main:hover { background: #e9eaee; border-color: #e9eaee; } }
.vr-replay--main:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* replay bars, calmer (Darren 09-11): the progress is light gray, not white, a thinner line and a smaller knob,
   and the bar has room to breathe inside its border. The play button stays white. */
.rp-track { height: 4px; background: rgba(255, 255, 255, .14); }
.rp-track > i { background: #c3c7cf; }
.rp-track > em { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #d6d9df; box-shadow: 0 0 0 3px rgba(214, 217, 223, .16); }
.rp-track > b { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1.5px; border-color: rgba(255, 255, 255, .38); }
.rpb { padding: 10px 16px 10px 10px; gap: 12px; }
.rp-narrow .rpb { padding: 16px 16px 10px; gap: 10px 8px; }
.rp-narrow .rpb-track { margin: 0 14px 0 10px; }
.rp-small .rpb { padding: 14px 12px 8px; gap: 8px 4px; }
.rp-small .rpb-track { margin: 0 12px 0 8px; }
@media (orientation: landscape) and (max-height: 520px) { .jx-app .rpb { padding: 6px 12px 6px 6px; gap: 8px; } .jx-app .rpb-track { margin: 0 10px; } }
/* while a replay plays, the bar and the camera picker fade away after 3 s so the train is in full view
   (a mouse move, a tap or a key brings them back); the pointer hides too, like a video player */
.so-stage.is-replay .rpb, .so-stage.is-replay .cam { transition: opacity .4s ease, visibility .4s; }
.so-stage.is-replay.rp-idle .rpb, .so-stage.is-replay.rp-idle .cam { opacity: 0; visibility: hidden; pointer-events: none; }
.so-stage.is-replay.rp-idle, .so-stage.is-replay.rp-idle canvas { cursor: none; }
@media (prefers-reduced-motion: reduce) { .so-stage.is-replay .rpb, .so-stage.is-replay .cam { transition: none; } }
/* two rows on narrow pictures: a fixed break after the time, so a button never climbs up beside it */
.rp-narrow .rpb { row-gap: 0; }
.rp-narrow .rpb::after { content: ""; order: 1; flex: 0 0 100%; height: 10px; }
.rp-narrow #rpb-prev, .rp-narrow .rpb-play, .rp-narrow #rpb-next, .rp-narrow .rpb-speed, .rp-narrow .rpb-back { margin-top: 0; }
@media (orientation: landscape) and (max-height: 520px) { .jx-app .rpb::after { content: none; } }

/* ---------- Planner, built page (design v2, 10-11-2026) ---------- */
.pl-hero { margin-bottom: 18px; }
.pl-hero .j-title { font-size: clamp(30px, 7vw, 48px); }
.pl-hero .lede { max-width: 62ch; }
button.fld { width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.fld:focus-visible { outline: 0; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242, 179, 61, .18); }
.fld-swap.is-off { cursor: default; color: var(--faint); background: var(--bg-2); }
.fld-swap { padding: 0; font: inherit; -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s; }
.fld-swap::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
@media (hover: hover) { .fld-swap:not(.is-off):hover { background: var(--card-2); border-color: rgba(255,255,255,.3); } }
.fld-swap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pl-dir { margin-top: 10px; }
.dd-q input { flex: 1; min-width: 0; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 650; outline: 0; -webkit-appearance: none; appearance: none; }
.dd-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dd-q input::placeholder { color: var(--faint); opacity: 1; font-weight: 500; }
.dd ul { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.dd li[data-k] { cursor: pointer; }
.dd li[data-k]:hover { background: rgba(255, 255, 255, .05); }
.dd li[aria-selected="true"] > span { font-weight: 750; }
.dd li[aria-selected="true"] > span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--red-2); vertical-align: middle; }
.dd-none { color: var(--faint); }
.ch.is-on { border-color: rgba(255, 255, 255, .5); background: #2a2e36; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset; cursor: default; }
.ch.is-on .ch-ic { background: rgba(255, 255, 255, .1); color: #fff; }
.ch.is-on::after { content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2315171c' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ch.is-soon { opacity: .55; cursor: default; }
.pl-lbl2 { margin-top: 18px; }
.pl-note--tight { margin-top: 10px; }
.tr-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.tr { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); text-align: left; color: var(--text); cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.tr img { width: 100%; height: auto; aspect-ratio: 22 / 10; object-fit: contain; margin-bottom: 6px; }
.tr b { font-size: 15px; }
.tr span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tr .tr-t { margin-top: auto; padding-top: 6px; font: 700 12px var(--mono); color: var(--text); }
.tr[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tr[aria-pressed="true"]::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2315171c' d='m9.5 16.2-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.tr:focus-visible, .dep-row button:focus-visible, .tgl:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tr--soon { border-style: dashed; background: transparent; cursor: default; justify-content: center; min-height: 120px; }
.tr-ph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px dashed var(--line-2); margin-bottom: 6px; }
.tr-ph .j-i { width: 18px; height: 18px; fill: var(--faint); }
.dep-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dep-row button { min-height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); font: 700 15px var(--mono); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; -webkit-tap-highlight-color: transparent; }
.dep-row button small { font: 600 11px var(--font); letter-spacing: .02em; color: var(--muted); }
.dep-row button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.dep-row button[aria-pressed="true"] small { color: var(--bg); opacity: .75; }
.pl-ready { margin: -4px 0 14px; }
.pl-best .rc-best { margin: 0; }
.pl-best .pl-note { margin-top: 8px; }
.pl-aside .rc-credit { margin: 0; }
.pl-bar { margin: 0; border-radius: var(--radius) var(--radius) 0 0; }
@media (min-width: 600px) {
  .tr-grid { grid-template-columns: repeat(3, 1fr); }
  .dep-row { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 599px) {
  .tr:not(.tr--soon) { display: grid; grid-template-columns: 112px 1fr; column-gap: 12px; align-items: center; }
  .tr:not(.tr--soon) img { grid-row: 1 / 5; margin: 0; }
  .tr .tr-t { grid-column: 2; }
  .tr--soon { min-height: 0; flex-direction: row; align-items: center; gap: 12px; }
  .tr--soon .tr-ph { margin: 0; flex: none; }
  .tr--soon b { display: none; }
}
@media (hover: hover) {
  .tr:not(.tr--soon):hover, .dep-row button:hover { border-color: var(--line-2); }
  .dep-row button[aria-pressed="true"]:hover { border-color: var(--text); }
}

/* ride along: the driver drives, no lever and no score */
.is-ride #so-lever, .is-ride .so-eb { display: none !important; }
#j-summary.is-ride .sm-score, #j-summary.is-ride #sm-share, #j-summary.is-ride .sm-tbl th:nth-child(2), #j-summary.is-ride .sm-tbl td:nth-child(2), #j-summary.is-ride .sm-tbl th:nth-child(4), #j-summary.is-ride .sm-tbl td:nth-child(4), #j-summary.is-ride #sm-fair { display: none; }
#j-summary.is-ride #sm-ride { display: inline-flex; }
.rc-own { border-style: solid; border-color: var(--line-2); }
@media (min-width: 700px) { .rc-own { grid-template-columns: 1fr auto; } }

/* Darren's game credit first, the map and data credits on their own line under it */
.jp-credit, .rc-credit, .rp-credit { white-space: pre-line; }
.credit-who { color: var(--muted); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 2px; padding: 6px 0; }
.credit-who:hover, .credit-who:focus-visible { color: var(--text); text-decoration-color: currentColor; }

/* ---- the train ferry (ferry.js): the cutscenes fill the picture; Skip in the corner ---- */
.is-cut #so-drive, .is-cut .cam { display: none !important; }
.fy-skip { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 6; min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(12, 16, 22, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fy-skip[hidden] { display: none; }
@media (hover: hover) { .fy-skip:hover { background: rgba(12, 16, 22, .74); border-color: rgba(255, 255, 255, .6); } }
.tt-ferry { font-size: 11px; letter-spacing: .02em; }
button.ch { font: inherit; width: 100%; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { button.ch:not([aria-disabled="true"]):not([aria-pressed="true"]):hover { border-color: rgba(255, 255, 255, .28); } }

/* Messages (toasts) sit in the open part of the view, left of the power lever and emergency brake, and
   wrap onto two lines on narrow phones instead of running under the controls (12-11) */
.jx-app .so-toast { left: 12px; right: calc(max(12px, env(safe-area-inset-right)) + 96px); transform: none; margin: 0 auto; width: -webkit-fit-content; width: fit-content; white-space: normal; text-align: center; line-height: 1.3; border-radius: 18px; }
.jx-app .so-stage.is-map .so-toast, .jx-app .so-stage.is-replay .so-toast, .jx-app .is-ride .so-toast { right: 12px; }
/* three trains in the picker (the Vectron joins on the wired lines): side by side on a wide screen,
   one under the other on a phone, each a row with the picture on the left */
.tpk.tpk--3 { grid-template-columns: repeat(3, 1fr); }
.tpk-wires { margin-top: 10px; }
@media (max-width: 599px) {
  .tpk.tpk--3 { grid-template-columns: 1fr; gap: 8px; }
  .tpk--3 .tpk-c { flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; }
  .tpk--3 .tpk-img { flex: none; width: 104px; padding-bottom: 48px; margin: 0; }
  .tpk--3 .tpk-b { flex: 1; padding-right: 30px; }
}
/* the planner's Vectron where the line has no wires all the way: shown, not to be picked */
.tr[aria-disabled="true"] { opacity: .55; cursor: default; }
.tr[aria-disabled="true"] img { filter: grayscale(1); }
/* a route card the chosen Vectron cannot drive (no wires all the way) */
.rc-diesel { margin: 0; color: var(--muted); font-size: 12.5px; }

/* ---------- Names and the top ten (13-11-2026, approved designs signin, topten, summary, verified) ---------- */
.linkbtn { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tt-list { margin: 0; padding: 0; list-style: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.tt-list[hidden] { display: none; }
.tt-row { position: relative; display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.tt-row:first-child { border-top: 0; }
.tt-row.is-you { background: rgba(210, 18, 46, .1); box-shadow: inset 3px 0 0 var(--red); }
.tt-rk { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 14px/1 var(--mono); color: var(--muted); }
.tt-rk--1 { background: #f2c94c; color: #1a1406; }
.tt-rk--2 { background: #d9dde3; color: #15171c; }
.tt-rk--3 { background: #d9945a; color: #1c1006; }
.tt-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: hsl(var(--h, 210) 28% 30%); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.tt-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.tt-who > a, .tt-who > b { font-weight: 750; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tt-who > a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.tt-who small { flex-basis: 100%; color: var(--muted); font-size: 13px; }
.tt-you { padding: 2px 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; }
.tt-sc { font: 800 18px/1.1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.tt-sc small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.tt-list--3 .tt-row { grid-template-columns: 28px 34px minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; }
.tt-list--3 .tt-av { width: 34px; height: 34px; font-size: 12.5px; }
.tt-list--3 .tt-sc { font-size: 16px; }
@media (max-width: 420px) { .tt-row { grid-template-columns: 28px 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; } .tt-av { width: 34px; height: 34px; font-size: 12.5px; } }

/* summary card */
.sm-top { display: grid; gap: 12px; }
.sm-top[hidden] { display: none; }
.sm-top h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.sm-top .win-p { margin: 0; }
.sm-top .win-p:empty { display: none; }
.sm-top .j-i { fill: currentColor; }

/* result page */
.vr-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; }
.vr-by .tt-av { width: 34px; height: 34px; font-size: 12.5px; }
.vr-by a, .vr-by b { font-size: 17px; font-weight: 750; color: #fff; }
.vr-by a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.vr-rank { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(242, 179, 61, .45); background: rgba(242, 179, 61, .1); color: #f6d48e; font-size: 12.5px; font-weight: 750; }
.vr-top { display: grid; gap: 12px; }
.vr-top h2 { margin: 0; font-size: 19px; }

/* sign-in window */
.dlg--gs { width: min(520px, 100%); padding: 24px 22px 20px; display: grid; gap: 14px; }
.dlg--gs h2 { margin: 0 46px 0 0; font-size: 24px; line-height: 1.2; }
.gs-lead { margin: -6px 0 0; color: var(--muted); }
.gs-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: #fff; color: #1f1f1f; font-weight: 700; font-size: 16.5px; text-decoration: none; }
.gs-google svg { width: 22px; height: 22px; flex: none; }
.gs-google:focus-visible, .gs-mail:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gs-or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 14px; }
.gs-or::before, .gs-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.gs-mail { min-height: 52px; }
.gs-mail .j-i { width: 20px; height: 20px; fill: currentColor; }
.gs-inapp { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(242, 179, 61, .35); background: rgba(242, 179, 61, .07); color: #f6d48e; font-size: 14px; }
.gs-name { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); }
.gs-name p { margin: 0; color: var(--muted); font-size: 14px; }
.gs-name .gs-cap { margin-bottom: 4px; color: #c6cbd3; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gs-acct { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(120, 170, 220, .3); background: rgba(70, 120, 170, .1); font-size: 14.5px; line-height: 1.45; }
.gs-acct .j-i { flex: none; width: 22px; height: 22px; fill: #8ab8e6; }
.gs-terms { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.gs-terms a { color: var(--text); }
.sh-sign { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }

/* the top ten page */
.tt-hero { padding-bottom: 8px; }
.tt-saved { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); font-weight: 650; }
.tt-saved.is-ok { border-color: rgba(47, 191, 113, .45); background: rgba(47, 191, 113, .08); }
.tt-saved.is-warn { border-color: rgba(242, 179, 61, .45); background: rgba(242, 179, 61, .08); }
.tt-saved[hidden] { display: none; }
.tt-tabs { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 2px 16px 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tab { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 14.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.tt-tab[aria-current] { background: #eef0f3; border-color: #eef0f3; color: #111318; }
.tt-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 960px) { .tt-tabs { flex-wrap: wrap; margin: 0 0 20px; padding: 0; overflow: visible; } }
.tt-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .tt-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; } .tt-side { position: sticky; top: 20px; } }
.tt-main { display: grid; gap: 14px; min-width: 0; }
.tt-list--full .tt-row { padding: 12px 16px; }
.tt-list--full .tt-sc { font-size: 22px; }
.tt-empty { padding: 22px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); }
.tt-empty p { margin: 0; }
.tt-empty[hidden] { display: none; }
.tt-me { display: grid; gap: 12px; padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--line-2); }
.tt-me p { margin: 0; }
.tt-me > .btn { justify-self: start; }
.tt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.tt-rename { display: grid; gap: 8px; width: 100%; }
.tt-rename label { color: var(--text); font-weight: 650; }
.tt-rename div { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-rename input { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; font-size: 16px; }
.tt-rename input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tt-nmsg { margin: 0; color: #f6d48e; font-size: 14px; min-height: 1px; }
.tt-side { display: grid; gap: 16px; }
.tt-route, .tt-how { display: grid; gap: 14px; }
.tt-route h2, .tt-how h2 { margin: 0; font-size: 21px; }
.tt-facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 22px; margin: 0; }
.tt-facts dt { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tt-facts dd { margin: 2px 0 0; font: 700 17px/1.2 var(--mono); }
@media (max-width: 380px) { .tt-facts { grid-template-columns: repeat(2, auto); } }
.tt-ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tt-ticks li { position: relative; padding-left: 28px; color: #d3d7de; }
.tt-ticks li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
/* phones and tablets: the top ten card and Share come straight after the score (approved summary design) */
@media (max-width: 959px) {
  .sm--tt .sm-mainc, .sm--tt .sm-side { display: contents; }
  .sm--tt { display: flex; flex-direction: column; gap: 14px; }
  .sm--tt .sm-hero { order: 1; } .sm--tt .sm-tt { order: 2; } .sm--tt .sm-side > .sm-card:not(.sm-tt) { order: 3; }
  .sm--tt .sm-stats { order: 4; } .sm--tt .sm-mainc > .sm-card { order: 5; } .sm--tt .sm-private { order: 6; }
}
.rc-top { align-self: flex-start; margin-top: 4px; color: var(--text); font-size: 13px; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
/* handbook link in the top ten side card */
.tt-how .hb-link { margin-top: 14px; }
.hb-link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.hb-sec > p.hb-note { max-width: none; }
.hb-sec > div + .hb-note { margin-top: 12px; }
/* routes page: the rider's train, chosen before Start (same look as the game's train picker) */
.rc-tr-wrap { margin: 4px 0 18px; }
.rc-tr-h { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.rc-tr { display: grid; grid-template-columns: repeat(3, minmax(0, 290px)); gap: 10px; }
.rc-trb { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, box-shadow .15s; }
.rc-trb:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.rc-trb[aria-checked="true"] { border-color: var(--red); background: linear-gradient(180deg, rgba(210, 18, 46, .14), rgba(210, 18, 46, .04)); box-shadow: inset 0 0 0 1px var(--red); }
.rc-trb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rc-trimg { flex: none; display: block; width: 88px; height: 41px; border-radius: 9px; background: radial-gradient(60% 55% at 55% 60%, rgba(255, 255, 255, .08), transparent 70%); }
.rc-trimg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rc-trt { display: grid; gap: 1px; min-width: 0; }
.rc-trt b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 20px; white-space: nowrap; }
.rc-trt small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.rc-tr-wrap .rc-train { margin: 10px 0 0; }
/* phones: the three trains side by side, picture over the name */
@media (max-width: 599px) {
  .rc-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rc-trb { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 6px 8px; text-align: center; }
  .rc-trimg { width: 100%; height: auto; aspect-ratio: 440 / 200; }
  .rc-trt small { display: none; }
  .rc-trt b { font-size: 14px; }
}
/* small tablets and phones on their side: the picture and the name only, so nothing wraps */
@media (min-width: 600px) and (max-width: 899px) { .rc-trt small { display: none; } }
/* timetable key: the mark for a stop run past (same mark and colour as in the timetable) */
.jp-key-x { width: 8px; color: #f6d48e; font-size: 13px; font-weight: 800; line-height: 1; text-align: center; }