:root {
  --ink: #14242c;
  --ink-soft: #40515a;
  --sea-950: #0b2732;
  --sea-850: #103b47;
  --sea-750: #124f5d;
  --sea-650: #1b6673;
  --sea-100: #e5f0f2;
  --forest-700: #466657;
  --forest-100: #eaf0ec;
  --terracotta-700: #98543f;
  --terracotta-100: #f4eae6;
  --mist: #eaf0f2;
  --paper: #ffffff;
  --surface-soft: #f7f9f9;
  --line: #d7e0e3;
  --muted: #6a7980;
  --success: #2f7452;
  --warning: #a46b1f;
  --danger: #a44343;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-shell: 0 12px 38px rgba(11, 39, 50, 0.1);
  --shadow-card: 0 5px 18px rgba(11, 39, 50, 0.06);
  --font: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--sea-750); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--sea-850); }

.app-root { min-height: 100dvh; }

.site-shell {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  min-height: 100dvh;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  display: flex;
  flex-direction: column;
}

.content-inner {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.site-main { flex: 1 0 auto; padding-bottom: 2.5rem; }
.site-footer { margin-top: auto; flex-shrink: 0; background: var(--sea-950); color: #d7e6ea; }

.admin-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #07161c;
  color: #dce9ed;
  font-size: .88rem;
}
.admin-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  padding: .45rem 0;
}
.admin-bar a { color: #fff; text-decoration: none; }
.admin-bar a:hover { color: var(--sea-100); }

.site-header {
  background: var(--sea-950);
  color: #edf5f7;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0 .55rem;
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.brand-name { font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.1; }
.brand-tag { font-size: .72rem; color: #9fb4bb; margin-top: .15rem; }
.header-search { flex: 1; max-width: 420px; }
.header-search input {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1rem;
  font: inherit;
  background: rgba(255,255,255,.1);
  color: #fff;
}
.header-search input::placeholder { color: #a8bcc3; }
.nav-toggle {
  display: none;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: .45rem .7rem;
  font: inherit;
}
.site-nav ul {
  list-style: none; margin: 0; padding: 0 0 .85rem;
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
}
.site-nav a {
  color: #c5d6db; text-decoration: none; font-weight: 650; font-size: .95rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav a.is-primary {
  color: #fff;
}
.site-nav a.is-primary { color: #fff; border-bottom: 2px solid var(--terracotta-700); padding-bottom: .1rem; }

.hero-search {
  padding: 2.2rem 0 1.4rem;
}
.hero-search h1 {
  margin: 0 0 .55rem;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  letter-spacing: -.03em;
  line-height: 1.15;
}
.hero-search .lead { margin: 0 0 1.1rem; color: var(--ink-soft); max-width: 46ch; }
.search-box {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: stretch;
}
.search-box input {
  flex: 1 1 240px;
  min-height: 3.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  font: inherit;
  background: var(--surface-soft);
}
.search-results {
  margin-top: .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  display: none;
}
.search-results.is-open { display: block; }
.search-results a {
  display: block; padding: .7rem .9rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover { background: var(--sea-100); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: .65rem 1.1rem; border-radius: 999px;
  border: 1px solid transparent; font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--sea-750); color: #fff; }
.btn-primary:hover { background: var(--sea-850); color: #fff; }
.btn-secondary { background: var(--forest-100); color: var(--forest-700); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }

.section { padding: 1.6rem 0; }
.section-title { margin: 0 0 .6rem; font-size: 1.35rem; letter-spacing: -.02em; }
.section-lead { margin: 0 0 1rem; color: var(--ink-soft); max-width: 55ch; }

.grid-2 {
  display: grid; gap: 1rem;
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1.2fr .8fr; }
  .desktop-only-sidebar { display: block; }
}

.card-soft {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.05rem;
  box-shadow: var(--shadow-card);
}
.card-soft h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.card-soft p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.link-list a { text-decoration: none; font-weight: 650; color: var(--ink); }
.link-list a:hover { color: var(--sea-750); }

.notice {
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  background: var(--terracotta-100);
  color: var(--ink);
  border: 1px solid #e5d0c8;
  font-size: .94rem;
}
.notice-info { background: var(--sea-100); border-color: #c9dde2; }
.notice-ok { background: #e8f4ec; border-color: #c5dfd0; color: var(--success); }
.notice-err { background: #f8eaea; border-color: #e5c7c7; color: var(--danger); }

.route-row {
  display: flex; flex-wrap: wrap; gap: .55rem 1rem; align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.route-code {
  display: inline-flex; min-width: 3rem; justify-content: center;
  background: var(--sea-950); color: #fff; border-radius: var(--radius-sm);
  font-weight: 800; padding: .25rem .45rem; margin-right: .45rem;
}
.route-name { font-weight: 700; }

.next-card {
  background: var(--sea-100);
  border: 1px solid rgba(27,102,115,.28);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: inset 4px 0 0 var(--terracotta-700);
  margin: 1rem 0;
}
.next-card .label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sea-750); }
.next-card .time { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: .25rem 0; }
.next-card .meta { color: var(--ink-soft); }

.segment {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0;
}
.segment a, .segment button {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: .45rem .85rem;
  font: inherit;
  font-weight: 650;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
}
.segment a.is-active, .segment button.is-active {
  background: var(--sea-750);
  border-color: var(--sea-750);
  color: #fff;
}

.departures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
  margin: 1rem 0;
}
.departure {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: .7rem .35rem;
  min-height: 44px;
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.departure--past { opacity: .45; }
.departure--next {
  background: var(--sea-100);
  color: var(--sea-950);
  border: 1px solid rgba(27,102,115,.35);
  box-shadow: inset 4px 0 0 var(--terracotta-700);
  font-weight: 750;
}

.meta-line { font-size: .92rem; color: var(--muted); margin: .35rem 0; }
.breadcrumb { font-size: .9rem; color: var(--muted); margin: 1rem 0 .5rem; }
.breadcrumb a { color: var(--sea-650); text-decoration: none; }

.article { max-width: 72ch; }
.article h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.03em; margin: .4rem 0 .8rem; }
.article h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.article p, .article li { color: var(--ink-soft); }

.footer-grid {
  display: grid; gap: 1.4rem;
  padding: 2rem 0 1.2rem;
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.footer-grid h3 { margin: 0 0 .55rem; color: #fff; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.footer-grid a { color: #b9ccd2; text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-brand { font-weight: 800; color: #fff; font-size: 1.1rem; margin: 0 0 .35rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1rem 0 1.4rem;
  font-size: .86rem;
  color: #8fa6ae;
}
.footer-disclaimer { margin: 0 0 .55rem; max-width: 90ch; }

.mobile-bottom-nav {
  display: none;
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  z-index: 40;
}
.mobile-bottom-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem;
}
.mobile-bottom-nav a {
  display: grid; place-items: center; text-decoration: none; color: var(--ink-soft);
  font-size: .72rem; font-weight: 700; padding: .45rem .2rem; border-radius: var(--radius-sm);
}
.mobile-bottom-nav a[aria-current="page"] { color: var(--sea-750); background: var(--sea-100); }

.form-grid { display: grid; gap: .85rem; max-width: 40rem; }
.field label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .92rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: .75rem .9rem; font: inherit; background: var(--paper);
}
.field textarea { min-height: 9rem; resize: vertical; }
.hp { position: absolute; left: -10000px; opacity: 0; height: 0; overflow: hidden; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.ad-slot {
  min-height: 90px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: var(--muted);
  font-size: .85rem;
  background: var(--surface-soft);
  margin: 1.25rem 0;
}

.layout-desktop .tablet-only,
.layout-desktop .mobile-only { display: none; }
.layout-tablet .desktop-only { display: none; }
.layout-mobile .desktop-only,
.layout-mobile .tablet-only { display: none; }

body.device-mobile .site-shell { width: 100%; box-shadow: none; }
body.device-mobile .content-inner { width: calc(100% - 28px); }
body.device-mobile .departures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.device-mobile .nav-toggle { display: inline-flex; }
body.device-mobile .site-nav { display: none; }
body.device-mobile .site-nav.is-open { display: block; }
body.device-mobile .site-nav ul { flex-direction: column; padding-bottom: 1rem; }
body.device-mobile .header-search { display: none; }
body.device-mobile .mobile-bottom-nav { display: block; }
body.device-mobile .hero-search { padding-top: 1.3rem; }

body.device-tablet .site-shell { width: calc(100% - 24px); }
body.device-tablet .content-inner { width: calc(100% - 36px); }
body.device-tablet .departures { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .site-shell { width: calc(100% - 24px); }
  .content-inner { width: calc(100% - 36px); }
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; background: var(--sea-950); color: #fff; padding: .5rem .75rem; z-index: 100;
}
.skip-link:focus { top: 1rem; }