:root {
  --ink: #183d37;
  --muted: #61736c;
  --paper: #f7f8f2;
  --line: #dce3d9;
  --accent: #d8ed78;
  --white: #fff;
  --radius: 18px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -.045em;
}
h2 {
  font-size: 30px;
  font-weight: 600;
}
h3 {
  font-size: 24px;
  font-weight: 600;
}
p+p {
  margin-top: 12px;
}
.wrap {
  width: min(1160px, calc(100% - 64px));
  margin-inline: auto;
}
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.header-top {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -1.3px;
}
.brand img {
  max-height: 40px;
  max-width: 180px;
}
.brand-mark {
  background: var(--ink);
  color: var(--accent);
  width: 35px;
  height: 35px;
  border-radius: 9px;
  line-height: 35px;
  text-align: center;
  letter-spacing: 0;
}
.airport-label {
  font-size: 13px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 25px;
}
.airport-code {
  font-weight: 700;
  margin-left: 8px;
}
.languages {
  margin-left: auto;
  display: flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.languages a {
  padding: 5px 9px;
  border-radius: 5px;
}
.languages [aria-current] {
  background: var(--ink);
  color: white;
}
.main-nav {
  display: flex;
  gap: 34px;
  font-size: 14px;
  font-weight: 550;
  overflow-x: auto;
  white-space: nowrap;
}
.main-nav a {
  padding: 10px 0 16px;
  border-bottom: 3px solid transparent;
}
.main-nav [aria-current] {
  border-color: var(--ink);
}
main {
  min-height: 60vh;
}
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  padding: 65px 0 58px;
  align-items: center;
}
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  font-weight: 700;
  margin-bottom: 15px;
}
.hero h1 {
  font-size: clamp(44px, 5.4vw, 72px);
  max-width: 650px;
  font-weight: 600;
  line-height: 1.02;
}
.lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 600px;
  margin-top: 23px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  background: var(--ink);
  color: white;
  padding: 15px 23px;
  border-radius: 8px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
}
.button span {
  font-size: 21px;
  color: var(--accent);
}
.journey-art {
  background: var(--accent);
  border-radius: var(--radius);
  position: relative;
  height: 330px;
  overflow: hidden;
  padding: 28px;
}
.art-caption {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
}
.art-code {
  font-size: 100px;
  font-weight: 750;
  letter-spacing: -8px;
  position: absolute;
  left: 28px;
  bottom: 45px;
  line-height: 1;
}
.art-arrow {
  position: absolute;
  right: 26px;
  top: 64px;
  font-size: 175px;
  font-weight: 200;
  line-height: 1;
}
.art-bottom {
  position: absolute;
  bottom: 22px;
  left: 30px;
  font-size: 11px;
  max-width: 85%;
}
.journey-track {
  position: absolute;
  inset: 80px -45px -180px 35px;
  border: 1px solid #8aab43;
  border-radius: 50%;
  transform: rotate(-30deg);
}
.journey-track:after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid #8aab43;
  border-radius: 50%;
}
.section {
  margin-bottom: 52px;
}
.section>h2 {
  margin-bottom: 22px;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 23px;
}
.section-heading .eyebrow {
  margin-bottom: 8px;
}
.subtle {
  font-size: 12px;
  color: var(--muted);
}
.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.status-card {
  padding: 22px 17px;
  border-right: 1px solid var(--line);
}
.status-card:last-child {
  border: 0;
}
.status-category {
  font-size: 12px;
  font-weight: 600;
  display: block;
}
.status-value {
  font-size: 17px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.status-value i {
  width: 7px;
  height: 7px;
  background: #a6ada5;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-card[data-status=NORMAL] i {
  background: #348555;
}
.status-card[data-status=WARNING] i {
  background: #b87617;
}
.status-card[data-status=DISRUPTED] i {
  background: #b94337;
}
.status-card p,
.status-card small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 9px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.card {
  --card-pad: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  align-items: start;
}
.card h2,
.card h3 {
  margin: 17px 0 10px;
  font-size: 25px;
}
.card>p {
  font-size: 14px;
  color: var(--muted);
}
.card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 5px;
  background: #edf1e9;
}
.tag.accent {
  background: var(--accent);
}
.route-line {
  border-bottom: 1px solid var(--line);
  padding: 10px 0 18px;
  width: 100%;
  font-size: 13px;
}
.facts {
  margin: 18px 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.facts dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}
.card .text-link {
  margin: 18px 0;
}
.freshness {
  width: 100%;
  font-size: 10px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 18px;
}
.freshness > .notice {
  display: block;
}
.freshness .tz-mark {
  display: inline-block;
}
.notice {
  color: #986426;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
  font-size: 11px;
}
.badges span {
  background: #eff3e7;
  border-radius: 4px;
  padding: 4px 8px;
}
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 50px;
}
.explore-card {
  position: relative;
  border-radius: var(--radius);
  background: #e9eee3;
  padding: 30px 70px 30px 30px;
}
.explore-card:nth-child(2) {
  background: #e4ebe8;
}
.explore-card h2 {
  font-size: 26px;
}
.explore-card p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
  max-width: 380px;
}
.explore-arrow {
  position: absolute;
  right: 26px;
  top: 34px;
  font-size: 30px;
}
/* The news (docs/news-plan.md §5): category pills over the list, article cards three a row, and the article's own
   page as one readable column of the stored HTML. */
.news-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.news-card {
  overflow: hidden;
}
/* The list of articles: a plain grid with the cards aligned at the top; site.js makes it a masonry (short rows, each card spanning what it needs). */
.news-grid {
  align-items: start;
}
.news-grid-masonry {
  grid-auto-rows: 8px;
}
/* The article card wears the car park card's head (site rule 2026-10-03), on its classes: with a cover the head is 16:9 of the
   card's width (the whole picture, under the scrim), without one the plain band; the title alone stands on it. Under the head the
   category and the importance at the left, the date at the right, then the excerpt. The cards stand the same height: the title
   holds three lines over the picture and the excerpt three under it, a longer one cut with an ellipsis. */
.news-card .lot-head.has-cover {
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.news-card .lot-head h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
}
.news-card .lot-head h3 a {
  color: inherit;
  text-decoration: none;
}
/* The whole card leads to the article: a second, nameless link stretched over the card (the positioned box, .lot-card), hidden
   from assistive technology and the tab order, since the title's link is the one that is read and focused. It cannot be the
   title link's own pseudo-element: the head and the title are positioned boxes of their own and would contain it. Hovering
   anywhere underlines the title, so the card says what it does. */
.news-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.news-card:hover .lot-head h3 a,
.news-card:focus-within .lot-head h3 a {
  text-decoration: underline;
}
.news-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.news-card .card-top {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
}
.news-card>p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.5em;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
/* The byline under the article's meta line (site rule 2026-10-03, after Telex): the avatar and the name, both leading to the author's page. */
.news-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.news-byline-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sky-strong);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
}
.news-byline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-byline-name {
  display: block;
  font-weight: 700;
  color: var(--blue);
}
.news-byline-role {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
/* An author's page: the intro and the outside link above their articles. */
.author-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 760px;
  margin-bottom: 34px;
}
.author-photo {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-intro {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.65;
}
.author-articles-title {
  margin: 0 0 18px;
  font-size: 22px;
}
.author-articles-title .count {
  font-weight: 400;
  color: var(--muted);
}
.news-importance {
  background: #fff4dd;
  color: #8a5500;
}
.is-critical .news-importance {
  background: #fde9e7;
  color: #9d2f26;
}
.news-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 40px;
}
.news-page-count {
  font-size: 13px;
  color: var(--muted);
}
.news-article {
  max-width: 780px;
  margin-bottom: 48px;
}
.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--muted);
}
.news-article-meta a.tag:hover {
  text-decoration: none;
  background: var(--sky-strong);
}
.news-body {
  font-size: 17px;
  line-height: 1.65;
}
.news-body h2 {
  margin: 34px 0 10px;
  font-size: 26px;
}
.news-body h3 {
  margin: 26px 0 8px;
  font-size: 20px;
}
.news-body p,
.news-body ul,
.news-body ol {
  margin: 0 0 18px;
}
.news-body li {
  margin-bottom: 6px;
}
.news-body a {
  color: var(--blue);
  text-decoration: underline;
}
.news-body blockquote {
  margin: 0 0 18px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}
.news-body figure {
  margin: 0 0 22px;
}
.news-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.news-body figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.news-body table {
  margin: 0 0 22px;
  font-size: 15px;
}
.news-body td,
.news-body th {
  padding: 8px 10px;
}
.news-source {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.news-article-back {
  margin-top: 30px;
}
@media (max-width: 600px) {
  .news-card-photo {
    width: calc(100% + 44px);
    margin: -22px -22px 16px;
  }
  .news-body {
    font-size: 16px;
  }
}
.page-heading {
  padding: 55px 0 40px;
}
.page-heading h1 {
  font-size: clamp(37px, 5vw, 60px);
  font-weight: 600;
}
.footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding-block: 28px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 11px;
  color: var(--muted);
}
.footer .brand {
  font-size: 23px;
  color: var(--ink);
}
.footer>span {
  margin-left: auto;
  font-size: 10px;
  max-width: 230px;
}
.empty-state {
  padding: 50px 20px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.empty-state p {
  color: var(--muted);
  max-width: 470px;
  margin: 18px auto 0;
}
.empty-icon {
  display: block;
  font-size: 45px;
  margin-bottom: 20px;
}
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin-top: 20px;
}
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
td,
th {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
}
td small {
  display: block;
  font-size: 11px;
}
tr.stale {
  color: #68736c;
  background: #eff1eb;
}
.skip-link {
  position: absolute;
  left: 15px;
  top: -70px;
  padding: 10px;
  background: white;
  z-index: 10;
}
.skip-link:focus {
  top: 10px;
}
@media (max-width: 900px) {
  .hero {
    gap: 25px;
  }
  .journey-art {
    height: 300px;
  }
  .art-code {
    font-size: 80px;
  }
  .art-arrow {
    font-size: 130px;
  }
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .status-card {
    border-bottom: 1px solid var(--line);
  }
  .section-heading>.subtle {
    max-width: 180px;
  }
  .main-nav {
    gap: 24px;
  }
  .footer {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .header-top {
    padding-block: 18px;
    gap: 12px;
  }
  .brand {
    font-size: 24px;
  }
  .airport-label {
    display: none;
  }
  .main-nav {
    font-size: 12px;
    gap: 24px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 38px;
    gap: 27px;
  }
  .hero h1 {
    font-size: 49px;
  }
  .lead {
    font-size: 16px;
  }
  .journey-art {
    height: 210px;
  }
  .art-code {
    font-size: 80px;
    bottom: 40px;
  }
  .art-arrow {
    font-size: 120px;
    top: 40px;
  }
  .status-grid {
    grid-template-columns: 1fr 1fr;
  }
  .status-card {
    padding: 17px;
  }
  .section-heading {
    align-items: start;
  }
  .section-heading>.subtle {
    display: none;
  }
  .section-heading h2,
  h2 {
    font-size: 26px;
  }
  .card-grid,
  .explore-grid {
    grid-template-columns: 1fr;
  }
  .card {
    --card-pad: 22px;
    padding: var(--card-pad);
  }
  .section {
    margin-bottom: 36px;
  }
  .page-heading {
    padding-top: 35px;
  }
  .footer {
    display: block;
    margin-top: 40px;
  }
  .footer p {
    margin: 15px 0;
  }
  .footer>span {
    display: block;
  }
  .facts {
    gap: 22px;
  }
}
/* Reference mockup: compact navy navigation, photo hero and image-led directory. */
/* The colours of the site (2026-09-30), sky and green after the logo: navy words, a clear blue for what can be
   pressed, the logo's green as the second colour, and sky tints for surfaces and lines. A rule names a colour from
   here; the status colours (green, amber, red) are meanings, not part of the scheme, and stay where they are used. */
:root {
  --ink: #102d50;
  --muted: #52688b;
  --paper: #fff;
  --line: #d9e8f6;
  --line-strong: #bcd6f0;
  --accent: #e1e823;
  --blue: #1466f5;
  --blue-strong: #0d56d8;
  --green: #0a9d6a;
  --green-strong: #08806a;
  --green-deep: #066b58;
  --sky: #e9f4ff;
  --sky-soft: #f4f9ff;
  --sky-strong: #d6e9ff;
  --focus-ring: #1466f5;
  --radius: 7px;
}
/* Only what actually sits on a photo takes the white ring: the hero's own cards keep the blue one. */
.hero-context,
.topic-hero-content {
  --focus-ring: #fff;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  background: linear-gradient(#fff, #fafdff);
}
.wrap {
  width: min(1240px, calc(100% - 64px));
}
h1,
h2,
h3 {
  letter-spacing: -.035em;
}
.site-header {
  background: #fff;
  position: relative;
  z-index: 4;
}
.header-top {
  min-height: 64px;
  padding-block: 8px;
  gap: 24px;
}
.brand {
  gap: 10px;
  flex-shrink: 0;
  letter-spacing: -.6px;
  font-size: 29px;
  line-height: 1;
}
.brand-name {
  font-weight: 750;
}
.brand small {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}
.brand-mark {
  font-size: 35px;
  background: none;
  color: var(--ink);
  width: 32px;
  height: 37px;
  line-height: 33px;
  position: relative;
  transform: rotate(-15deg);
}
.brand-mark:after {
  content: '';
  position: absolute;
  width: 28px;
  height: 10px;
  left: 1px;
  bottom: -1px;
  border-top: 2px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-20deg);
}
.main-nav {
  margin-left: 0;
  gap: 23px;
  font-size: 11px;
  overflow: visible;
  align-items: center;
  font-weight: 650;
}
.main-nav a {
  padding: 15px 0;
  border: 0;
}
.main-nav [aria-current] {
  color: var(--blue);
}
.languages {
  position: relative;
  margin: 0 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  display: block;
  flex-shrink: 0;
}
.languages summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 2px;
}
.languages summary::-webkit-details-marker {
  display: none;
}
.languages summary span {
  margin-left: 6px;
}
.languages>div {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  background: white;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px;
  box-shadow: 0 5px 15px #102d5015;
}
.languages a {
  display: block;
}
.airport-label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--sky-soft);
  padding: 9px 13px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}
