/* Getting here (11 Nov 2026): the trip planner, places to stay, groups and the three ways over.
   Loaded after rt-v2.css and rt-v2-occasions.css; everything is prefixed tv-. */
html body #rt-site.rt-shell #siteWrapper.v2 {
  & .tv-h { margin: 0 0 22px; }
  & .tv-form { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; gap: 16px 20px; margin: 0 0 20px; }
  & .tv-form label { display: grid; gap: 6px; font: 500 13px/1.3 var(--v2-text); letter-spacing: .04em; text-transform: uppercase; color: var(--v2-ink-2); min-width: 0; }
  & .tv-form :is(select, input) {
    font: 400 18px/1.2 var(--v2-text); color: var(--v2-navy); background: #fff; border: 1px solid var(--v2-navy); border-radius: 0;
    padding: 13px 14px; min-height: 52px; width: 100%; min-width: 0; box-sizing: border-box; letter-spacing: 0; text-transform: none; appearance: auto;
  }
  & .tv-form :is(select, input):focus-visible { outline: 2px solid var(--v2-rim); outline-offset: 2px; }
  & .tv-tabs { margin: 0 0 22px; }
  & .tv-tabs button { min-height: 46px; }
  & .tv-note { margin: 0 0 18px; padding: 12px 16px; background: var(--v2-linen); border-left: 3px solid var(--v2-rust); color: var(--v2-navy); font-size: 16px; }
  & [hidden] { display: none !important; }

  & .tv-plan { background: var(--v2-plate); border-top: 2px solid var(--v2-navy); padding: 24px 26px 26px; }
  & .tv-plan h3 { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--v2-display); color: var(--v2-navy); margin: 0 0 18px; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
  & .tv-steps { list-style: none; margin: 0 0 18px; padding: 0; font-variant-numeric: lining-nums proportional-nums; }
  & .tv-steps li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 16px; padding: 0 0 18px; position: relative; }
  & .tv-steps li::before { content: ""; position: absolute; left: 62px; top: 8px; bottom: -8px; width: 1px; background: rgba(23, 46, 70, .28); transform: translateX(7.5px); }
  & .tv-steps li:last-child::before { display: none; }
  & .tv-steps li:last-child { padding-bottom: 0; }
  & .tv-steps time { font: 500 17px/1.45 var(--v2-text); color: var(--v2-navy); text-align: right; font-variant-numeric: lining-nums proportional-nums; }
  & .tv-steps div { padding-left: 26px; position: relative; }
  & .tv-steps div::before { content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--v2-plate); border: 1.5px solid var(--v2-navy); z-index: 1; }
  & .tv-steps b { display: block; font: 500 17px/1.45 var(--v2-text); color: var(--v2-navy); }
  & .tv-steps span { display: block; color: var(--v2-ink-2); font-size: 15.5px; line-height: 1.5; margin-top: 2px; }
  & .tv-steps .tv-step--table div::before, & .tv-steps .tv-step--bed div::before { background: var(--v2-ochre); border-color: var(--v2-ochre); width: 13px; height: 13px; left: 1px; top: 6px; }
  & .tv-steps .tv-step--table b { font: 400 22px/1.25 var(--v2-display); }
  & .tv-notes p { margin: 0 0 10px; color: var(--v2-ink-2); font-size: 15.5px; font-variant-numeric: lining-nums; }
  & .tv-ticket { margin: 6px 0 18px; padding: 12px 16px; background: var(--v2-linen); color: var(--v2-navy); font-size: 15.5px; }
  & .tv-plan .v2-actions { margin-top: 18px; flex-wrap: wrap; gap: 14px 24px; }

  & .tv-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border: 1px solid var(--v2-navy); border-top: 0; padding: 16px 26px; scroll-margin-top: 110px; }
  & .tv-send p { margin: 0; color: var(--v2-ink-2); }
  & .tv-send p b { color: var(--v2-navy); font-weight: 500; }
  & .tv-send__btns { display: flex; flex-wrap: wrap; gap: 8px; }
  & .tv-send__btns :is(button, a) { font: 500 15px/1 var(--v2-text); color: var(--v2-navy); background: #fff; border: 1px solid var(--v2-navy); border-radius: 0; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
  & .tv-send__btns :is(button, a):hover { background: var(--v2-navy); color: #fff; }
  & .tv-small { font-size: 14px; color: var(--v2-ink-2); margin: 14px 0 0; max-width: 78ch; }

  & .tv-stay { background: var(--v2-linen); scroll-margin-top: 90px; }
  & .tv-card__k { font: italic 400 17px/1.3 var(--v2-display); color: var(--v2-rust); margin: 0 0 8px; }
  & .tv-lede { color: var(--v2-ink-2); margin: -8px 0 20px; max-width: 60ch; }
  & .tv-hotels { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
  & .tv-hotels li { border-top: 1px solid var(--v2-navy); padding-top: 12px; }
  & .tv-hotels a b { font: 400 22px/1.2 var(--v2-display); color: var(--v2-navy); }
  & .tv-hotels li > a { text-decoration: none; }
  & .tv-hotels li > a:hover b { text-decoration: underline; text-underline-offset: 4px; }
  & .tv-hotels span { display: block; color: var(--v2-ink-2); font-size: 15.5px; margin-top: 4px; font-variant-numeric: lining-nums; }
  & .tv-taxi { margin: 24px 0 0; color: var(--v2-ink-2); max-width: 70ch; font-variant-numeric: lining-nums; }
  & .tv-taxi b { color: var(--v2-navy); font-weight: 500; }

  & .tv-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
  & .tv-ways h3 { font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--v2-display); margin: 0 0 10px; color: #fff; }
  & .tv-ways p { color: var(--v2-mist); margin: 0 0 14px; }
  & .tv-ways button.v2-link { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px; cursor: pointer; font: inherit; color: #fff; }
  & .tv-ways--ink h3 { color: var(--v2-navy); }
  & .tv-ways--ink p { color: var(--v2-ink-2); }
  & .tv-ways .v2-spec { font-variant-numeric: lining-nums; }
}
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2 {
    & .tv-form { grid-template-columns: 1fr 1fr; }
    & .tv-form label:first-child, & .tv-form label:nth-child(2) { grid-column: 1 / -1; }
    & .tv-tabs { display: flex; }
    & .tv-tabs button { flex: 1; padding: 12px 8px; }
    & .tv-hotels, & .tv-ways { grid-template-columns: 1fr; }
    & .tv-plan { padding: 20px 16px 22px; }
    & .tv-steps li { grid-template-columns: 50px minmax(0, 1fr); gap: 0 10px; }
    & .tv-steps li::before { left: 50px; transform: translateX(4.5px); }
    & .tv-steps div { padding-left: 22px; }
    & .tv-steps div::before { left: 0; }
    & .tv-steps .tv-step--table div::before, & .tv-steps .tv-step--bed div::before { left: -2px; }
    & .tv-send { padding: 16px; }
    & .tv-send__btns { width: 100%; }
    & .tv-send__btns :is(button, a) { flex: 1 1 calc(50% - 8px); justify-content: center; }
    & .tv-plan .v2-actions .v2-btn { width: 100%; justify-content: center; text-align: center; }
  }
}

/* One-tap trips, and the crossing drawn as a line: train, boat, a walk, the table. */
html body #rt-site.rt-shell #siteWrapper.v2 {
  & .tv-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
  & .tv-quick button { font: 500 15px/1 var(--v2-text); color: var(--v2-navy); background: var(--v2-linen); border: 1px solid transparent; border-radius: 999px; padding: 0 18px; min-height: 44px; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
  & .tv-quick button:hover { transform: translateY(-1px); border-color: var(--v2-navy); }
  & .tv-quick button[aria-pressed="true"] { background: var(--v2-navy); color: #fff; }

  & .tv-strip { display: flex; align-items: flex-start; margin: 4px 0 26px; padding: 18px 4px 0; font-variant-numeric: lining-nums tabular-nums; }
  & .tv-stop { flex: 0 0 auto; width: 74px; text-align: center; position: relative; }
  & .tv-stop i { display: block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--v2-navy); background: var(--v2-plate); margin: 0 auto 8px; position: relative; z-index: 2; }
  & .tv-stop--table i { background: var(--v2-ochre); border-color: var(--v2-ochre); width: 15px; height: 15px; margin-top: -2px; margin-bottom: 6px; }
  & .tv-stop b { display: block; font: 500 16px/1.2 var(--v2-text); color: var(--v2-navy); min-height: 19px; }
  & .tv-stop span { display: block; font-size: 12.5px; line-height: 1.25; color: var(--v2-ink-2); margin-top: 3px; }
  & .tv-seg { flex: 1 1 0; height: 11px; position: relative; margin: 0 -31px; min-width: 20px; }
  & .tv-seg--rail { flex-grow: 1.6; }
  & .tv-seg--walk { flex-grow: .7; }
  & .tv-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; }
  & .tv-seg--rail::before { border-top: 1.5px solid var(--v2-navy); }
  & .tv-seg--rail::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 7px; background: repeating-linear-gradient(90deg, rgba(23,46,70,.45) 0 1.5px, transparent 1.5px 9px); }
  & .tv-seg--walk::before { border-top: 2px dotted var(--v2-navy); }
  & .tv-seg--sea::before { top: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 1 12 6 T24 6' fill='none' stroke='%232c4f7c' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 12px; }
  & .tv-seg em { position: absolute; top: -14px; left: 0; width: 26px; height: 18px; opacity: 0; background: no-repeat center / contain; z-index: 3; }
  & .tv-seg--rail em { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Crect x='1' y='3' width='24' height='10' rx='3' fill='%23172e46'/%3E%3Crect x='4' y='5.5' width='4' height='3.5' rx='.6' fill='%23fbfaf6'/%3E%3Crect x='10' y='5.5' width='4' height='3.5' rx='.6' fill='%23fbfaf6'/%3E%3Crect x='16' y='5.5' width='4' height='3.5' rx='.6' fill='%23fbfaf6'/%3E%3Ccircle cx='7' cy='15' r='2' fill='%23172e46'/%3E%3Ccircle cx='19' cy='15' r='2' fill='%23172e46'/%3E%3C/svg%3E"); }
  & .tv-seg--sea em { top: -13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M2 11h22l-3.5 5h-15z' fill='%23b4552d'/%3E%3Crect x='8' y='6' width='10' height='5' rx='1' fill='%23172e46'/%3E%3Crect x='12' y='2' width='1.6' height='4' fill='%23172e46'/%3E%3Cpath d='M13.6 2h4l-4 2.4z' fill='%23dfb34e'/%3E%3C/svg%3E"); }
  & .tv-seg--walk em { width: 9px; height: 9px; top: 1px; border-radius: 50%; background: var(--v2-ochre); }
  & .tv-strip--short .tv-seg--sea { flex-grow: 1.6; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #rt-site.rt-shell #siteWrapper.v2 {
    & .tv-seg--sea::before { animation: tv-wave 2.4s linear infinite; }
    & .tv-go .tv-seg--rail em { animation: tv-move 9s linear infinite; }
    & .tv-go .tv-seg--sea em { animation: tv-move 9s linear 3s infinite, tv-bob 1.2s ease-in-out infinite; }
    & .tv-go .tv-seg--walk em { animation: tv-move 9s linear 6s infinite; }
    & .tv-go .tv-stop--table i { animation: tv-pulse 9s ease-out infinite; }
    & .tv-steps li { animation: tv-in .45s ease both; }
    & .tv-steps li:nth-child(2) { animation-delay: .05s; } & .tv-steps li:nth-child(3) { animation-delay: .1s; } & .tv-steps li:nth-child(4) { animation-delay: .15s; }
    & .tv-steps li:nth-child(5) { animation-delay: .2s; } & .tv-steps li:nth-child(6) { animation-delay: .25s; } & .tv-steps li:nth-child(n+7) { animation-delay: .3s; }
  }
}
@keyframes tv-wave { to { background-position: -24px 0; } }
@keyframes tv-move { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 31% { opacity: 1; } 33.3% { left: calc(100% - 26px); opacity: 0; } 100% { left: calc(100% - 26px); opacity: 0; } }
@keyframes tv-bob { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -2px; rotate: 3deg; } }
@keyframes tv-pulse { 0%, 96% { box-shadow: 0 0 0 0 rgba(223,179,78,.0); } 97% { box-shadow: 0 0 0 0 rgba(223,179,78,.7); } 100% { box-shadow: 0 0 0 12px rgba(223,179,78,0); } }
@keyframes tv-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2 {
    & .tv-quick { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 2px 16px; scrollbar-width: none; }
    & .tv-quick button { flex: 0 0 auto; }
    & .tv-stop { width: 66px; }
    & .tv-seg { margin: 0 -27px; }
    & .tv-stop b { font-size: 15px; }
    & .tv-stop span { font-size: 11.5px; }
  }
}

/* iPhone (11 Nov): the page slid sideways when dragged. Keep this page to the width of the screen,
   let the date box shrink like the others, and keep the trip chips scrolling inside their own row. */
html:has(#tg), html:has(#tg) body { overflow-x: hidden; }
@supports (overflow-x: clip) { html:has(#tg), html:has(#tg) body { overflow-x: clip; } }
html body #rt-site.rt-shell #siteWrapper.v2:has(#tg) { overflow-x: clip; max-width: 100vw; }
html body #rt-site.rt-shell #siteWrapper.v2 {
  & .tv-form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; text-align: left; line-height: 24px; }
  & .tv-form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
  & .tv-form select { max-width: 100%; }
  & .tv-quick { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  & .tv-strip { max-width: 100%; overflow: hidden; }
}
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2 .tv-quick { margin: 0 0 20px; padding: 2px 0; }
}

/* Three taps to the table (11 Nov 2026 evening, Tom: "an easy game to win"). Tap where you start, the day,
   the table; the plan unlocks, then four moves to tick off and a small finish card. Everything is prefixed tg-. */
html body #rt-site.rt-shell #siteWrapper.v2 {
  & .tg { scroll-margin-top: 80px; }
  & .tg .tv-h { margin-bottom: 14px; }
  & .tg-pips { list-style: none; display: flex; gap: 6px; margin: 0 0 26px; padding: 0; counter-reset: p; max-width: 520px; }
  & .tg-pips li { flex: 1; font: 500 12px/1 var(--v2-text); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-ink-2); padding-top: 10px; border-top: 3px solid rgba(23,46,70,.14); transition: border-color .35s, color .35s; }
  & .tg-pips li.on { border-top-color: var(--v2-navy); color: var(--v2-navy); }
  & .tg-pips li:last-child.on { border-top-color: var(--v2-ochre); }

  & .tg-step { margin: 0 0 26px; transition: opacity .3s; }
  & .tg-step.tg-locked { opacity: .38; pointer-events: none; }
  & .tg-q { display: flex; align-items: center; gap: 12px; font: 400 clamp(22px, 2.4vw, 28px)/1.2 var(--v2-display); color: var(--v2-navy); margin: 0 0 14px; }
  & .tg-q span { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--v2-navy); color: #fff; font: 500 14px/30px var(--v2-text); text-align: center; }

  & :is(.tg-tiles, .tg-days, .tg-meal, .tg-times) button {
    font: inherit; color: var(--v2-navy); background: #fff; border: 1px solid rgba(23,46,70,.28); border-radius: 0; cursor: pointer; text-align: left;
    transition: background .18s, color .18s, border-color .18s, transform .18s; -webkit-tap-highlight-color: transparent;
  }
  & :is(.tg-tiles, .tg-days, .tg-meal, .tg-times) button:hover:not(:disabled) { border-color: var(--v2-navy); transform: translateY(-1px); }
  & :is(.tg-tiles, .tg-days, .tg-meal, .tg-times) button[aria-checked="true"] { background: var(--v2-navy); border-color: var(--v2-navy); color: #fff; }
  & :is(.tg-tiles, .tg-days, .tg-meal, .tg-times) button[aria-checked="true"] span { color: var(--v2-mist); }
  & :is(.tg-tiles, .tg-days, .tg-meal, .tg-times) button:focus-visible { outline: 2px solid var(--v2-rim); outline-offset: 2px; }
  & :is(.tg-tiles, .tg-days, .tg-meal, .tg-times) button:disabled { opacity: .45; cursor: default; }

  & .tg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  & .tg-tiles button { padding: 14px 14px 13px; min-height: 76px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
  & .tg-tiles b { font: 500 16.5px/1.2 var(--v2-text); }
  & .tg-tiles span { font-size: 13px; line-height: 1.3; color: var(--v2-ink-2); font-variant-numeric: lining-nums; }

  & .tg-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 2px 4px; scroll-snap-type: x proximity; }
  & .tg-days::-webkit-scrollbar { display: none; }
  & .tg-days button { flex: 0 0 64px; padding: 10px 0 9px; text-align: center; scroll-snap-align: start; position: relative; }
  & .tg-days span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink-2); }
  & .tg-days b { display: block; font: 400 26px/1.15 var(--v2-display); font-variant-numeric: lining-nums; }
  & .tg-days .tg-slow::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-rust); }
  & .tg-other { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14.5px; color: var(--v2-ink-2); }
  & .tg-other input { font: 400 15px/1.2 var(--v2-text); color: var(--v2-navy); border: 0; border-bottom: 1px solid var(--v2-navy); background: transparent; padding: 4px 0; border-radius: 0; -webkit-appearance: none; appearance: none; min-height: 32px; }

  & .tg-meal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 520px; margin-bottom: 10px; }
  & .tg-meal button { padding: 14px 16px; }
  & .tg-meal b { display: block; font: 400 24px/1.15 var(--v2-display); }
  & .tg-meal span { display: block; font-size: 13.5px; color: var(--v2-ink-2); margin-top: 2px; }
  & .tg-times { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  & .tg-times button { padding: 9px 14px 8px; min-width: 92px; }
  & .tg-times b { display: block; font: 500 17px/1.2 var(--v2-text); font-variant-numeric: lining-nums; }
  & .tg-times span { display: block; font-size: 12.5px; color: var(--v2-green); margin-top: 1px; font-variant-numeric: lining-nums; }
  & .tg-times .tg-moon span { color: var(--v2-rust); }
  & .tg-extra { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
  & .tg-count { display: inline-flex; align-items: center; border: 1px solid rgba(23,46,70,.28); background: #fff; }
  & .tg-count button { width: 46px; height: 46px; border: 0; background: none; font: 400 24px/1 var(--v2-text); color: var(--v2-navy); cursor: pointer; }
  & .tg-count button:disabled { opacity: .3; cursor: default; }
  & .tg-count output { min-width: 104px; text-align: center; font: 500 15.5px/1 var(--v2-text); color: var(--v2-navy); font-variant-numeric: lining-nums; }
  & .tg-switch { display: inline-flex; border: 1px solid var(--v2-navy); }
  & .tg-switch button { font: 500 14.5px/1 var(--v2-text); color: var(--v2-navy); background: #fff; border: 0; padding: 0 16px; min-height: 46px; cursor: pointer; }
  & .tg-switch button[aria-pressed="true"] { background: var(--v2-navy); color: #fff; }

  & .tg-result { scroll-margin-top: 80px; }
  & .tg-card { background: var(--v2-plate); border-top: 3px solid var(--v2-ochre); padding: 24px 26px 22px; box-shadow: 0 1px 0 rgba(23,46,70,.08), 0 14px 34px -24px rgba(23,46,70,.45); }
  & .tg-k { font: italic 400 17px/1.3 var(--v2-display); color: var(--v2-rust); margin: 0 0 4px; }
  & .tg-card h3 { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--v2-display); color: var(--v2-navy); margin: 0 0 16px; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
  & .tg-score { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 6px; }
  & .tg-score div { min-width: 0; }
  & .tg-score span { font: 500 11.5px/1.3 var(--v2-text); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-ink-2); }
  & .tg-score b { margin: 2px 0 0; font: 400 26px/1.1 var(--v2-display); color: var(--v2-navy); font-variant-numeric: lining-nums; }
  & .tg-tip { margin: -8px 0 20px; padding: 10px 14px; background: var(--v2-linen); color: var(--v2-navy); font-size: 15.5px; }

  & .tg-movesh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; padding-top: 16px; border-top: 1px solid rgba(23,46,70,.16); }
  & .tg-movesh b { font: 400 24px/1.1 var(--v2-display); color: var(--v2-navy); font-weight: 400; }
  & #tg-done { --p: 0; font: 500 13px/1 var(--v2-text); color: var(--v2-navy); padding: 7px 12px; background: linear-gradient(90deg, var(--v2-ochre) calc(var(--p) * 100%), var(--v2-linen) 0); transition: background .4s; font-variant-numeric: lining-nums; }
  & .tg-moves { list-style: none; margin: 0; padding: 0; }
  & .tg-move { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; padding: 14px 0; border-bottom: 1px solid rgba(23,46,70,.1); }
  & .tg-move:last-child { border-bottom: 0; }
  & .tg-tick { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--v2-navy); background: #fff; color: var(--v2-navy); cursor: pointer; padding: 0; position: relative; transition: background .25s, border-color .25s, transform .25s; }
  & .tg-tick span { font: 500 15px/1 var(--v2-text); transition: opacity .2s; }
  & .tg-tick::after { content: ""; position: absolute; left: 13px; top: 9px; width: 9px; height: 16px; border: solid var(--v2-navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.3,1.6,.6,1); }
  & .is-done .tg-tick { background: var(--v2-ochre); border-color: var(--v2-ochre); }
  & .is-done .tg-tick span { opacity: 0; }
  & .is-done .tg-tick::after { transform: rotate(45deg) scale(1); }
  & .tg-move h4 { font: 500 17.5px/1.3 var(--v2-text); color: var(--v2-navy); margin: 0 0 3px; }
  & .is-done h4 { text-decoration: line-through; text-decoration-color: var(--v2-ochre); text-decoration-thickness: 2px; }
  & .tg-move p { margin: 0 0 10px; color: var(--v2-ink-2); font-size: 15.5px; line-height: 1.5; font-variant-numeric: lining-nums; }
  & .tg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
  & .tg-acts button.v2-link { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px; cursor: pointer; font: inherit; color: var(--v2-navy); }
  & .tg-acts .v2-btn { cursor: pointer; }

  & .tg-win { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 4px; padding: 16px 18px; background: var(--v2-navy); color: #fff; position: relative; overflow: hidden; }
  & .tg-win p { margin: 0; font: 400 24px/1.2 var(--v2-display); color: #fff; }
  & .tg-win p b { color: var(--v2-ochre); font-weight: 400; }
  & .tg-gull { flex: 0 0 auto; width: 46px; height: 22px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 22'%3E%3Cpath d='M2 12 Q12 2 23 13 Q34 2 44 12' fill='none' stroke='%23dfb34e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

  & .tg-every { margin-top: 14px; border-top: 1px solid rgba(23,46,70,.16); }
  & .tg-every summary { cursor: pointer; list-style: none; padding: 14px 0 4px; font: 500 15.5px/1.3 var(--v2-text); color: var(--v2-navy); font-variant-numeric: lining-nums; }
  & .tg-every summary::-webkit-details-marker { display: none; }
  & .tg-every summary::after { content: "+"; float: right; font-size: 20px; line-height: 1; }
  & .tg-every[open] summary::after { content: "−"; }
  & .tg-every .tv-steps { margin-top: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #rt-site.rt-shell #siteWrapper.v2 {
    & .tg-result:not([hidden]) .tg-card { animation: tg-rise .5s cubic-bezier(.2,.8,.2,1) both; }
    & .tg-win.tg-pop { animation: tg-pop .6s cubic-bezier(.3,1.5,.6,1) both; }
    & .tg-win.tg-pop .tg-gull { animation: tg-fly 2.4s ease-in-out .2s both; }
    & .tg-tiles button[aria-checked="true"], & .tg-times button[aria-checked="true"] { animation: tg-press .3s ease; }
  }
}
@keyframes tg-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes tg-pop { 0% { transform: scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tg-fly { 0% { transform: translate(-60px, 10px) scale(.7); opacity: 0; } 40% { opacity: 1; } 70% { transform: translate(0, -4px) scale(1); } 100% { transform: none; } }
@keyframes tg-press { 50% { transform: scale(.96); } }
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2 {
    & .tg-tiles { grid-template-columns: 1fr 1fr; gap: 6px; }
    & .tg-tiles button { min-height: 68px; padding: 12px 12px 11px; }
    & .tg-tiles b { font-size: 15.5px; }
    & .tg-tiles span { font-size: 12.5px; }
    & .tg-times button { min-width: 0; flex: 1 1 calc(33.3% - 8px); padding: 9px 8px 8px; text-align: center; }
    & .tg-extra { flex-direction: column; align-items: stretch; }
    & .tg-count { justify-content: space-between; }
    & .tg-switch button { flex: 1; padding: 0 8px; }
    & .tg-card { padding: 20px 16px 18px; }
    & .tg-score { gap: 10px 22px; }
    & .tg-score b { font-size: 23px; }
    & .tg-acts .v2-btn { flex: 1 1 100%; justify-content: center; text-align: center; }
    & .tg-win p { font-size: 21px; }
  }
}
html body #rt-site.rt-shell #siteWrapper.v2 #tg {
  & .tg-score { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px 32px; }
  & .tg-score span { display: block; font: 500 11.5px/1.3 var(--v2-text); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-ink-2); margin: 0; }
  & .tg-score b { display: block; margin: 3px 0 0; font: 400 28px/1.05 var(--v2-display); color: var(--v2-navy); }
  & .tg-other { white-space: nowrap; }
  & .is-done p, & .is-done .tg-acts { display: none; }
  & .is-done h4 { margin-top: 9px; }
  & .tg-move.is-done { padding: 10px 0; }
  & .tg-acts .v2-btn { flex: 0 0 auto; }
}
@media (max-width: 900px) {
  html body #rt-site.rt-shell #siteWrapper.v2 #tg {
    & .tg-score { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    & .tg-score b { font-size: 25px; }
    & .tg-acts .v2-btn { flex: 0 0 auto; width: auto; min-height: 46px; padding-left: 20px; padding-right: 20px; }
  }
}
/* Driving: the road segment of the crossing strip, with a small car. */
html body #rt-site.rt-shell #siteWrapper.v2 {
  & .tv-seg--road::before { border-top: 3px solid var(--v2-navy); top: 4px; }
  & .tv-seg--road em { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M3 12V9l3-4h12l4 4h1v3z' fill='%23172e46'/%3E%3Crect x='8' y='6.2' width='4.5' height='3' fill='%23fbfaf6'/%3E%3Crect x='13.5' y='6.2' width='4' height='3' fill='%23fbfaf6'/%3E%3Ccircle cx='7.5' cy='13.5' r='2.2' fill='%23b4552d'/%3E%3Ccircle cx='18.5' cy='13.5' r='2.2' fill='%23b4552d'/%3E%3C/svg%3E"); }
}
@media (prefers-reduced-motion: no-preference) {
  html body #rt-site.rt-shell #siteWrapper.v2 .tv-go .tv-seg--road em { animation: tv-move 9s linear 3s infinite; }
  html body #rt-site.rt-shell #siteWrapper.v2 .tv-strip--car.tv-go .tv-seg--sea em { animation: tv-move 9s linear infinite, tv-bob 1.2s ease-in-out infinite; }
}