.airport-label>span {
  font-size: 19px;
  background: #e2e9f2;
  line-height: 1;
  border-radius: 3px;
}
.hero {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 400px;
  background: #1d344d;
  color: white;
  overflow: hidden;
}
.hero-photo,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
/* The photo keeps its own light (2026-09-30): the shade is a scrim under the words only, fading out before the middle,
   and the words carry a soft shadow of their own. */
.hero-shade {
  background: linear-gradient(90deg, rgba(8, 26, 46, .5) 0%, rgba(8, 26, 46, .3) 30%, rgba(8, 26, 46, 0) 60%);
}
/* The photo is also blurred under the words, and the mask lets the blur thin out with the shade, so there is no edge. */
.hero-shade,
.topic-hero-shade {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 64%);
}
.hero h1,
.hero-lead,
.inner-page .topic-hero h1,
.inner-page .topic-hero .lead {
  text-shadow: 0 1px 2px rgba(4, 16, 32, .45), 0 2px 20px rgba(4, 16, 32, .4);
}
/* Below the card's width the clock and weather sit on the photo itself, so they take the same shadow. */
@media (max-width: 900px) {
  .hero-context {
    text-shadow: 0 1px 2px rgba(4, 16, 32, .5), 0 1px 12px rgba(4, 16, 32, .45);
  }
}
.hero-content {
  position: relative;
  padding-top: 46px;
  padding-bottom: 32px;
  z-index: 1;
}
.hero .eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.hero h1 {
  font-size: 62px;
  line-height: 1.1;
  max-width: 900px;
  font-weight: 750;
  letter-spacing: -1.8px;
}
.hero-lead {
  font-size: 19px;
  line-height: 1.35;
  max-width: 650px;
  margin: 6px 0 18px;
  white-space: pre-line;
}
.search-box {
  width: 700px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #d6e0eb;
  box-shadow: 0 3px 12px #091e3e25;
  padding: 7px;
  border-radius: 9px;
  color: var(--ink);
}
.search-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.search-tabs button {
  font: 600 12px Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 7px;
  border: 0;
  background: #eef2f7;
  color: var(--ink);
  border-radius: 5px;
  cursor: pointer;
}
.search-tabs button>span {
  font-size: 23px;
  line-height: 1;
}
.search-tabs [aria-selected=true] {
  background: var(--blue);
  color: white;
}
[role=tabpanel] {
  padding: 15px 13px 8px;
  min-height: 90px;
}
[hidden] {
  display: none!important;
}
.flight-search {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 0;
}
.flight-search input {
  min-width: 0;
  flex: 1;
  border: 1px solid #ccd8e9;
  box-shadow: inset 0 0 0 1px #f2f5f9;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  height: 44px;
}
.flight-search input::placeholder {
  color: #687ea3;
}
.button {
  border: 0;
  background: #0b2846;
  font: 600 12px Arial, sans-serif;
  border-radius: 6px;
  padding: 12px 17px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  min-height: 35px;
  color: #fff;
}
.button.primary {
  background: var(--blue);
  min-width: 195px;
  font-size: 14px;
}
.quick-links {
  display: flex;
  gap: 22px;
  margin-top: 13px;
}
.date-field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}
.date-field input {
  width: 100%;
  font-family: inherit;
}
/* The label as placeholder: inside the field, in the flight search's placeholder colour, until the field is focused or
   holds a date. Until then the browser's own empty date (its format, e.g. "éééé. hh. nn.") is hidden. */
.date-field span {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #687ea3;
  font-size: 14px;
  pointer-events: none;
}
.date-field input:focus + span,
.date-field input:valid + span {
  display: none;
}
.date-field input:not(:focus):invalid,
.date-field input:not(:focus):invalid::-webkit-datetime-edit {
  color: transparent;
}
.quick-links a+a {
  padding-left: 22px;
  border-left: 1px solid #d1dbe9;
}
.hero-signature {
  position: absolute;
  right: 0;
  bottom: 30px;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  transform: rotate(-8deg);
  text-align: right;
}
.hero-signature span {
  display: inline-block;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 7px;
}
.home-content {
  padding-top: 16px;
}
.status-strip {
  background: linear-gradient(100deg, #fff, #f9fbff);
  border-radius: 10px;
  padding: 12px 16px 13px;
  box-shadow: 0 3px 24px #dce6f245;
  margin-bottom: 22px;
}
.strip-title {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-weight: 750;
}
.status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 152px;
  background: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
.status-card {
  padding: 0 14px;
  border-right: 1px solid #d4deeb!important;
  border-bottom: 0;
}
.status-card:first-child {
  padding-left: 0;
}
.status-card:last-child {
  border-right: 0!important;
}
.status-category {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
}
.status-category>span {
  font-size: 20px;
  line-height: 1;
}
.status-value {
  font-size: 15px;
  margin-top: 10px;
  gap: 9px;
}
.status-value i {
  width: 11px;
  height: 11px;
  background: #9aa8bb;
  box-shadow: 0 0 0 5px #e8edf3;
}
.status-card[data-status=NORMAL] .status-value {
  color: #009e44;
}
.status-card[data-status=NORMAL] i {
  box-shadow: 0 0 0 5px #caedd6;
}
.status-card p,
.status-card small {
  font-size: 10px;
  line-height: 1.3;
  margin-top: 7px;
  padding-left: 20px;
}
.status-more {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.status-more small {
  font-size: 10px;
  color: var(--muted);
}
.status-more .button {
  font-size: 11px;
  padding: 9px;
}
.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.destination-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile-photo-link {
  display: block;
  height: 124px;
  overflow: hidden;
}
.tile-photo-link img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform .2s;
}
.destination-card:hover img {
  transform: scale(1.025);
}
.tile-body {
  display: flex;
  gap: 13px;
  padding: 12px 14px 14px;
  flex: 1;
}
.tile-icon {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  min-width: 22px;
}
.tile-body>div {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
}
.tile-body h3 {
  font-size: 17px;
  letter-spacing: -.55px;
  margin: 0 0 9px;
  line-height: 1.1;
  font-weight: 750;
}
.tile-body p {
  font-size: 12px;
  line-height: 1.27;
  color: var(--muted);
  margin-bottom: 8px;
}
.tile-body .text-link {
  margin-top: auto;
}
.why-card {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #eaf7ff, #f3fbff);
  border-radius: 7px;
  padding: 22px 25px;
  min-height: 230px;
}
.why-card h3 {
  font-size: 21px;
  margin-bottom: 13px;
  font-weight: 750;
}
.why-card ul {
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 63%;
  position: relative;
  z-index: 1;
}
.why-card li {
  font-size: 12px;
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 8px;
}
.why-card li>span {
  background: #c5ebd8;
  color: #008a4f;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}
.why-plane {
  position: absolute;
  right: 28px;
  top: 3px;
  font-size: 96px;
  line-height: 1.1;
  opacity: .12;
  transform: rotate(-17deg);
}
.why-signature {
  position: absolute;
  right: 25px;
  bottom: 32px;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-style: italic;
  font-size: 23px;
  line-height: 1.45;
  transform: rotate(-8deg);
  text-align: right;
  max-width: 45%;
}
.why-signature:after {
  content: '';
  display: block;
  height: 10px;
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-7deg);
  margin-top: 6px;
}
.footer {
  background: linear-gradient(90deg, #f3f8fd, #f8fbff);
  width: 100%;
  border-top: 1px solid #eaf0f6;
  display: block;
  margin-top: 14px;
  padding: 21px 0 24px;
  color: var(--ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.05fr 1.5fr;
  gap: 35px;
  align-items: center;
}
.footer .brand {
  font-size: 25px;
}
.footer-feature {
  display: flex;
  align-items: center;
  gap: 15px;
}
.footer-feature>span {
  font-size: 29px;
  color: #7488a7;
}
.footer-feature strong {
  display: block;
  font-size: 12px;
}
.footer-feature small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.network {
  border-left: 1px solid #bfcddd;
  padding-left: 35px;
}
.inner-page main {
  padding-bottom: 35px;
}
.inner-page .page-heading h1 {
  font-size: 43px;
}
.inner-page .page-heading {
  padding-top: 45px;
}
.inner-page .card {
  box-shadow: 0 3px 15px #e3eaf433;
}
.inner-page .tag.accent {
  background: #d9e9ff;
}
.inner-page .card-grid {
  margin-bottom: 25px;
}
.inner-page .flight-search {
  max-width: 760px;
  margin-bottom: 20px;
}
.below-fold {
  margin-top: 35px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.empty-state {
  background: var(--sky-soft);
}
@media (min-width: 1400px) {
  .hero-content {
    padding-top: 55px;
    padding-bottom: 40px;
  }
  .hero {
    min-height: 435px;
  }
  .hero h1 {
    font-size: 66px;
  }
  .tile-photo-link {
    height: 135px;
  }
  .tile-body p {
    font-size: 13px;
  }
  .tile-body h3 {
    font-size: 18px;
  }
  .destination-grid {
    gap: 17px;
  }
  .status-strip {
    margin-bottom: 23px;
  }
}
@media (max-width: 1150px) {
  .header-top {
    gap: 17px;
  }
  .airport-label {
    display: none;
  }
  .main-nav {
    gap: 19px;
  }
  .hero-signature {
    font-size: 21px;
    right: 5px;
  }
  .search-box {
    width: 650px;
  }
  .hero h1 {
    font-size: 57px;
  }
  .why-signature {
    font-size: 20px;
  }
  .status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .status-more {
    display: none;
  }
  .footer-grid {
    gap: 20px;
  }
  .network {
    padding-left: 20px;
  }
  .tile-body {
    padding: 12px 10px;
    gap: 8px;
  }
}
@media (max-width: 900px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .header-top {
    flex-wrap: wrap;
    gap: 15px;
    padding-block: 10px;
  }
  .main-nav {
    order: 5;
    width: 100%;
    margin: 0;
    justify-content: flex-start;
    font-size: 12px;
  }
  .main-nav a {
    padding: 5px 0;
  }
  .hero h1 {
    font-size: 53px;
  }
  .hero-content {
    padding-top: 35px;
  }
  .hero-signature {
    display: none;
  }
  .hero-lead {
    font-size: 18px;
  }
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile-photo-link {
    height: 160px;
  }
  .why-card {
    grid-column: span 2;
    min-height: 225px;
  }
  .why-signature {
    font-size: 26px;
    right: 35px;
  }
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 0;
  }
  .status-card:nth-child(odd) {
    padding-left: 0;
  }
  .status-card:nth-child(even) {
    border-right: 0!important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 25px;
  }
  .network {
    border: 0;
    padding-left: 0;
  }
  .tile-body p {
    font-size: 13px;
  }
  .tile-body h3 {
    font-size: 19px;
  }
  .tile-body {
    padding: 15px;
  }
  .why-card li {
    font-size: 13px;
  }
}
@media (max-width: 600px) {
  .wrap {
    width: calc(100% - 30px);
  }
  .header-top {
    gap: 13px;
  }
  .brand {
    font-size: 27px;
  }
  .main-nav {
    overflow-x: auto;
    justify-content: start;
    gap: 23px;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .hero-content {
    padding-top: 29px;
    padding-bottom: 25px;
  }
  .hero h1 {
    font-size: 42px;
    letter-spacing: -1.2px;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
    max-width: 300px;
  }
  .hero-lead {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 18px;
  }
  .hero-photo {
    object-position: 63% center;
  }
  .hero-shade {
    background: linear-gradient(180deg, rgba(8, 26, 46, .55) 0%, rgba(8, 26, 46, .36) 45%, rgba(8, 26, 46, .12) 100%);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, .35) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, .35) 100%);
  }
  .search-box {
    padding: 5px;
  }
  .search-tabs {
    gap: 4px;
  }
  .search-tabs button {
    font-size: 10px;
    gap: 10px;
    padding: 9px 4px;
    line-height: 1.3;
  }
  .search-tabs button>span {
    font-size: 20px;
  }
  [role=tabpanel] {
    padding: 12px 7px 8px;
  }
  .flight-search {
    gap: 8px;
    flex-wrap: wrap;
  }
  .flight-search input {
    flex-basis: 100%;
    width: 100%;
    font-size: 13px;
  }
  .flight-search .button {
    width: 100%;
    min-height: 44px;
  }
  .quick-links {
    gap: 13px;
    justify-content: center;
  }
  .quick-links a+a {
    padding-left: 13px;
  }
  .home-content {
    padding-top: 12px;
  }
  .status-strip {
    padding: 13px;
    margin-bottom: 15px;
  }
  .status-grid {
    grid-template-columns: 1fr 1fr;
    gap: 17px 0;
  }
  .status-card {
    padding: 0 12px;
  }
  .status-category {
    font-size: 11px;
    gap: 7px;
  }
  .status-card p {
    font-size: 10px;
  }
  .status-value {
    font-size: 14px;
  }
  .destination-grid {
    gap: 12px;
  }
  .tile-photo-link {
    height: 105px;
  }
  .tile-body {
    padding: 11px 10px;
    gap: 7px;
  }
  .tile-icon {
    font-size: 19px;
    min-width: 17px;
  }
  .tile-body h3 {
    font-size: 15px;
    letter-spacing: -.3px;
  }
  .tile-body p {
    font-size: 11px;
    line-height: 1.3;
  }
  .why-card {
    padding: 20px;
    min-height: 280px;
  }
  .why-card ul {
    max-width: 100%;
  }
  .why-card h3 {
    font-size: 22px;
  }
  .why-card li {
    font-size: 12px;
  }
  .why-signature {
    font-size: 19px;
    max-width: 80%;
    right: 23px;
    bottom: 18px;
  }
  .why-plane {
    font-size: 74px;
    right: 15px;
    top: 2px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-feature {
    font-size: 12px;
  }
  .footer .brand {
    font-size: 26px;
  }
  .inner-page .page-heading h1 {
    font-size: 34px;
  }
  .inner-page .card-grid {
    grid-template-columns: 1fr;
  }
  .inner-page .flight-search {
    margin-top: 20px;
  }
  .inner-page .flight-search .button {
    width: auto;
  }
  .section-heading h2 {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important;
  }
}
.brand-mark {
  transform: rotate(-12deg);
}
.brand-light {
  font-weight: 400;
}

.brand img.navbar-logo {
  width: 185px;
  height: auto;
  max-width: 185px;
  max-height: 52px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .brand img.navbar-logo {
    width: 165px;
    max-width: 165px;
    max-height: 47px;
  }
}

/* Keep compact interface copy readable at normal viewing distance. */
.main-nav {
  font-size: 13px;
}
.brand small,
.languages {
  font-size: 13px;
}
.hero .eyebrow {
  font-size: 12px;
}
.search-tabs button,
.button {
  font-size: 13px;
}
.strip-title,
.tag,
.facts dt,
.freshness {
  font-size: 11px;
}
.status-category,
.status-card p,
.status-card small {
  font-size: 12px;
}
.status-more small {
  font-size: 11px;
}
.tile-body p,
.why-card li {
  font-size: 13px;
}
.footer-feature strong {
  font-size: 13px;
}
.footer-feature small,
td small,
th {
  font-size: 12px;
}
.subtle,
.route-line {
  font-size: 13px;
}

@media (max-width: 600px) {
  .main-nav {
    font-size: 13px;
  }
  .hero .eyebrow {
    font-size: 11px;
  }
  .search-tabs button {
    font-size: 12px;
  }
  .status-category,
  .status-card p,
  .status-card small {
    font-size: 12px;
  }
  .tile-body h3 {
    font-size: 17px;
  }
  .tile-body p {
    font-size: 12px;
  }
  .why-card li {
    font-size: 13px;
  }
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  flex-shrink: 0;
}
.languages summary {
  display: flex;
  align-items: center;
  gap: 3px;
}
.languages summary .material-symbols-outlined {
  font-size: 18px;
  margin: 0;
}
.search-tabs button>.material-symbols-outlined {
  font-size: 23px;
}
.tile-icon.material-symbols-outlined {
  font-size: 27px;
}
.button .material-symbols-outlined {
  font-size: 17px;
  vertical-align: middle;
}
.inline-icon {
  font-size: 18px;
  vertical-align: middle;
}
.why-card li>.material-symbols-outlined {
  font-size: 17px;
}
/* A transport card wears the car park card's head (.lot-card, .lot-head: the etalon). The live state is the head's
   top-right pill, the availability badge's own (.lot-availability) in the same three colours; without a current
   reading it is grey and still. What the reading says in figures (a delay, cancelled runs) is a line under the head. */
.lot-availability.transport-live[data-state="UNKNOWN"] {
  background: #eef1f5;
  color: var(--muted);
}
.lot-card .lot-head-tags .lot-availability.transport-live[data-state="UNKNOWN"]::after {
  animation: none;
}
.lot-card .lot-head-tags .transport-night {
  background: #fff;
  color: var(--ink);
}
.transport-live time {
  font-weight: 500;
  color: inherit;
}
.transport-live-detail {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #8a5500;
}
.transport-live-detail[data-state="DISRUPTED"] {
  color: #9d2f26;
}
.transport-live-detail span+span::before {
  content: " · ";
}

/* A connection's planned departures: per direction the next runs as pills, then the day by hour behind a disclosure. */
.timetable {
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 14px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.timetable-direction h4 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.timetable-direction>.subtle {
  margin: 2px 0 8px;
}
.timetable-next {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.timetable-next li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sky-soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timetable-next li:first-child {
  border-color: var(--line-strong);
  background: var(--sky-strong);
}
.timetable summary {
  width: fit-content;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.timetable-day {
  margin-top: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.timetable-day caption {
  padding-bottom: 4px;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}
.timetable-day th,
.timetable-day td {
  padding: 4px 0;
  border-bottom: 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.timetable-day th {
  width: 2.4em;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
}
.timetable-day td {
  color: var(--muted);
  word-spacing: 5px;
}
.timetable-note {
  margin: 0;
}

/* Fresh status dots carry a quiet, colored pulse. Unknown status uses a static
   disconnected signal so gray never looks like a live condition. */
.status-card[data-status="NORMAL"],
.status-detail[data-status="NORMAL"],
.aside-status[data-status="NORMAL"] {
  --status-dot: #00a44f;
}
.status-card[data-status="WARNING"],
.status-detail[data-status="WARNING"],
.aside-status[data-status="WARNING"] {
  --status-dot: #c17c12;
}
.status-card[data-status="DISRUPTED"],
.status-detail[data-status="DISRUPTED"],
.aside-status[data-status="DISRUPTED"] {
  --status-dot: #c33e35;
}
/* A cheapest-day lead (no availability coverage) is reference data, not a live condition: a steady blue dot, no pulse. */
.status-card[data-status="PRICES"],
.status-detail[data-status="PRICES"] {
  --status-dot: #2f6fb5;
}
.status-card[data-status="PRICES"] .status-indicator::after,
.status-detail[data-status="PRICES"] .status-indicator::after {
  animation: none;
}
.status-card:not([data-status="UNKNOWN"]) .status-indicator,
.status-detail:not([data-status="UNKNOWN"]) .status-indicator,
.aside-status:not([data-status="UNKNOWN"]) .status-indicator {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--status-dot);
  box-shadow: none;
}
.status-indicator::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--status-dot);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  animation: status-pulse 2s cubic-bezier(.2, .65, .35, 1) infinite;
}
.status-unavailable-icon.material-symbols-outlined {
  font-size: 20px;
  color: #91a1b6;
}
@keyframes status-pulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: .42;
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(3.1);
  }
}

/* The card body opens its detail page. */
.status-card-main {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding-right: 23px;
  color: inherit;
  text-align: left;
}
.status-card-link:hover {
  text-decoration: none;
}
.status-card-link:focus-visible {
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .status-indicator::after {
    display: none;
  }
}

/* Keep every live-status cell on the same compact rhythm. Explanatory copy lives in the
   info panel, except a short .status-note under the label (the traffic and public-transport
   headline, the parking count of full car parks); a row of cards stretches to its tallest cell. */
.status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.status-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 104px;
}
.status-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.status-category {
  min-width: 0;
}
/* The label names the condition ("Few spaces available"), so it may need two lines on a narrow card; the dot stays on the first. */
.status-value {
  align-items: flex-start;
  line-height: 1.3;
}
/* The dot sits at the middle of the label's first line, whatever the label's size (a home card, a page's status box):
   half of what a line is taller than the dot. The fixed offset is for a browser without the lh unit. */
.status-value .status-indicator {
  margin-top: 4px;
  margin-top: calc((1lh - 11px) / 2);
}
/* Aligned with the label text, past the status dot. */
.status-note {
  display: block;
  margin: 4px 0 0 20px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}
/* The link is a sibling of the card's own link, so the card must not stretch the gap between them:
   the note sits under the label, exactly where parking's count of full car parks sits. */
.status-card:has(.status-note-link) .status-card-main {
  flex: 0 0 auto;
}
/* A note that leads somewhere is a .text-link; this is only where it sits: under the label, past the status dot, no wider than its words. */
.status-note-link {
  width: max-content;
  max-width: 100%;
  margin: 4px 0 0 20px;
}
@media (max-width: 900px) {
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .status-card {
    min-height: 104px;
  }
}
@media (max-width: 600px) {
  .status-grid {
    grid-template-columns: 1fr 1fr;
  }
  .status-card {
    min-height: 100px;
  }
}

/* The home search form: the field across two columns, the button in the third. */
@media (min-width: 601px) {
  .search-box [role=tabpanel] {
    padding-left: 0;
    padding-right: 0;
  }
  .search-box .flight-search {
    display: grid;
    grid-template-columns: 1fr 1fr 1.07fr;
    gap: 6px;
  }
  .search-box .flight-search input[type=search] {
    grid-column: span 2;
    width: 100%;
  }
  .search-box .flight-search .button {
    min-width: 0;
  }
  .search-box .quick-links {
    padding: 0 15px;
  }
}

/* The home status section since 2026-09-30: a heading and a lead, then one card per category. The label takes its
   state's colour, and each card's evidence is always in view at its bottom left (the time, the credit under it). */
.status-strip {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 10px 0 30px;
}
.status-heading {
  margin-bottom: 16px;
}
.status-heading h2 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.4px;
}
.status-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.status-grid {
  gap: 16px;
}
.status-grid .status-card:nth-child(n) {
  min-height: 150px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line)!important;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px #102d500d;
  transition: box-shadow .15s, border-color .15s;
}
.status-grid .status-card:has(.status-card-link):hover {
  background: #fff;
  border-color: #c9d6e6!important;
  box-shadow: 0 6px 22px #102d501a;
}
.status-card-main {
  padding-right: 0;
}
.status-category {
  font-size: 13px;
}
.status-value {
  font-size: 17px;
  margin-top: 14px;
}
.status-card[data-status=WARNING] .status-value {
  color: #a96200;
}
.status-card[data-status=DISRUPTED] .status-value {
  color: #b5362d;
}
.status-card[data-status=PRICES] .status-value {
  color: #255c9a;
}
.status-card .status-evidence {
  flex-direction: column-reverse;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 0;
  font-size: 11px;
  line-height: 1.4;
}
.status-card .status-evidence .evidence-source {
  flex: 0 1 auto;
  max-width: 100%;
}
.status-card .status-evidence .evidence-times {
  margin-left: 0;
  justify-content: flex-start;
}
.status-card .status-evidence .evidence-time {
  padding: 0;
  background: none;
}
/* The next departures under the cards: the section heading with the link to the whole board at its right. */
.home-flights {
  margin-bottom: 30px;
}
.home-flights-heading,
.home-articles-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.home-flights-heading h2,
.home-articles-heading h2 {
  margin-bottom: 0;
}
/* The latest two articles under the departures, side by side on the list's own cards. */
.home-articles {
  margin-bottom: 34px;
}
.home-articles-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .home-articles-grid {
    grid-template-columns: 1fr;
  }
}
.home-flights .flight-board-head {
  border-radius: 9px 9px 0 0;
}
.home-flights .flight-evidence {
  margin-top: 0;
  border-top: 0;
}
/* The home tiles, three a row: the picture on top, the icon beside the title, the link under a rule at the card's foot. */
.destination-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}
.destination-grid .destination-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .06);
}
.destination-grid .tile-photo-link {
  height: auto;
  aspect-ratio: 15 / 8;
}
.destination-grid .tile-body {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 18px 20px 16px;
}
.destination-grid .tile-body h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  font-size: 18px;
  letter-spacing: -.3px;
}
.destination-grid .tile-icon.material-symbols-outlined {
  min-width: 0;
  font-size: 22px;
  color: var(--green);
}
.destination-grid .tile-body p {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.destination-grid .tile-body .text-link {
  align-self: stretch;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.destination-grid .home-guides-heading {
  grid-column: 1 / -1;
  margin: 0 0 -6px;
}
/* Two full rows of tiles leave no cell over, so the why card takes a row of its own and lays its points side by side. */
.destination-grid .why-card {
  grid-column: 1 / -1;
  min-height: 0;
  border-radius: 12px;
}
.destination-grid .why-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  max-width: 100%;
}
.destination-grid .why-card li {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
/* A phone shows one card a row, the status cards and the tiles alike: two columns leave no room for a label or a time. */
@media (max-width: 600px) {
  .status-grid,
  .destination-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .status-grid {
    gap: 10px;
  }
  .status-grid .status-card:nth-child(n) {
    min-height: 0;
    padding: 14px 14px 12px;
  }
  .status-heading h2 {
    font-size: 20px;
  }
  .status-heading p {
    font-size: 13px;
  }
  .destination-grid {
    gap: 14px;
  }
  .destination-grid .why-card ul {
    flex-direction: column;
  }
}

.status-detail {
  --card-pad: 28px;
  max-width: 820px;
  margin-bottom: 45px;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 15px #e3eaf433;
}
.status-detail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
}
.status-detail-heading .material-symbols-outlined {
  font-size: 25px;
}
.status-detail-state {
  margin-top: 18px;
  font-size: 24px;
}
.status-detail-headline {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}
.status-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 0;
}
.status-detail-facts div {
  padding: 14px;
  border-radius: 7px;
  background: var(--sky-soft);
}
.status-detail-facts dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.status-detail-facts dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
}
.status-detail-evidence {
  margin-top: 24px;
}
/* A status box stretched to its neighbour's height in an overview keeps its evidence at the foot, as the forecast panel does. */
.parking-overview .status-detail,
.traffic-overview .status-detail,
.weather-overview .status-detail {
  display: flex;
  flex-direction: column;
}
.parking-overview .status-detail-evidence,
.traffic-overview .status-detail-evidence,
.weather-overview .status-detail-evidence {
  margin-top: auto;
}
.parking-overview .status-detail > :nth-last-child(2),
.traffic-overview .status-detail > :nth-last-child(2),
.weather-overview .status-detail > :nth-last-child(2) {
  margin-bottom: 24px;
}
.status-detail-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 600px) {
  .status-detail {
    --card-pad: 21px;
  }
  .status-detail-facts {
    grid-template-columns: 1fr 1fr;
  }
}

.price-panel {
  --card-pad: 28px;
  max-width: 820px;
  margin-bottom: 45px;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
/* The baggage page: one card per airline, its name at the left and a column per kind of bag. */
.baggage-carrier {
  --card-pad: 28px;
  --card-pad-bottom: 22px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 28px;
  margin-bottom: 22px;
  padding: 26px var(--card-pad) var(--card-pad-bottom);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .06);
}
.baggage-carrier-head h2 {
  font-size: 26px;
  line-height: 1.15;
}
.baggage-bags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.baggage-bag {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
  border-radius: 10px;
  background: var(--sky-soft);
}
.baggage-bag h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.baggage-bag h3 .material-symbols-outlined {
  color: var(--green);
  font-size: 24px;
}
.baggage-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.baggage-line + .baggage-line,
.baggage-line + .baggage-excluded {
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}
.baggage-fares {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.baggage-fares li {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sky-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.baggage-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
}
.baggage-facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.baggage-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.baggage-note,
.baggage-excluded {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.baggage-carrier > .baggage-stale,
.baggage-carrier > .card-evidence {
  grid-column: 1 / -1;
}
.baggage-carrier > .baggage-stale {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .baggage-carrier {
    --card-pad: 20px;
    --card-pad-bottom: 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 0;
    padding: 20px;
  }
  .baggage-carrier-head h2 {
    font-size: 22px;
  }
  .baggage-carrier > .baggage-stale {
    margin-top: 0;
  }
  .baggage-carrier > .card-evidence {
    margin-top: 4px;
  }
}
.price-panel h2 {
  font-size: 22px;
}
.price-scope {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.price-table {
  margin-top: 14px;
}
.price-table th[scope=row] {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
  white-space: nowrap;
}
.price-table td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-table tbody tr:last-child td,
.price-table tbody tr:last-child th {
  border-bottom: 0;
}
@media (max-width: 600px) {
  .price-panel {
    --card-pad: 21px;
  }
}

/* A link's underline is painted across its whole inline content, and a descendant cannot
   cancel it -- so a button that carries a trailing icon underlines its label instead of itself.
   An icon-only link (the brand) simply loses the underline. A .text-link needs none of this:
   its icon is an atomic box the underline never reaches. */
.button:hover,
.brand:hover {
  text-decoration: none;
}
.button:hover .link-label {
  text-decoration: underline;
}
/* .button span is the icon's rule; the label span must not inherit the icon's size and colour. */
.button .link-label {
  font-size: inherit;
  color: inherit;
}

/* Language selector: same chip treatment as the airport label beside it. */
.languages summary {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--sky-soft);
  padding: 8px 11px;
  color: var(--ink);
  font-weight: 600;
}
.languages summary:hover {
  background: var(--sky);
}
.languages[open] summary {
  background: var(--sky);
  border-color: var(--line-strong);
}
.languages>div {
  top: calc(100% + 6px);
}

/* Airport essentials remain secondary to the journey search. */
.hero-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 0 0 22px;
}
.hero-context-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  min-width: 0;
}
.hero-context-item>.material-symbols-outlined {
  font-size: 23px;
  color: #d5e5f3;
}
.hero-context-label {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: #d5e5f3;
  margin-bottom: 4px;
}
.hero-context time,
.hero-context-value {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.hero-weather {
  border-left: 1px solid #ffffff30;
  padding-left: 24px;
}
.hero-weather-condition {
  font-size: 14px;
  font-weight: 400;
}
.hero-context-item>.hero-context-arrow {
  font-size: 17px;
  margin-left: auto;
  transition: transform .2s;
}
.hero-context,
.hero-context:hover {
  text-decoration: none;
}
.hero-context:hover .hero-context-arrow {
  transform: translateX(3px);
}
@media (min-width: 901px) {
  .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(210px, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    align-items: start;
  }
  .hero-content>h1,
  .hero-content>.hero-lead {
    grid-column: 1;
  }
  .hero-content>.hero-lead {
    margin-top: 12px;
    margin-bottom: 26px;
  }
  .hero-content>.search-box {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    width: 100%;
    height: max-content;
  }
  .hero-context {
    grid-column: 2;
    grid-row: 1/4;
    align-self: start;
    justify-self: end;
    width: 100%;
    max-width: 280px;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin: 0;
    padding: 22px 24px;
    border: 1px solid #ffffff26;
    border-radius: 16px;
    background: linear-gradient(135deg, #15334d80, #15334d40);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px #06172815;
  }
  .hero-weather {
    border-left: 0;
    border-top: 1px solid #ffffff26;
    padding: 18px 0 0;
    width: 100%;
  }
  .hero-context time {
    font-size: 36px;
    letter-spacing: -1px;
    font-weight: 500;
  }
  .hero-context-value {
    font-size: 20px;
  }
  .hero-weather-condition {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #e0e9f2;
  }
}
/* The desktop card (2026-09-30): at the top of the hero's right side, level with the title, always its own height. The label on a line of its own at the card's
   left edge, then the icon, the figure at one size for the clock and the temperature, the condition beside it on the
   baseline, the arrow at the right. */
@media (min-width: 901px) {
  .hero-context {
    grid-row: 1 / 4;
    align-self: start;
    justify-content: center;
    max-width: 290px;
    gap: 12px;
    padding: 14px 20px;
  }
  .hero-context-item {
    align-items: flex-end;
    gap: 14px;
  }
  .hero-context-item>.material-symbols-outlined {
    flex: 0 0 24px;
    font-size: 24px;
    margin-bottom: 6px;
  }
  .hero-context-item>div {
    min-width: 0;
  }
  .hero-context-label {
    margin: 0 0 8px -38px;
    font-size: 12px;
  }
  .hero-context time,
  .hero-context-value {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.15;
  }
  .hero-context-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
  }
  .hero-weather {
    padding-top: 12px;
  }
  .hero-weather-condition {
    margin-top: 0;
    font-size: 13px;
    letter-spacing: 0;
  }
  .hero-context-item>.hero-context-arrow {
    flex-basis: auto;
    font-size: 19px;
    margin-bottom: 8px;
    color: #fff;
  }
}
@media (max-width: 600px) {
  .hero-context {
    gap: 14px 18px;
    margin-bottom: 18px;
  }
  .hero-weather {
    padding-left: 18px;
  }
  .hero-context time,
  .hero-context-value {
    font-size: 15px;
  }
  .hero-weather-condition {
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .hero-context {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-weather {
    border-left: 0;
    padding-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-context-arrow {
    transition: none!important;
  }
}

/* Shared footer: navigation above the airport and source information. */
.footer {
  margin-top: 40px;
  padding: 48px 0 0;
  background: var(--sky);
  border-top: 1px solid var(--line);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 38px;
}
.footer-intro p {
  max-width: 310px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
.footer-column {
  padding-top: 10px;
  min-width: 0;
}
.footer-column h2 {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .65px;
  text-transform: uppercase;
  font-weight: 750;
}
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.footer-column a {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.footer-column a:hover {
  color: var(--blue);
}
.footer-details {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 32px;
  padding: 25px 0;
  border-top: 1px solid #dce6f0;
  border-bottom: 1px solid #dce6f0;
}
.footer-details .footer-feature {
  align-items: flex-start;
  gap: 12px;
}
.footer-details .footer-feature>span {
  font-size: 25px;
  color: #6b87a3;
}
.footer-details .footer-feature small {
  line-height: 1.65;
  max-width: 330px;
}
/* The line that sets the site apart from the airport, between the features and the copyright row: the wrap's own paragraph,
   with no class to its name, since ad and cookie-banner blockers hide elements by class and this line vanished under one (2026-10-03). */
.footer > .wrap > p {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 11px;
  color: var(--muted);
}
.footer-version {
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #8292a1;
}
@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .footer-intro {
    grid-column: 1/-1;
  }
  .footer-intro p {
    max-width: 480px;
  }
  .footer-details {
    gap: 22px;
  }
}
@media (max-width: 600px) {
  .footer {
    padding-top: 30px;
    margin-top: 28px;
  }
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 20px;
    padding-bottom: 28px;
  }
  .footer-column {
    padding-top: 0;
  }
  .footer-column h2 {
    margin-bottom: 12px;
  }
  .footer-details {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 0;
  }
  .footer-bottom {
    flex-wrap: wrap;
  }
}

/* Topic pages use a compact, image-led version of the homepage hero. */
.inner-page .topic-hero {
  position: relative;
  width: 100%;
  min-height: 230px;
  margin: 0 0 38px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #102d50;
  color: #fff;
  isolation: isolate;
}
.topic-hero-photo,
.topic-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.topic-hero-photo {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}
.topic-hero-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 24, 45, .52) 0%, rgba(6, 24, 45, .32) 32%, rgba(6, 24, 45, 0) 66%);
}
.topic-hero-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 44px;
  padding-bottom: 38px;
}
.topic-hero-text {
  flex: 1;
  min-width: 0;
}
.inner-page .topic-hero h1 {
  font-size: clamp(38px, 4.2vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  text-wrap: balance;
}
.inner-page .topic-hero .lead {
  max-width: none;
  margin-top: 12px;
  color: #eef5fc;
  font-size: 16px;
  line-height: 1.5;
}
/* The clock-and-weather widget is the home hero's own (components/airport_now.html.twig): the frosted card beside
   the title and lead on a wide screen, always its own height and at the top of the heading however many lines they run to (the home hero's too), the compact row above
   the title on a narrow one. */
.topic-hero-context {
  margin: 0;
}
@media (min-width: 901px) {
  /* The content fills the heading's whole height, so the card's top is the same distance from the heading's top on a
     page with a short title as on one with a long title. */
  .topic-hero-content {
    align-self: stretch;
    align-items: stretch;
  }
  .topic-hero-text {
    align-self: flex-end;
  }
  .topic-hero-context {
    flex: 0 0 290px;
    align-self: flex-start;
  }
}
@media (max-width: 900px) {
  .topic-hero-content {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }
}
.topic-hero[data-topic="getting_there"] .topic-hero-photo {
  object-position: center 62%;
}
.topic-hero[data-topic="parking"] .topic-hero-photo {
  object-position: center 52%;
}
.topic-hero[data-topic="departures"] .topic-hero-photo,
.topic-hero[data-topic="arrivals"] .topic-hero-photo {
  object-position: center 48%;
}
.topic-hero[data-topic="hotels"] .topic-hero-photo {
  object-position: center 55%;
}
.topic-hero[data-topic="updates"] .topic-hero-photo {
  object-position: center 53%;
}
.topic-hero[data-topic="weather"] .topic-hero-photo {
  object-position: center 48%;
}
.topic-hero[data-topic="traffic"] .topic-hero-photo {
  object-position: center 58%;
}
@media (max-width: 600px) {
  .inner-page .topic-hero {
    min-height: 190px;
    margin-bottom: 28px;
  }
  .topic-hero-content {
    padding-top: 32px;
    padding-bottom: 29px;
  }
  .inner-page .topic-hero h1 {
    font-size: 35px;
    letter-spacing: -1px;
  }
  .inner-page .topic-hero .lead {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
  }
  .topic-hero-shade {
    /* The words and the clock row cover the whole photo here, so the shade is even and the blur light. */
    background: linear-gradient(0deg, rgba(6, 24, 45, .6), rgba(6, 24, 45, .4));
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* The language remains directly accessible while the primary navigation collapses. */
.mobile-navigation {
  display: none;
}
@media (max-width: 900px) {
  .header-top {
    flex-wrap: nowrap;
  }
  .main-nav {
    display: none;
  }
  .mobile-navigation {
    position: relative;
    display: block;
    flex-shrink: 0;
  }
  .mobile-navigation summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--sky-soft);
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    list-style: none;
    cursor: pointer;
  }
  .mobile-navigation summary::-webkit-details-marker {
    display: none;
  }
  .mobile-navigation summary:hover,
  .mobile-navigation[open] summary {
    background: var(--sky);
    border-color: var(--line-strong);
  }
  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: '';
    transition: transform .15s, opacity .15s;
  }
  .mobile-menu-icon {
    position: relative;
  }
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    position: absolute;
    left: 0;
  }
  .mobile-menu-icon::before {
    top: -5px;
  }
  .mobile-menu-icon::after {
    top: 5px;
  }
  .mobile-navigation[open] .mobile-menu-icon {
    background: transparent;
  }
  .mobile-navigation[open] .mobile-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
  }
  .mobile-navigation[open] .mobile-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .mobile-navigation-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    width: min(280px, calc(100vw - 40px));
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px #102d5026;
  }
  .mobile-navigation-panel a {
    padding: 11px 13px;
    border-radius: 5px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
  }
  .mobile-navigation-panel a:hover {
    background: #f1f5fa;
    text-decoration: none;
  }
  .mobile-navigation-panel [aria-current="page"] {
    background: #e7f0ff;
    color: var(--blue);
  }
}
@media (max-width: 600px) {
  .header-top {
    gap: 10px;
  }
  .mobile-navigation summary {
    width: 40px;
    justify-content: center;
    padding-inline: 9px;
  }
  .mobile-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .mobile-navigation-panel {
    width: min(280px, calc(100vw - 30px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    transition: none;
  }
}

/* Flights: one compact, airport-local board with server-rendered filters and pages. */
.flights-page { background: var(--sky-soft); }
.flights-content { padding: 35px 0 0; }
.flight-board-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 24px; }
.flight-panel { background: #fff; border: 1px solid #dce5f0; border-radius: 9px; box-shadow: 0 3px 16px #163b6414; }
.flight-controls { padding: 18px 20px; }
.flight-board-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.flight-direction-tabs { display: inline-flex; padding: 3px; background: #f6f9fd; border: 1px solid var(--line); border-radius: 7px; }
.flight-direction-tabs a { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 9px 25px; border-radius: 5px; font-size: 16px; font-weight: 650; white-space: nowrap; }
.flight-direction-tabs a:hover { background: #eaf1fc; text-decoration: none; }
.flight-direction-tabs a[aria-current] { background: var(--blue); color: #fff; box-shadow: 0 1px 3px #102d5033; }
.flight-board-date { text-align: right; }
.flight-board-date strong { font-size: 14px; }
.flight-board-date small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.flight-filters { display: grid; grid-template-columns: minmax(200px, 1.65fr) minmax(140px, 1fr) minmax(160px, 1fr) auto; align-items: end; gap: 16px; }
.flight-filters input[type="search"], .flight-filters select { width: 100%; min-width: 0; height: 43px; padding: 10px 13px; border: 1px solid #ccd8e8; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
.flight-filters select { appearance: none; padding-right: 33px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2352688b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; text-overflow: ellipsis; }
.flight-filters input::placeholder { color: #63799b; opacity: 1; }
.flight-select-field { min-width: 0; }
.flight-select-field > span { display: block; margin-bottom: 5px; font-size: 11px; color: var(--muted); }
.flight-search-field { position: relative; }
.flight-search-field > .material-symbols-outlined { position: absolute; top: 11px; left: 13px; color: #63799b; font-size: 21px; pointer-events: none; }
.flight-search-field input[type="search"] { padding-left: 42px; }
.flight-filters .button.primary { min-width: 120px; height: 43px; min-height: 43px; padding: 10px 27px; border-radius: 6px; font-size: 13px; box-shadow: 0 2px 4px #005bff19; }
.flight-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; }
.flight-shortcuts nav { display: flex; gap: 8px; flex-wrap: wrap; }
/* One pill for every small action on the board: the view chips, "Back to now" and the empty state's next steps. */
.flight-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 11px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--sky); color: var(--blue-strong); font-size: 12px; font-weight: 600; line-height: 1.3; }
.flight-pill:hover { border-color: #86b1ff; background: #e4eeff; text-decoration: none; }
/* The chosen pill is filled, so it cannot be mistaken for the others (2026-09-30). */
.flight-pill[aria-current], .flight-pill[aria-current]:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.flight-pill > .material-symbols-outlined { font-size: 17px; }
.flight-clear { color: var(--blue-strong); font-size: 12px; font-weight: 600; }
.flight-day-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.flight-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-block: 1px solid var(--line); background: linear-gradient(90deg, #fbfdff, #fff); scroll-margin-top: 20px; }
.flight-results-bar > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 18px; }
.flight-results-bar strong { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.flight-results-bar .flight-pill { white-space: nowrap; }
.flight-board [role="row"] { display: grid; grid-template-columns: 120px minmax(170px, 1.4fr) 118px minmax(150px, 1.1fr) 150px minmax(130px, 1fr) 42px; align-items: center; }
.flight-board-head { position: sticky; top: 0; z-index: 2; background: var(--sky-soft); border-bottom: 1px solid var(--line); }
.flight-board-head [role="columnheader"] { padding: 11px 16px; color: #3c5478; font-size: 12px; font-weight: 700; }
.flight-board-head [role="columnheader"]:first-child, .flight-row > [role="cell"]:first-child { padding-left: 20px; }
.flight-row { min-height: 58px; border-bottom: 1px solid #e8edf4; font-size: 13px; }
.flight-row > [role="cell"] { min-width: 0; padding: 9px 16px; }
.flight-row small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.flight-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.flight-time strong { font-size: 16px; line-height: 1.25; }
.flight-scheduled { margin-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.flight-place strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.flight-place small { display: inline-block; min-width: 2.7em; margin-right: 6px; font-size: 11px; letter-spacing: .3px; }
.flight-number-pill { display: inline-block; padding: 4px 10px; border-radius: 6px; background: #e6eeff; color: #0b3aa8; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flight-row.stale .flight-number-pill, .flight-row.is-finished .flight-number-pill { background: #e9eef5; color: inherit; }
.flight-carrier { margin-right: .35em; }
.flight-airline { display: flex; align-items: center; gap: 9px; min-width: 0; }
.flight-airline-name { min-width: 0; overflow-wrap: anywhere; }
.airline-badge { flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 50%; background: var(--sky); color: #2b4a75; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.flight-gate-pill { display: inline-block; padding: 4px 10px; border-radius: 7px; background: var(--sky-strong); color: #12305a; font-size: 13px; font-weight: 650; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flight-row.stale .flight-gate-pill, .flight-row.is-finished .flight-gate-pill { background: #e9eef5; color: inherit; }
.flight-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; background: #eff3f8; color: #425b80; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.flight-status[data-status="BOARDING"] { background: #e8f1ff; color: #0055d9; }
.flight-status[data-status="DELAYED"], .flight-status[data-status="DIVERTED"] { background: #fff0d5; color: #955300; }
.flight-status[data-status="BOARDING"]::before, .flight-status[data-status="DELAYED"]::before { content: ""; height: 6px; width: 6px; border-radius: 50%; background: currentColor; }
/* The dot pulses like a status card's: boarding and a delay are live readings. The ring is drawn over the dot, at the pill's own left padding. */
.flight-status[data-status="BOARDING"], .flight-status[data-status="DELAYED"] { position: relative; }
.flight-status[data-status="BOARDING"]::after, .flight-status[data-status="DELAYED"]::after { content: ""; position: absolute; left: var(--flight-status-pad, 9px); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; animation: status-pulse 2s cubic-bezier(.2, .65, .35, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .flight-status::after { animation: none; } }
.flight-status[data-status="CANCELLED"] { background: #fff0ef; color: #b42318; }
.flight-state small { margin-top: 4px; font-size: 10px; }
.flight-state .flight-delay { color: #955300; }
.flight-row.is-delayed { background: #fffbf3; }
.flight-row.is-finished { color: #586b84; }
.flight-row.is-cancelled { background: #fff7f6; }
.flight-row.is-cancelled .flight-status { background: #ffe2df; }
.flight-row.stale { background: #f7f9fc; color: #63738a; }
/* The whole row is the link to the flight's page: the chevron's link is stretched over it, so no script is needed. */
.flight-row { position: relative; cursor: pointer; }
.flight-row:hover { background: #f1f6ff; }
.flight-row:has(.flight-expand:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.flight-row .flight-expand-cell { padding: 4px 8px 4px 0; }
.flight-expand { display: inline-flex; align-items: center; justify-content: center; color: #617b9c; width: 34px; height: 38px; border-radius: 5px; }
.flight-expand:hover { text-decoration: none; }
.flight-expand:focus-visible { outline: none; }
.flight-expand::after { content: ""; position: absolute; inset: 0; }
.flight-expand span { font-size: 26px; line-height: 1; }
/* Three columns with equal sides, so the page links stay in the true centre whatever the texts beside them measure. */
.flight-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 20px; }
.flight-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; }
.flight-pages a, .flight-pages > span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 34px; font-size: 12px; color: #0055db; }
.flight-pages a, .flight-pages > span { border-radius: var(--radius); }
.flight-pages a:hover { background: var(--sky); text-decoration: none; }
.flight-pages .flight-page-number { border-radius: 50%; }
.flight-pages a[aria-current] { background: var(--blue); color: white; }
.flight-pages .flight-page-prev, .flight-pages .flight-page-next { gap: 8px; padding: 0 10px; }
.flight-page-prev > span, .flight-page-next > span { font-size: 24px; }
.flight-pages [aria-disabled] { color: #8695a9; }
.flight-pages .flight-page-gap { min-width: 20px; color: var(--muted); }
.flight-result-count, .flight-page-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.flight-page-count { justify-self: end; }
/* The board's line is a block of its own after the pages, in no card padding; named with .card-evidence so the shared band's margins do not reach it. */
.card-evidence.flight-evidence { margin: 0; padding: 12px 20px; }
.flight-empty { padding: 42px 20px; background: #fff; border: 0; }
.flight-empty h2 { font-size: 22px; }
.flight-empty p { margin: 12px auto; }
/* The empty state's next steps, side by side and wrapping on a narrow screen. */
.flight-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
@media (max-width: 1100px) {
  .flight-board [role="row"] { grid-template-columns: 108px minmax(140px, 1.3fr) 104px minmax(120px, 1fr) 124px minmax(110px, 1fr) 34px; }
  .flight-row > [role="cell"], .flight-board-head [role="columnheader"] { padding-inline: 10px; }
  .flight-filters { gap: 10px; }
  .flight-direction-tabs a { padding-inline: 18px; }
}
@media (max-width: 850px) {
  .flights-content { padding-top: 25px; }
  .flight-board-top { align-items: flex-start; flex-wrap: wrap; }
  .flight-direction-tabs a { padding-inline: 14px; font-size: 14px; gap: 7px; }
  .flight-board-date strong { font-size: 12px; }
  .flight-filters { grid-template-columns: 1fr 1fr auto; }
  .flight-search-field { grid-column: 1 / -1; }
  .flight-board [role="row"] { grid-template-columns: 108px minmax(100px, 1.2fr) 88px minmax(92px, 1fr) 104px 100px 26px; }
  .flight-board-head [role="columnheader"], .flight-row > [role="cell"] { padding-inline: 7px; }
  .flight-board-head [role="columnheader"]:first-child, .flight-row > [role="cell"]:first-child { padding-left: 14px; }
  .flight-pagination { grid-template-columns: 1fr 1fr; }
  .flight-pages { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 700px) {
  .flights-content { width: calc(100% - 28px); padding-top: 22px; }
  .flight-board-meta { width: 100%; justify-content: flex-start; }
  .flight-controls { padding: 12px; }
  .flight-board-top { flex-direction: column; gap: 12px; margin-bottom: 14px; }
  .flight-direction-tabs { width: 100%; }
  .flight-direction-tabs a { flex: 1; min-width: 0; white-space: normal; min-height: 40px; padding: 8px; }
  .flight-direction-tabs .material-symbols-outlined { font-size: 21px; }
  .flight-board-date { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; }
  .flight-board-date strong { font-size: 11px; }
  .flight-board-date small { margin: 0; font-size: 10px; }
  .flight-filters { grid-template-columns: 1fr 1fr; }
  .flight-filters .button.primary { grid-column: 1 / -1; width: 100%; }
  .flight-shortcuts { gap: 12px; margin-top: 15px; }
  .flight-shortcuts nav { gap: 6px; }
  .flight-clear { font-size: 11px; }
  .flight-day-count { width: 100%; margin: 0; font-size: 11px; }
  .flight-results-bar { padding: 12px; gap: 8px; }
  .flight-results-bar > div { display: block; }
  .flight-results-bar strong { display: block; font-size: 18px; }
  .flight-pill { padding: 5px 11px 5px 9px; font-size: 11px; gap: 5px; }
  .flight-pill > .material-symbols-outlined { font-size: 15px; }
  .flight-board-head { display: none; }
  .flight-board .flight-row { grid-template-columns: 84px minmax(0, 1fr) auto; align-items: start; gap: 5px 7px; padding: 13px 12px; }
  .flight-row > [role="cell"], .flight-row > [role="cell"]:first-child { padding: 0; }
  .flight-time { grid-column: 1; grid-row: 1 / 3; padding-top: 1px!important; }
  .flight-time strong { font-size: 15px; }
  .flight-place { grid-column: 2; grid-row: 1; }
  .flight-place strong { font-size: 13px; }
  .flight-place small { margin-right: 4px; font-size: 10px; }
  .flight-number { grid-column: 2; grid-row: 2; }
  .flight-number-pill { font-size: 11px; padding: 3px 8px; }
  .flight-airline { grid-column: 3; grid-row: 3; justify-content: flex-end; font-size: 11px; gap: 6px; }
  .flight-airline .airline-badge { flex-basis: 20px; height: 20px; font-size: 8px; }
  .flight-state { grid-column: 3; grid-row: 1 / 3; text-align: right; max-width: 104px; }
  .flight-status { --flight-status-pad: 6px; padding: 4px 6px; font-size: 10px; }
  .flight-state small { font-size: 9px; }
  .flight-number { display: flex; align-items: center; gap: 6px; }
  .flight-gate { grid-column: 2; grid-row: 3; }
  .flight-gate-pill { font-size: 11px; padding: 3px 8px; }
  .flight-row .flight-expand-cell { grid-column: 1; grid-row: 3; padding: 0; }
  .flight-expand { width: 35px; height: 25px; justify-content: flex-start; }
  .flight-pagination { padding: 12px; gap: 12px; }
  .flight-result-count, .flight-page-count { font-size: 11px; }
  .flight-pages { gap: 1px; }
  .flight-pages a, .flight-pages > span { min-width: 28px; font-size: 11px; }
  .flight-pages .flight-page-prev, .flight-pages .flight-page-next { padding: 0 3px; gap: 3px; }
  .flight-pages .flight-page-gap { min-width: 14px; }
}

/* One flight's page (templates/pages/flight.html.twig): the cards two by two on a wide screen, the flight beside its route,
   then the history beside the other days; a last odd card takes the whole row. The facts are the status boxes' tiles. */
.flight-page { display: grid; gap: 18px; padding: 35px 0 45px; }
.flight-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.flight-page-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.flight-card { --card-pad: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: var(--card-pad); border: 1px solid #dce5f0; border-radius: 9px; background: #fff; box-shadow: 0 3px 16px #163b6414; }
.flight-card h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.flight-card h2 .material-symbols-outlined { color: var(--blue); font-size: 24px; }
.flight-page-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.flight-page-time { display: grid; gap: 2px; }
.flight-page-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.flight-page-time strong { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.flight-page-time strong.is-late { color: #955300; }
.flight-page-day { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.flight-page-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.flight-page-status .flight-status { --flight-status-pad: 12px; padding: 6px 12px; font-size: 14px; }
.flight-page-status small { color: var(--muted); font-size: 13px; }
.flight-page-status .flight-delay { color: #955300; font-weight: 600; }
.flight-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.flight-facts > div { min-width: 0; padding: 12px 14px; border-radius: 7px; background: var(--sky-soft); }
.flight-facts > .flight-facts-wide { grid-column: 1 / -1; }
.flight-facts dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.flight-facts dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.flight-week { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 400; }
.flight-week strong { margin-left: 4px; }
.flight-page-note { color: var(--muted); font-size: 13px; }
.flight-page-numbers { display: grid; gap: 8px; margin: 0; }
.flight-page-numbers dd { margin: 0; }
.flight-page-numbers ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.flight-number-chip { display: inline-block; padding: 5px 11px; border: 1px solid #c9d8f3; border-radius: 6px; color: #0b3aa8; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.flight-number-chip:hover { background: var(--sky); text-decoration: none; }
.flight-number-chip[aria-current] { border-color: #e6eeff; background: #e6eeff; }
/* At the card's foot when the card beside it is taller; the shared band (.card-evidence, later) sets the other margins. */
.card-evidence.flight-page-evidence { margin-top: auto; }
.flight-route-distance { font-size: 15px; }
.flight-days { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flight-days li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 7px; background: var(--sky-soft); font-variant-numeric: tabular-nums; }
/* The route map (public/scripts/route-map.js): the traffic map's frame and fallback, shorter, on the same OpenFreeMap tiles. */
/* The map fills what its card has beside the flight's card, never less than its own height. */
.route-map { display: flex; flex: 1; flex-direction: column; }
.route-map-frame { position: relative; isolation: isolate; display: flex; flex: 1; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--sky-soft); }
.route-map-canvas { flex: 1; min-height: 380px; }
.route-map-unavailable { display: none; align-self: center; width: 100%; margin: 0; padding: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.route-map.is-failed .route-map-canvas, html:not(.js) .route-map-canvas { display: none; }
.route-map.is-failed .route-map-unavailable, html:not(.js) .route-map-unavailable { display: block; }
.route-map .maplibregl-ctrl-attrib { font-size: 10px; }
.route-map .maplibregl-ctrl-bottom-left, .route-map .maplibregl-ctrl-bottom-right { z-index: 10; }
.route-map-airport { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; box-shadow: 0 2px 8px rgba(16, 45, 80, .3); }
.route-map-place { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 6px rgba(16, 45, 80, .35); }
@media (max-width: 850px) {
  .flight-page-grid { grid-template-columns: minmax(0, 1fr); }
  /* One column reads as before: the history straight after the flight, then the route. */
  .flight-now { order: -2; }
  .flight-usual { order: -1; }
}
@media (max-width: 700px) {
  .flight-page { padding-top: 22px; }
  .flight-card { --card-pad: 18px; }
  .flight-facts { grid-template-columns: 1fr 1fr; }
  .flight-page-time strong { font-size: 36px; }
  .route-map-canvas { min-height: 280px; }
}

.lot-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.lot-availability::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.lot-availability[data-availability="spaces_many"] {
  background: #caedd6;
  color: #0a6a34;
}
.lot-availability[data-availability="spaces_few"] {
  background: #fff0c2;
  color: #805700;
}
.lot-availability[data-availability="fully_booked"] {
  background: #f6d9d6;
  color: #8f2b24;
}
.card-top .lot-availability {
  margin-left: auto;
}
.lot-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
  margin: 2px 0 6px;
  width: 100%;
  padding: 12px;
  background: var(--sky-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.lot-prices dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 3px;
}
.lot-prices dd {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.price-not-offered {
  color: var(--muted);
  font-style: italic;
}
.lot-attribution {
  font-size: 12px;
  color: var(--muted);
  margin: -10px 0 30px;
}
.parking-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin-bottom: 45px;
}
.parking-overview .status-detail,
.parking-overview .price-panel {
  max-width: none;
  margin-bottom: 0;
}
.parking-overview .status-detail {
  height: 100%;
}
.parking-overview .price-table {
  margin-top: 10px;
}
@media (max-width: 900px) {
  .parking-overview {
    grid-template-columns: minmax(0, 1fr);
  }
}
.topic-page-content>.card-grid {
  gap: 22px;
}
.lot-card {
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lot-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: calc(100% + 50px);
  margin: -25px -25px 16px;
  min-height: 150px;
  padding: 54px 25px 12px;
  background: var(--line);
  color: var(--ink);
  overflow: hidden;
}
.lot-head.has-cover {
  color: var(--ink);
  background: var(--sky-soft);
}
.lot-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55) 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55) 65%, transparent 100%);
}
.lot-head.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .92) 100%);
}
.lot-head h2,
.lot-head h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}
.lot-head-tags {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.lot-head-tags .tag {
  box-shadow: 0 1px 4px #102d5026;
}
@media (hover: hover) {
  .lot-card:hover {
    transform: translateY(-2px);
    border-color: #d4deeb;
    box-shadow: 0 8px 24px #102d5017;
  }
}
.lot-card:focus-within {
  border-color: #c7d6e9;
  box-shadow: 0 8px 24px #102d5017;
}
@media (max-width: 600px) {
  .topic-page-content>.card-grid {
    gap: 18px;
  }
  .lot-head {
    width: calc(100% + 44px);
    margin: -22px -22px 14px;
    padding: 46px 22px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lot-card {
    transition: none;
  }
}
/* The text link: the one definition of a worded link that leads somewhere, wherever it sits (a tile, the hero's
   quick links, a status card's note, a card's operator link). Its look lives here and nowhere else; a place adds
   only where the link sits (margins, separators), never a size, weight or colour of its own.
   The trailing icon is drawn by the class, so no template repeats the markup: the forward arrow, or the external
   mark on a link that leaves the site. It is an atomic inline box, which a text decoration never reaches: the
   words underline on hover, the icon never does, and the arrow moves a little to the right instead. */
.text-link {
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.text-link::after,
.external::after {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.text-link::after {
  content: "arrow_forward";
  /* Decorative, as the old aria-hidden icon was; a browser without the alt syntax keeps the line above. */
  content: "arrow_forward" / "";
  font-size: 1.3em;
  vertical-align: -.24em;
  margin-left: .25em;
  transition: transform .2s;
}
.text-link:hover::after {
  transform: translateX(2px);
}
/* Every link that leaves the site carries the same mark: the open-in-new icon, in place of the arrow and standing still. */
.external::after {
  content: "open_in_new";
  font-size: 1.2em;
  vertical-align: -.18em;
  margin-left: .2em;
}
.external:hover::after {
  transform: none;
}
@media (max-width: 600px) {
  .text-link {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-link::after {
    transition: none;
  }
}
.button.external::after {
  font-size: 18px;
  margin-left: auto;
}
.lot-book-wrap {
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}
.button.lot-book {
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  font-size: 14px;
  gap: 12px;
  background: var(--sky);
  color: var(--blue);
  border: 1px solid var(--line-strong);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button.lot-book .link-label {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
}
.lot-card:has(.tag.accent) .lot-book {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
@media (hover: hover) {
  .button.lot-book:hover {
    background: var(--sky-strong);
    border-color: var(--line-strong);
    text-decoration: none;
  }
  .lot-card:has(.tag.accent) .lot-book:hover {
    background: var(--blue-strong);
    border-color: var(--blue-strong);
  }
}
.lot-card .lot-book-wrap+.freshness {
  margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .button.lot-book {
    transition: none;
  }
}
/* The zone beside a local time: its short name (CEST), the full zone and offset in the hover title. */
.tz-mark {
  margin-left: .35em;
  font-size: .85em;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: none;
  opacity: .8;
  cursor: help;
}
.local-time {
  font-variant-numeric: tabular-nums;
}
.hero-context time {
  display: inline-block;
}
.hero-context .tz-mark {
  color: #d5e5f3;
  font-size: 13px;
  letter-spacing: 0;
  opacity: 1;
}
.lot-card {
  overflow: visible;
}
.lot-head {
  border-radius: 6px 6px 0 0;
}
.lot-card:hover,
.lot-card:focus-within {
  z-index: 2;
}
/* A card's footer (the transport cards): the evidence band itself, at the card's foot; the wrapper adds nothing. */
.freshness.card-footer {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
/* A notice after the band (a very stale row) stays inside the card: the band then keeps the foot's padding under it. */
.freshness.card-footer .card-evidence:has(+ .notice) {
  margin-bottom: 0;
}
/* Every card's evidence line (components/evidence.html.twig): the source credit bottom left, the check
   time bottom right as a badge, as the flight board's footer (site rule 2026-10-03): a light rule from edge to edge
   of the card, 12px above and below. The line steps out of the card's padding by the card's own --card-pad (and
   --card-pad-bottom where the foot differs), which each card states where it sets its padding, so the words still
   stand on the card's content edge. Cards inside .freshness keep that wrapper's own frame. */
.card-evidence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
  margin: 18px calc(-1 * var(--card-pad, 28px)) calc(-1 * var(--card-pad-bottom, var(--card-pad, 28px)));
  padding: 12px var(--card-pad, 28px);
  border-top: 1px solid #e8eefa;
  color: var(--muted);
  font-size: 12px;
}
.freshness:not(.card-footer) .card-evidence {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.card-evidence .evidence-source {
  min-width: 0;
  flex: 1 1 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* In a card's footer the credit is never cut to make room for the time: a licence's display text has to be readable
   whole, so the time moves to a line of its own when the two do not fit side by side. */
.freshness .card-evidence .evidence-source {
  flex: 0 1 auto;
  max-width: 100%;
}
/* A source's name carries the verified mark in front of it (site rule 2026-09-30): on every evidence line and on the
   car parks' credit line. The home page's status cards are the exception. Drawn here, so no template writes the icon. */
.card-evidence:not(.status-evidence) .evidence-source::before,
.lot-attribution > span::before,
.card-evidence:not(.status-evidence) .evidence-time::before {
  content: "verified";
  content: "verified" / "";
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: 1.35em;
  line-height: 1;
  display: inline-block;
  vertical-align: -.24em;
  margin-right: .3em;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.card-evidence .evidence-times {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}
.evidence-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #edf1e9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* A check time's badge carries a green tick in front of it, on the same lines as the verified mark. */
.card-evidence:not(.status-evidence) .evidence-time::before {
  content: "check";
  content: "check" / "";
  margin-right: 0;
  margin-left: -2px;
  font-size: 1.3em;
  vertical-align: 0;
}
.card-footer>.notice {
  margin-top: 6px;
}
/* /road-traffic: per-site readings and the corridor disruption list. */
.traffic-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin-bottom:45px}
.traffic-overview .status-detail,.traffic-overview .traffic-panel{max-width:none;margin-bottom:0}
.traffic-panel.traffic-events,.traffic-panel.fuel-prices{max-width:none;margin-bottom:45px}
.traffic-overview .status-detail{height:100%}
@media(max-width:1100px){.traffic-overview{grid-template-columns:minmax(0,1fr)}}
.traffic-panel{--card-pad:28px;max-width:820px;margin-bottom:45px;padding:var(--card-pad);border:1px solid var(--line);border-radius:9px;background:#fff}
.traffic-panel h2{font-size:22px}
.traffic-scope{margin-top:8px;color:var(--muted);font-size:13px}
.weather-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;margin-bottom:45px}
.weather-overview .status-detail{max-width:none;margin-bottom:0}
/* Beside the forecast the box is half as wide; the credits wrap rather than being cut. */
@media(max-width:1100px){.weather-overview{grid-template-columns:minmax(0,1fr)}}
/* /weather: the aerodrome forecast beside the observation, one row per change group as the forecaster stated it. */
.forecast-panel{--card-pad:28px;display:flex;flex-direction:column;padding:var(--card-pad);border:1px solid var(--line);border-radius:9px;background:#fff}
.forecast-panel h2{font-size:22px}
.forecast-scope{margin-top:8px;color:var(--muted);font-size:13px}
.forecast-list{margin:16px 0 0;padding:0;list-style:none}
.forecast-period{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:4px 18px;padding:12px 0;border-top:1px solid var(--line)}
.forecast-period:first-child{border-top:0}
.forecast-when{display:flex;flex-direction:column;gap:2px}
.forecast-change{color:var(--ink);font-size:13px;font-weight:700}
.forecast-period:is([data-change="temporary"],[data-change="chance"]) .forecast-change{color:var(--muted)}
.forecast-time{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.forecast-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;color:var(--ink);font-size:14px}
.forecast-condition{font-weight:700}
.forecast-transition{color:var(--muted);font-size:13px}
.forecast-raw{margin-top:14px;color:var(--muted);font-size:13px}
.forecast-raw summary{cursor:pointer}
.forecast-raw code{display:block;margin-top:8px;padding:10px 12px;border-radius:6px;background:var(--sky-soft);color:var(--ink);font-size:12px;white-space:normal;overflow-wrap:anywhere}
.forecast-unavailable{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--muted)}
/* The evidence line sits at the panel's foot when the panel is as tall as the status box beside it. */
.forecast-raw,.forecast-unavailable{margin-bottom:18px}
.forecast-panel .forecast-evidence{margin-top:auto}
@media(max-width:600px){.forecast-panel{--card-pad:20px}.forecast-period{grid-template-columns:minmax(0,1fr)}}
.traffic-table{margin-top:14px}
.traffic-table th,.traffic-table td{padding:12px 8px}
.traffic-table thead th{letter-spacing:.5px}
.traffic-table th[scope=row]{padding-left:0;font-size:14px;text-transform:none;letter-spacing:0;font-weight:650}
.traffic-table td:last-child,.traffic-table th:last-child{padding-right:0}
.traffic-lane{display:block;font-size:12px;font-weight:500;color:var(--muted);line-height:1.3}
.traffic-table td{font-variant-numeric:tabular-nums;white-space:nowrap}
.flow-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px;background:#00a44f}
tr[data-flow=slow] .flow-dot{background:#c17c12}
tr[data-flow=severe] .flow-dot{background:#c33e35}
.disruption-list{list-style:none;margin:14px 0 0;padding:0}
.disruption{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.disruption:first-child{border-top:0}
.disruption-road{flex:0 0 96px;display:flex;flex-direction:column;gap:4px}
.road-badge{display:inline-block;align-self:flex-start;min-width:44px;padding:4px 8px;border-radius:5px;background:#1d4b8f;color:#fff;font-weight:700;font-size:13px;text-align:center;letter-spacing:.02em}
.road-badge.motorway{background:#0b7a3b}
.disruption-road-name{font-size:11px;color:var(--muted);line-height:1.3}
.disruption-body{min-width:0}
.disruption-body strong{display:block;font-size:15px}
.disruption[data-closed=true] .disruption-body strong{color:#c33e35}
.disruption-facts{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.disruption-comment{margin:8px 0 0;font-size:13px}
@media(max-width:600px){.traffic-panel{--card-pad:21px}.disruption{gap:12px}.disruption-road{flex-basis:72px}}
/* The data sources page: one panel per publisher, every panel the same shape, the article's aside beside them.
   The column may shrink below its widest line, or the evidence band's nowrap credit pushes a phone page wide. */
.sources-page {
  min-width: 0;
}
.sources-intro {
  max-width: 820px;
  margin-bottom: 36px;
}
.sources-topic {
  margin-bottom: 12px;
}
.sources-topic>h2 {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.source-entry {
  margin-bottom: 22px;
}
.source-entry h3 {
  font-size: 22px;
}
.source-what {
  margin-top: 6px;
  font-weight: 600;
}
.source-why {
  margin-top: 12px;
}
.source-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.source-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.source-facts li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
}
@media (max-width: 600px) {
  .source-entry h3 {
    font-size: 19px;
  }
}

/* The terms page: one column of legal prose, set for reading rather than scanning. */
.footer-legal {
  color: var(--muted);
}
.legal-page {
  max-width: 760px;
  padding-bottom: 20px;
}
/* The error page under its heading: the status small and quiet, the words, the way home; in line with the heading, not a centred column. */
.error-page {
  padding-bottom: 60px;
}
.error-page .error-code {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.legal-page h2 {
  margin: 36px 0 14px;
  font-size: 20px;
  font-weight: 600;
}
.legal-page h2:first-of-type {
  margin-top: 26px;
}
.legal-page p {
  margin: 0 0 14px;
  line-height: 1.75;
}
.legal-page ul {
  margin: 0 0 14px;
  padding-left: 20px;
  line-height: 1.75;
}
.legal-page li {
  margin-bottom: 6px;
}
.legal-page li::marker {
  color: var(--muted);
}
.legal-effective {
  color: var(--muted);
  font-size: 13px;
}
.legal-untranslated {
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid #7488a7;
  border-radius: 8px;
  background: var(--sky-soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .legal-page h2 {
    font-size: 18px;
  }
}

/* The source's verified mark and the check time's tick are the scheme's green. */
.card-evidence:not(.status-evidence) .evidence-source::before,
.lot-attribution > span::before,
.card-evidence:not(.status-evidence) .evidence-time::before {
  color: var(--green);
}
/* The next departures sit on a sky band from edge to edge, so the home page's three sections read apart without rules. */
.home-flights {
  margin-bottom: 34px;
  padding: 26px 0 30px;
  background: var(--sky);
  box-shadow: 0 0 0 100vmax var(--sky);
  clip-path: inset(0 -100vmax);
}
/* The clock-and-weather card on a wide screen is light: frosted white over the photo, navy words. On a narrow screen
   it is a row on the photo itself and keeps its white words. */
@media (min-width: 901px) {
  .hero-context {
    --focus-ring: var(--blue);
    border-color: #ffffffb3;
    background: linear-gradient(135deg, #ffffffe0, #ffffffc2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px #0617281f;
  }
  .hero-context .hero-context-item,
  .hero-context .hero-context-item>.hero-context-arrow {
    color: var(--ink);
  }
  .hero-context .hero-context-label,
  .hero-context .hero-weather-condition,
  .hero-context .tz-mark {
    color: var(--muted);
  }
  .hero-context .hero-context-item>.material-symbols-outlined:first-child {
    color: var(--green);
  }
  .hero-context .hero-weather {
    border-top-color: var(--line-strong);
  }
}

/* The car park card (2026-09-30): a picture head with the name on it, amenity chips, the prices in one tinted box,
   one solid booking button. The head is the picture under a dark scrim, or the car park's own colour without one. */
.lot-card {
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 42, 84, .06);
}
.lot-card .lot-head {
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 176px;
  margin-bottom: 18px;
  padding: 58px 20px 16px;
  border-radius: 13px 13px 0 0;
}
.lot-card .lot-head.has-cover {
  background: var(--ink);
  color: #fff;
}
.lot-card .lot-cover {
  -webkit-mask-image: none;
  mask-image: none;
}
.lot-card .lot-head.has-cover::after {
  background: linear-gradient(180deg, rgba(8, 26, 46, .08) 25%, rgba(8, 26, 46, .45) 60%, rgba(8, 26, 46, .82) 100%);
}
.lot-title {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.lot-card .lot-head h2,
.lot-card .lot-head h3 {
  font-size: 19px;
  letter-spacing: -.3px;
  line-height: 1.2;
}
.lot-head.has-cover h2,
.lot-head.has-cover h3,
.lot-head.has-cover .lot-distance {
  text-shadow: 0 1px 2px rgba(4, 16, 32, .5);
}
.lot-distance {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.3;
  opacity: .9;
}
.lot-transfer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  border-radius: 7px;
  background: #ffffff33;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.lot-transfer .material-symbols-outlined {
  font-size: 17px;
}
.lot-head:not(.has-cover) .lot-transfer {
  background: #ffffffb3;
  color: var(--ink);
}
.lot-card .lot-head-tags {
  left: 14px;
  justify-content: flex-start;
}
.lot-card .lot-head-tags .tag {
  padding: 5px 11px;
  border-radius: 999px;
}
.lot-card .lot-head-tags .tag.accent {
  background: var(--green);
  color: #fff;
  letter-spacing: .3px;
}
.lot-card .lot-head-tags .lot-availability {
  margin-left: auto;
}
.lot-card .badges {
  margin: 0 0 14px;
  gap: 7px;
  font-size: 12px;
}
.lot-card .badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 6px;
  background: var(--sky);
  font-weight: 600;
}
.lot-card .badges span::before {
  content: "check";
  content: "check" / "";
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  color: var(--green);
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}
.lot-card>p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.lot-card .lot-prices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: auto 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--sky);
}
.lot-card .lot-prices dt {
  font-weight: 700;
  color: var(--ink);
}
.lot-card .lot-prices dd {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.3px;
  line-height: 1.2;
  color: var(--green-strong);
  white-space: nowrap;
}
.lot-card .lot-prices+.lot-book-wrap {
  margin-top: 0;
  padding-top: 12px;
}
/* The booking button is the scheme's green, the label centred with no icon (2026-10-06). The deeper green keeps
   white text above 4.5:1. */
.lot-card .button.lot-book,
.lot-card:has(.tag.accent) .lot-book {
  justify-content: center;
  min-height: 46px;
  border-radius: 9px;
  border-color: var(--green-strong);
  background: var(--green-strong);
  color: #fff;
}
.lot-card .button.lot-book .link-label {
  flex: 0 1 auto;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  white-space: normal;
}
.lot-card .button.external.lot-book::after {
  content: none;
}
@media (hover: hover) {
  .lot-card .button.lot-book:hover,
  .lot-card:has(.tag.accent) .lot-book:hover {
    border-color: var(--green-deep);
    background: var(--green-deep);
  }
}
@media (max-width: 600px) {
  .lot-card .lot-head {
    padding: 52px 18px 14px;
  }
}
/* The availability badge is ParkoLow's own pill (its .meta-pill.avail-green, -amber and -red, assets/styles/app.css),
   values copied as they are there, so a car park's state looks the same here as on the provider's site. ParkoLow
   draws the dot as an emoji; here it stays a drawn dot in the text's colour. */
.lot-card .lot-head-tags .lot-availability {
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.lot-availability[data-state="NORMAL"],
.lot-availability[data-availability="spaces_many"] {
  background: #dcfce7;
  color: #15803d;
}
.lot-availability[data-state="WARNING"],
.lot-availability[data-availability="spaces_few"] {
  background: #fef3c7;
  color: #b45309;
}
.lot-availability[data-state="DISRUPTED"],
.lot-availability[data-availability="fully_booked"] {
  background: #fee2e2;
  color: #b91c1c;
}
/* The badge's dot pulses like a status card's: the state is a live reading. */
.lot-card .lot-head-tags .lot-availability {
  position: relative;
}
.lot-card .lot-head-tags .lot-availability::before {
  width: 7px;
  height: 7px;
}
.lot-card .lot-head-tags .lot-availability::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  animation: status-pulse 2s cubic-bezier(.2, .65, .35, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lot-card .lot-head-tags .lot-availability::after {
    animation: none;
  }
}
/* An amenity with ParkoLow's emoji shows it in place of the check. */
.lot-card .badges span.has-emoji {
  padding-left: 8px;
}
.lot-card .badges span.has-emoji::before {
  content: none;
}
.lot-card .badges i {
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}

/* The road traffic map (public/scripts/traffic-map.js): MapLibre on OpenFreeMap tiles, the airport and a pin per situation in the list. */
/* One card: the list on the left, its map on the right, staying in view while a long list scrolls. */
.traffic-events-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start;margin-top:14px}
.traffic-events-body .disruption-list{margin-top:0}
.traffic-map{position:sticky;top:16px;min-width:0}
.traffic-map-frame{position:relative;isolation:isolate;flex:1;display:flex;min-height:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--sky-soft)}
.traffic-map-canvas{flex:1;height:min(600px,calc(100vh - 32px))}
.traffic-map-unavailable{display:none;margin:0;padding:24px;align-self:center;width:100%;color:var(--muted);font-size:14px;text-align:center}
.traffic-map.is-failed .traffic-map-canvas,html:not(.js) .traffic-map-canvas{display:none}
.traffic-map.is-failed .traffic-map-unavailable,html:not(.js) .traffic-map-unavailable{display:block}
.traffic-map .maplibregl-ctrl-attrib{font-size:10px}
.traffic-map .maplibregl-ctrl-bottom-left,.traffic-map .maplibregl-ctrl-bottom-right{z-index:10}
.traffic-map-airport{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:18px;box-shadow:0 2px 8px rgba(16,45,80,.3)}
/* A pin is the situation's road badge on a short stem; a closed road's is ringed in the closure red. */
.traffic-pin{display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;cursor:pointer;font:inherit;transition:transform .15s}
.traffic-pin .road-badge{min-width:0;padding:3px 7px;border:2px solid #fff;font-size:12px;box-shadow:0 2px 6px rgba(16,45,80,.35)}
.traffic-pin::after{content:"";width:2px;height:8px;background:var(--ink)}
.traffic-pin[data-closed=true] .road-badge{border-color:#c33e35;box-shadow:0 0 0 2px rgba(195,62,53,.3),0 2px 6px rgba(16,45,80,.35)}
.traffic-pin[data-kind=accident] .road-badge,.traffic-pin[data-kind=obstruction] .road-badge{background:#c33e35}
.traffic-pin:hover,.traffic-pin.is-hinted,.traffic-pin.is-open{transform:scale(1.2);transform-origin:bottom center}
.traffic-pin:focus-visible .road-badge{outline:2px solid var(--focus-ring);outline-offset:2px}
.maplibregl-marker:has(.is-hinted),.maplibregl-marker:has(.is-open),.maplibregl-marker:hover{z-index:5}
.traffic-map .maplibregl-popup{z-index:6}
.traffic-map .maplibregl-popup-content{padding:12px 14px;border-radius:9px;box-shadow:0 8px 24px rgba(16,45,80,.22);font-family:inherit;color:var(--ink)}
.traffic-pin-card .disruption-body strong{font-size:14px}
.traffic-events:has(.maplibregl-map) .disruption{cursor:pointer}
.traffic-events:has(.maplibregl-map) .disruption:hover,.disruption.is-on-map{background:var(--sky-soft);box-shadow:-10px 0 0 var(--sky-soft),10px 0 0 var(--sky-soft)}
@media(prefers-reduced-motion:reduce){.traffic-pin{transition:none}}
@media(max-width:1100px){.traffic-events-body{grid-template-columns:minmax(0,1fr);gap:18px}.traffic-map{position:static}.traffic-map-canvas{height:320px}}
.js .disruption-comment[data-expandable]:not(.is-expanded){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.disruption-more{margin:4px 0 0;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.disruption-more:hover{text-decoration:underline}
.traffic-pin-card{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.traffic-pin-card .disruption-comment{font-size:12px}

/* The transport section's menu (public transport, taxi, transfer): the flight board's direction tabs, as a row that scrolls on a phone. */
.section-tabs { display: inline-flex; max-width: 100%; margin-bottom: 28px; padding: 3px; overflow-x: auto; background: var(--sky-soft); border: 1px solid var(--line); border-radius: 7px; }
.section-tabs a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 20px; border-radius: 5px; color: var(--ink); font-size: 16px; font-weight: 650; white-space: nowrap; }
.section-tabs a:hover { background: var(--sky); text-decoration: none; }
.section-tabs a[aria-current] { background: var(--blue); color: #fff; }
.section-tabs .material-symbols-outlined { font-size: 22px; }
.taxi-connections { margin-top: 28px; }
/* The taxi operators' cards, three across like the transport cards and on the same head (.lot-card, .lot-head). A card's children
   fill its width (a .card aligns them at the start), a long item name wraps, and the evidence band keeps the foot when one card is
   shorter than its neighbour. */
.taxi-note { margin: 0 0 12px; line-height: 1.55; }
.taxi-intro { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.taxi-operator > .table-scroll,
.taxi-operator > .taxi-estimate,
.taxi-operator > .notice,
.taxi-operator > .card-evidence { align-self: stretch; }
.taxi-operator .price-table { margin-top: 0; }
.taxi-operators .taxi-table th[scope=row] { white-space: normal; }
.taxi-operators .taxi-estimate { margin: 14px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.taxi-operators .price-evidence { margin-top: auto; }
@media (max-width: 640px) {
  .section-tabs { display: flex; }
  .section-tabs a { flex: 1; min-width: 0; justify-content: center; padding: 8px; font-size: 13px; line-height: 1.2; gap: 6px; white-space: normal; }
}

/* The car park list's order and filter: the flight board's pills, in one row above the cards. */
.lot-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; scroll-margin-top: 16px; }
.lot-controls nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lot-controls-label { color: var(--ink); font-size: 13px; font-weight: 650; }
.lot-count { margin-left: auto; color: var(--ink); font-size: 13px; opacity: .75; }
.lot-controls + .lot-none { margin-bottom: 28px; }
@media (max-width: 640px) { .lot-count { margin-left: 0; } }

/* The flight list on a phone (2026-09-30): two lines per flight. Line one is the time, the place and the status; line two
   the scheduled time when it changed, the number with the airline's name, and the terminal and gate on the right.
   The chevron sits at the row's right edge, as on any list that leads on. */
@media (max-width: 700px) {
  .flight-board .flight-row { grid-template-columns: 56px auto minmax(0, 1fr) auto 16px; align-items: center; gap: 8px 8px; padding: 12px 8px 12px 12px; }
  .flight-time { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .flight-time strong { font-size: 17px; }
  .flight-scheduled { margin-top: 9px; font-size: 12px; }
  /* An unchanged time is already the big one above it. */
  .flight-scheduled:not(:has(s)) { display: none; }
  .flight-place { grid-column: 2 / 4; grid-row: 1; align-self: start; display: flex; align-items: baseline; gap: 7px; min-width: 0; padding-top: 2px!important; }
  .flight-place strong { order: 1; font-size: 15px; line-height: 1.25; }
  .flight-place small { order: 2; min-width: 0; margin: 0; font-size: 11px; }
  .flight-state { grid-column: 4; grid-row: 1; max-width: none; align-self: start; }
  .flight-status { --flight-status-pad: 8px; padding: 4px 8px; font-size: 11px; }
  .flight-state small { margin-top: 3px; font-size: 10px; }
  .flight-number { grid-column: 2; grid-row: 2; }
  .flight-airline { grid-column: 3; grid-row: 2; justify-content: flex-start; font-size: 12px; color: var(--muted); }
  .flight-airline .airline-badge { display: none; }
  .flight-airline-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  .flight-gate { grid-column: 4; grid-row: 2; justify-self: end; color: var(--muted); }
  .flight-row .flight-expand-cell { grid-column: 5; grid-row: 1 / 3; align-self: center; }
  .flight-expand { width: 16px; height: 40px; justify-content: center; }
  .flight-expand span { font-size: 22px; }
}

/* A car park card shows two rows of services (a chip is 25px, the gap 7px); the button under them shows the rest. */
.js .lot-card .badges[data-expandable]:not(.is-expanded) { max-height: 57px; overflow: hidden; }
.lot-card .badges:has(+ .lot-badges-more:not([hidden])) { margin-bottom: 6px; }
.lot-badges-more { align-self: flex-start; margin: 0 0 14px; }

/* A section's page under the news (site rule 2026-10-03): "Cikkek / Közlemények" in the hero, the section's name a way back to it. */
.heading-parent {
  color: inherit;
  text-decoration: none;
  opacity: .72;
}
.heading-parent:hover {
  text-decoration: underline;
  opacity: 1;
}
.heading-separator {
  opacity: .5;
}
/* An article with its aside (site rule 2026-10-03): the text in its column, the live block and the latest articles beside it, under it on a phone.
   The two columns fill the wrap: the text keeps its reading width and the aside takes the rest, so nothing stands empty on the right. */
.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(320px, 1fr);
  gap: 56px;
  align-items: start;
}
.news-aside {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 18px;
}
.aside-block {
  --card-pad: 22px;
  --card-pad-bottom: 20px;
  padding: 20px var(--card-pad) var(--card-pad-bottom);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.aside-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.aside-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.aside-head .text-link {
  flex: none;
  font-size: 13px;
}
.aside-flights,
.aside-lines,
.aside-articles {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside-flight {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.aside-flight:first-child {
  border-top: 0;
  padding-top: 0;
}
.aside-flight time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.aside-flight.is-delayed time {
  color: #955300;
}
.aside-flight-place {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aside-flight-place small {
  color: var(--muted);
}
.aside-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 16px;
}
.aside-lead-price {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}
.aside-lines li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.aside-lines li:first-child {
  border-top: 0;
  padding-top: 0;
}
.aside-times {
  display: flex;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.aside-articles li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.aside-articles li:first-child {
  border-top: 0;
  padding-top: 0;
}
.aside-articles a {
  color: var(--ink);
  font-weight: 600;
}
.aside-articles .subtle {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}
/* The block's evidence is the card's footer band, like every card's; the block is narrow, so the credit may be cut with its ellipsis. */
.aside-evidence {
  margin-top: 16px;
}
@media (max-width: 1000px) {
  .news-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .news-aside {
    position: static;
  }
}

/* "Show more" under the car park list (2026-10-06): the cards past the first ones are folded until it is pressed. */
.lot-card[data-folded] {
  display: none;
}
.lot-more-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}
.button.lot-more {
  min-height: 46px;
  margin: 0;
  padding: 12px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--sky);
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.button.lot-more[hidden] {
  display: none;
}
@media (hover: hover) {
  .button.lot-more:hover {
    background: var(--sky-strong);
    text-decoration: underline;
  }
}
.lot-card:focus {
  outline: none;
}

/* Ticket prices on a public transport card (components/transport.html.twig), typed by hand (transport_fare). */
.transport-fares { margin: 14px 0; }
.transport-fares .price-table { margin-top: 0; }
.transport-fares .fares-table th[scope=row] { white-space: normal; }
.transport-fares .fare-note { display: block; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
.transport-fares .fare-evidence { margin-top: 8px; }

/* The journey planner (templates/pages/planner.html.twig, components/planner_form.html.twig): the parameters on the left, the calculation,
   the reasoning and the ranked ways on the right. */
/* The home page's tab, in the flight tab's shape: the start across two of the three columns, the button in the third. */
.planner-form-hero, .search-box .planner-form-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.07fr); gap: 6px; }
.planner-form-hero .planner-from { display: flex; grid-column: span 2; min-width: 0; }
.planner-form-hero select, .planner-form-card select { min-width: 0; flex: 1; height: 44px; padding: 0 14px; border: 1px solid #ccd8e9; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.planner-form-card .planner-field { display: flex; flex: 1; min-width: 0; }
.planner-form-card { display: flex; gap: 10px; align-items: stretch; margin: 4px 0 0; }
.planner-form-card .button { min-width: 0; }
.planner-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.planner-main { transition: opacity .2s; }
.planner-main[aria-busy="true"] { opacity: .55; }
.planner-params { position: sticky; top: 16px; }
.planner-form-full { display: grid; gap: 10px; margin: 0; }
.planner-section { border: 1px solid var(--line-strong, #dce5f0); border-radius: 8px; background: var(--sky-soft, #f4f9ff); }
.planner-section h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.planner-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.planner-section > summary::-webkit-details-marker { display: none; }
.planner-section > summary::after { content: "expand_more"; font-family: "Material Symbols Outlined"; font-size: 22px; color: var(--muted); margin-left: auto; }
.planner-section[open] > summary::after { content: "expand_less"; }
.planner-where { padding: 12px 14px; display: grid; gap: 10px; }
.planner-section-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 0 14px 14px; }
.planner-section-body .planner-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.planner-step-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; }
.planner-field { display: grid; gap: 5px; min-width: 0; }
.planner-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.planner-field small { color: var(--muted); font-size: 12px; }
.planner-field input, .planner-field select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #ccd8e9; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
/* The flight number or the time, while the other one is filled in. */
.planner-field input[readonly] { background: var(--sky-soft, #f4f9ff); color: var(--muted); cursor: not-allowed; }
.planner-when .planner-field:first-child { grid-column: 1 / -1; }
.planner-trip { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; border: 0; }
.planner-trip legend { grid-column: 1 / -1; padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.planner-trip label { position: relative; display: block; cursor: pointer; }
.planner-trip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.planner-trip span { display: block; padding: 9px 10px; border: 1px solid var(--line-strong, #dce5f0); background: #fff; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.planner-trip label:first-of-type span { border-radius: 8px 0 0 8px; }
.planner-trip label:last-of-type span { border-radius: 0 8px 8px 0; border-left: 0; }
.planner-trip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.planner-trip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.planner-form-full:has(.planner-trip input[value="one"]:checked) .planner-days { display: none; }
.planner-submit { justify-self: start; }
.js .planner-submit { display: none; }
.planner-show { display: none; }
@media (max-width: 900px) {
  .js .planner-show { display: flex; grid-column: 1 / -1; width: 100%; min-height: 44px; }
}
.planner-empty h2 { margin: 0 0 8px; }
.planner-intro { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.planner-how { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--muted); }
.planner-summary { margin-bottom: 16px; }
.planner-result { scroll-margin-top: 16px; }
.planner-summary h2 { margin: 0 0 6px; }
.planner-summary p { margin: 4px 0; }
.planner-summary-prompt, .planner-delay-note { color: var(--muted); font-size: 13px; }
.planner-error, .planner-usual { margin: 10px 0; }
.planner-answer { margin: 0 0 10px; padding: 13px 16px; border-radius: 8px; background: #edf9f3; color: var(--ink); border: 1px solid #bfe6d2; }
.planner-summary .planner-answer p { margin: 0; font-size: 16px; line-height: 1.55; }
.planner-options { display: grid; gap: 14px; }
/* On a wide screen the first way keeps the full width and the others sit two by two. */
@media (min-width: 1100px) {
  .planner-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-option:first-child { grid-column: 1 / -1; }
}
/* A card's own padding, which its evidence line steps out by; the link pushes the evidence to the card's foot. */
.planner-option { --card-pad: 20px; --card-pad-bottom: 18px; gap: 10px; padding: 18px 20px; align-items: stretch; }
.planner-option > .planner-option-link { margin-bottom: auto; }
/* A card's head is the car park card's (.lot-card .lot-head): the photo under a dark scrim, the name in white on its foot and the
   badges top right; the first card's is taller, a way not offered goes grey. */
.planner-option-head.has-photo { position: relative; align-items: flex-end; min-height: 150px; margin: -18px calc(-1 * var(--card-pad)) 4px; padding: 58px var(--card-pad) 14px; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; overflow: hidden; background: var(--ink); color: #fff; }
.planner-option.is-first .planner-option-head.has-photo { min-height: 176px; border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; }
.planner-option-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.planner-option-head.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 26, 46, .08) 25%, rgba(8, 26, 46, .45) 60%, rgba(8, 26, 46, .82) 100%); }
.planner-option-head.has-photo > :not(.planner-option-photo) { position: relative; z-index: 1; }
/* The badges in the photo's top right corner, as the car park card's tags (.lot-head-tags). */
.planner-option-head.has-photo > .planner-badges { position: absolute; top: 14px; right: 14px; }
.planner-option-head.has-photo h3 { color: #fff; text-shadow: 0 1px 3px rgba(4, 16, 32, .6); }
/* A photo's credit, small at the bottom right, where its licence asks for one. */
.planner-option-head.has-photo > .planner-photo-credit { position: absolute; right: 10px; bottom: 6px; font-size: 10px; color: rgba(255, 255, 255, .75); }
.planner-photo-credit a { color: inherit; }
.planner-option[data-mode=transit] .planner-option-photo { object-position: center 45%; }
.planner-option[data-mode=taxi] .planner-option-photo { object-position: center 65%; }
.planner-option[data-mode=car] .planner-option-photo { object-position: center 62%; }
.planner-option.is-unavailable .planner-option-photo { filter: grayscale(1); }
@media (max-width: 600px) {
  .planner-option-head.has-photo, .planner-option.is-first .planner-option-head.has-photo { min-height: 130px; }
  .planner-option-head h3 { font-size: 22px; }
  .planner-option-head h3 .material-symbols-outlined { font-size: 26px; }
}
/* The fuel price's line and the parking's are one foot: no rule between them, the first not stepping out at the bottom. */
.planner-option > .card-evidence:has(+ .card-evidence) { margin-bottom: 0; padding-bottom: 0; }
.planner-option > .card-evidence + .card-evidence { margin-top: 0; padding-top: 0; border-top: 0; }
/* The winner stands out with a thick green frame. */
.planner-option.is-first { border: 3px solid #12a06c; background: #f3fcf7; }
/* A way that is not offered fades, all but its car park button. */
.planner-option.is-unavailable > :not(.planner-option-link) { opacity: .7; }
.planner-option-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.planner-option-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.planner-option-head h3 .material-symbols-outlined { font-size: 30px; }
.planner-badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* Cheapest, fastest and most comfortable stand out in solid colour, each with a plain line icon (a price tag, a stopwatch, a
   seat) drawn in the text colour. */
.planner-badges .tag[data-badge] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; color: #fff; }
.planner-badges .tag[data-badge=cheapest] { background: #087d58; }
.planner-badges .tag[data-badge=fastest] { background: #1d4b8f; }
.planner-badges .tag[data-badge=comfortable] { background: #a14d0c; }
.planner-badges .tag[data-badge]::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--badge-icon) center / contain no-repeat; mask: var(--badge-icon) center / contain no-repeat; }
.planner-badges .tag[data-badge=cheapest] { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M2 2.5v5l6.5 6.5 5-5L7 2.5z'/%3E%3Ccircle cx='5' cy='5.5' r='1.1'/%3E%3C/svg%3E"); }
.planner-badges .tag[data-badge=fastest] { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='9' r='5.5'/%3E%3Cpath d='M8 9V6.2M6.3 1.6h3.4M12.4 4.2l1-1'/%3E%3C/svg%3E"); }
.planner-badges .tag[data-badge=comfortable] { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8V5.5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2V8'/%3E%3Cpath d='M2 12.5v-3a1.5 1.5 0 0 1 3 0v1h6v-1a1.5 1.5 0 0 1 3 0v3zM4 12.5V14M12 12.5V14'/%3E%3C/svg%3E"); }
.planner-option-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.planner-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0; }
.planner-facts > div { min-width: 0; padding: 10px 12px; border-radius: 7px; background: #fff; border: 1px solid #e3ebf4; }
.planner-option:not(.is-first) .planner-fact-cost { grid-column: 1 / -1; }
.planner-option.is-first .planner-facts > div { border-color: #d6efe2; }
.planner-facts dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.planner-facts dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.planner-facts dd small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.planner-leave dd .text-link { font-size: inherit; font-weight: inherit; line-height: 1.3; }
.planner-leave dd strong { display: block; font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; }
.planner-cost-unknown { font-weight: 400; color: var(--muted); }
.planner-flags { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.planner-details { font-size: 13px; }
.planner-details summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.planner-steps { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.planner-steps li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #e8eef6; }
.planner-step-minutes { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.planner-assumptions { margin: 6px 0 0; color: var(--muted); }
.planner-option-link { margin: 0; }
.planner-parking-cta { min-height: 44px; font-size: 15px; }
.planner-parking-cta::after { content: "→"; font-size: 17px; }
.planner-notes { margin-top: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.planner-notes .planner-location-note { color: var(--ink); font-size: 14px; }
/* The notes are no card, so the evidence lines keep to the column instead of stepping out by a card's padding (360px scrolled sideways). */
.planner-notes > .card-evidence { margin: 0; padding-inline: 0; }
@media (max-width: 900px) {
  .planner-layout { grid-template-columns: minmax(0, 1fr); }
  .planner-params { position: static; }
}
@media (max-width: 600px) {
  /* The flight and parking tabs' gap on a phone (.flight-search), so the three panels are the same height. */
  .planner-form-hero, .search-box .planner-form-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .planner-form-hero .planner-from { grid-column: auto; }
  .planner-form-card { flex-wrap: wrap; }
  .planner-form-card .button { width: 100%; }
  .planner-section-body { grid-template-columns: minmax(0, 1fr); }
}
/* The planner's start picker and the fields' clear buttons (planner.js, data-combobox and data-clearable). */
.combobox, .field-clearable { position: relative; display: block; min-width: 0; }
.planner-form-hero .combobox, .planner-form-card .combobox { flex: 1; }
.combobox input, .field-clearable input { padding-right: 40px; text-overflow: ellipsis; }
.planner-form-hero .combobox input, .planner-form-card .combobox input { width: 100%; min-width: 0; height: 44px; padding: 0 44px 0 14px; border: 1px solid #ccd8e9; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.combobox input::placeholder { text-overflow: ellipsis; }
.combobox .combobox-native { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.field-clear { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transform: translateY(-50%); }
.field-clear:hover { background: var(--sky); color: var(--ink); }
.field-clearable input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
/* A time or a number keeps its own picker icon or arrows at the right edge: the × sits just left of them. */
.field-clearable-time input, .field-clearable-number input { padding-right: 10px; }
.field-clearable-time .field-clear, .field-clearable-number .field-clear { right: 30px; width: 28px; height: 28px; }
.combobox-popup { position: fixed; z-index: 1000; display: flex; flex-direction: column; max-height: var(--combobox-room, 320px); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px #091e3e2e; color: var(--ink); font-size: 14px; line-height: 1.3; }
.combobox-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.combobox-group { position: sticky; top: 0; z-index: 1; padding: 7px 12px 5px; background: var(--sky-soft); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.combobox-option { padding: 9px 12px; cursor: pointer; overflow-wrap: anywhere; }
.combobox-option:hover { background: var(--sky); }
.combobox-option.is-active { background: var(--sky-strong); box-shadow: inset 3px 0 0 var(--blue); }
.combobox-option.is-chosen { font-weight: 700; }
.combobox-option mark { background: none; color: var(--blue-strong); font-weight: 700; }
.combobox-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--sky-soft); color: var(--muted); font-size: 12px; }
@media (max-width: 600px), (pointer: coarse) {
  .combobox-option { min-height: 44px; padding-block: 13px; }
  .field-clear { width: 40px; height: 40px; right: 2px; }
  .field-clearable-time .field-clear, .field-clearable-number .field-clear { right: 28px; width: 32px; height: 36px; }
}