:root {
  /* Brand: OCCT blue / navy */
  --brand:        #1a6fba;
  --brand-dark:   #134e86;
  --brand-darker: #0C2340;
  --brand-600:    #2684d4;
  --brand-tint:   #e8f2fb;
  --banner-line:  #bcd6f0;

  /* Ink + cool neutral scale */
  --ink:      #16202b;
  --ink-2:    #3b4756;
  --ink-3:    #667180;
  --line:     #d7dde3;
  --line-2:   #e6eaee;
  --paper:    #ffffff;
  --surf:     #f4f6f8;
  --surf-2:   #e9edf1;

  /* Status: the only saturated colors */
  --run:      #1a7f43;   --run-bg:   #e5f2ea;
  --warn:     #9a5b06;   --warn-bg:  #fbefd7;
  --off:      #5b6560;   --off-bg:   #eceeec;
  --info:     #5b21b6;   --info-bg:  #f1edfb;

  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head: 'Overpass', 'Public Sans', system-ui, sans-serif;
  --r:  6px;
  --r-sm: 4px;
}

/* ── DARK THEME TOKENS ── */
:root[data-theme="dark"] {
  --brand:        #5aa5e8;
  --brand-dark:   #8ec4f0;
  --brand-600:    #6cb1ec;
  --brand-tint:   #152a40;
  --banner-line:  #29486b;

  --ink:      #e8edf3;
  --ink-2:    #c0cad6;
  --ink-3:    #8b9aab;
  --line:     #2b3746;
  --line-2:   #223040;
  --paper:    #131c26;
  --surf:     #0d151e;
  --surf-2:   #1f2b39;

  --run:      #57c584;   --run-bg:   #10281a;
  --warn:     #e2a842;   --warn-bg:  #2b2110;
  --off:      #9aa5a0;   --off-bg:   #1c2320;
  --info:     #bb9df2;   --info-bg:  #231b36;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Legacy shared.css tokens remapped in dark so any un-rewritten rule
   (old text/border/surface colors) stays readable. --navy is NOT remapped:
   it is chrome background (nav, footer) and must stay navy. */
:root[data-theme="dark"] {
  --white:      #131c26;
  --off-white:  #0d151e;
  --gray-100:   #223040;
  --gray-200:   #2b3746;
  --gray-400:   #8b9aab;
  --gray-600:   #c0cad6;
  --gray-800:   #e8edf3;
  --blue:       #5aa5e8;
  --blue-bright:#6cb1ec;
  --blue-pale:  #152a40;
  --blue-muted: #29486b;
  --gold-light: #2b2110;
  --shadow: none;
}

/* ── BASE ── */
body { font-family: var(--font); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.6; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: #16202b; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3c4c5e; border-color: #16202b; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Neutralize shared.css's legacy card chrome (12px radius, shadow). Interior
   pages restyle .card as flat titled groups; boxes use .box / .sb-card. */
.card { background: transparent; border: none; border-radius: 0; box-shadow: none; }

/* ── NAV (navy bar, crisp; constant across themes) ── */
nav { background: var(--brand-darker); }
.nav-inner { height: 66px; }
.nav-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-right .nav-links { margin-right: 6px; }
.nav-links a { color: rgba(255,255,255,0.78); font-family: var(--font); font-weight: 500; font-size: 15px; border-radius: var(--r-sm); padding: 8px 13px; }
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,0.10); }
.nav-cta { background: #1a6fba !important; border-radius: var(--r-sm) !important; font-weight: 600 !important; }
.nav-cta:hover { background: #2684d4 !important; }
.nav-mobile { background: var(--brand-darker); }
.nav-mobile .mob-cta { background: #1a6fba !important; border-radius: var(--r-sm); }

/* ── THEME TOGGLE ── */
.theme-toggle { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--r-sm); color: rgba(255,255,255,0.85); cursor: pointer; transition: background .12s, border-color .12s; padding: 0; }
.theme-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .tt-sun { display: none; }
.theme-toggle .tt-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

/* ── PAGE TITLE BAND (interior pages) ── */
.page-header { background: var(--brand-darker); padding: 24px 24px 22px; }
.page-header-inner { max-width: 1180px; margin: 0 auto; padding: 0; }
.breadcrumb { font-size: 13px; margin-bottom: 8px; }
.page-header h1 { font-family: var(--head); font-weight: 800; font-size: clamp(24px, 3.6vw, 32px); letter-spacing: -0.02em; line-height: 1.05; color: #fff; }
.page-header .lede { font-size: 15px; color: rgba(255,255,255,0.75); margin-top: 8px; max-width: 66ch; }
.page-header p { margin-top: 4px; line-height: 1.5; }
.page-header-title { align-items: flex-start; }
/* Badge box tracks its own text height (Overpass's tall default line-height
   otherwise makes the badge ~13px taller than the h1, and on route pages the
   sibling descriptor <p> then sits below that slack, opening a gap). */
.page-header-title .route-badge-lg { line-height: 1; align-self: flex-start; }

/* ── SECTION SCAFFOLD ── */
.section { padding: 30px 0; }
.section--alt { background: var(--surf); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--alt + .section--alt { border-top: none; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 13px; flex-wrap: wrap; }
.sec-title { font-family: var(--head); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 11px; }
.sec-eyebrow { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sec-link { font-family: var(--font); font-weight: 600; font-size: 14px; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sec-link:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.sec-link svg { width: 14px; height: 14px; }
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }

/* ── PROSE (long-form text on interior pages) ── */
.prose { max-width: 72ch; }
.prose p { font-size: 15px; color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0 0 12px 20px; font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* ── BANNER (full box, no accent rail) ── */
.banner { background: var(--brand-tint); border: 1px solid var(--banner-line); border-radius: var(--r); padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.banner strong { color: var(--ink); font-weight: 700; }
.banner a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── AMBER NOTICE BOX ── */
.notice-box { background: var(--warn-bg); border: 1px solid #e0c48f; border-radius: var(--r); padding: 13px 16px; font-size: 14px; color: #5c3a00; line-height: 1.55; }
.notice-box strong { color: #3a2a00; font-weight: 700; }
.notice-box a { color: #7a4805; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .notice-box { border-color: #4d3d1a; color: #e3cf9d; }
:root[data-theme="dark"] .notice-box strong { color: #f0dfae; }
:root[data-theme="dark"] .notice-box a { color: #eebd63; }

/* ── STATUS CHIPS ── */
.chip { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }
.chip-run { color: var(--run); background: var(--run-bg); }
.chip-eve { color: var(--warn); background: var(--warn-bg); }
.chip-int { color: var(--info); background: var(--info-bg); }
.chip-off { color: var(--off); background: var(--off-bg); }

/* ── FILE-TYPE BADGE ── */
.fbadge { font-family: var(--head); font-weight: 800; font-size: 11px; letter-spacing: .05em; background: var(--surf-2); color: var(--ink-2); border-radius: var(--r-sm); padding: 6px 8px; flex-shrink: 0; }

/* ── BOX (headed panel) ── */
.box { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.box-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: var(--ink); }
:root[data-theme="dark"] .box-head { background: #0a121c; border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .sb-card-head { background: #0a121c; border-bottom: 1px solid var(--line); }
.box-head svg { width: 18px; height: 18px; color: rgba(255,255,255,0.7); flex-shrink: 0; }
.box-head h3 { font-family: var(--head); font-weight: 700; font-size: 15px; color: #fff; }
.box-body { padding: 13px 15px 14px; }
.box-body p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 11px; }
.box-body p:last-child { margin-bottom: 0; }

/* ── FACT ROWS (icon + label + text) ── */
.fact { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.fact:last-child { border-bottom: none; }
.fact-ic { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surf); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fact-ic svg { width: 17px; height: 17px; }
.fact-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.fact-text strong { display: block; color: var(--ink); font-weight: 700; font-size: 14px; margin-bottom: 1px; }

/* ── QUICK-LINK TILES ── */
.ql-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ql { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, background .12s; background: var(--paper); }
.ql:hover { border-color: var(--brand); background: var(--brand-tint); }
.ql-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surf); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ql:hover .ql-ic { background: var(--paper); }
.ql-ic svg { width: 19px; height: 19px; }
.ql-title { font-family: var(--head); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.ql-desc { font-size: 13px; color: var(--ink-3); line-height: 1.4; }

/* ── SOLID BUTTONS (constant brand blue in both themes: white text needs the deep blue) ── */
.btn-box { display: block; text-align: center; font-family: var(--font); font-weight: 600; font-size: 14px; padding: 10px; border-radius: var(--r-sm); background: #1a6fba; color: #fff; text-decoration: none; transition: background .12s; border: none; cursor: pointer; }
.btn-box:hover { background: #2684d4; }
.btn-box + .btn-box { margin-top: 8px; }

/* ── DATA TABLE (directory / rates) ── */
.dtable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); }
.dtable caption { text-align: left; font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 8px; }
.dtable th { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-align: left; color: var(--ink-3); background: var(--surf); padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; }
.dtable tr:last-child td { border-bottom: none; }
.dtable td strong { color: var(--ink); font-weight: 600; }
.dtable a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dtable .tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── NUMBERED STEPS (real sequences only) ── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line-2); counter-increment: step; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.steps li:last-child { border-bottom: none; }
.steps li::before { content: counter(step); font-family: var(--head); font-weight: 800; font-size: 13px; color: #fff; background: var(--brand-darker); width: 26px; height: 26px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
:root[data-theme="dark"] .steps li::before { background: var(--surf-2); color: var(--ink); }
.steps strong { color: var(--ink); font-weight: 700; }
.steps a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── FOOTER ── */
footer { background: var(--brand-darker); }

/* ── DARK PATCHES for components whose literals can't token-flip ── */
:root[data-theme="dark"] .alert-bar { background: #241c07; border-bottom-color: #8a6a1f; }
:root[data-theme="dark"] .alert-bar-inner p { color: #ecd9a8; }
:root[data-theme="dark"] .alert-bar-inner a { color: #f2c569; }
:root[data-theme="dark"] .alert-bar-inner svg { color: #d9ab4a; }
:root[data-theme="dark"] .banner { border-color: var(--banner-line); }
:root[data-theme="dark"] .btn-primary { color: #134e86; }
:root[data-theme="dark"] .hire { background: #1a6fba; }
:root[data-theme="dark"] .btn-hire { color: #134e86; }
:root[data-theme="dark"] .board-card.live .board-ic { background: #1a6fba; color: #fff; }
:root[data-theme="dark"] .staffing { border-color: #4d3d1a; color: #e3cf9d; }
:root[data-theme="dark"] .staffing strong { color: #f0dfae; }
:root[data-theme="dark"] .box-lost { border-color: #8a6a1f; }
:root[data-theme="dark"] .box-lost .box-head { background: #9a5b06; }
:root[data-theme="dark"] .box-lost p { color: #e3cf9d; }
:root[data-theme="dark"] .btn-lost { background: #9a5b06; color: #fff; }
:root[data-theme="dark"] .btn-lost:hover { background: #7a4805; }
:root[data-theme="dark"] .hero-bg { opacity: 0.10; }
:root[data-theme="dark"] .callout { border-color: #4d3d1a; color: #e3cf9d; }
:root[data-theme="dark"] .callout strong { color: #f0dfae; }
:root[data-theme="dark"] .callout-night { background: #231b36; border-color: #4a3672; color: #cdbdf0; }
.callout.callout-warn { background: #fff0f0; border-color: #e08080; color: #6b1a1a; }
:root[data-theme="dark"] .callout-warn,
:root[data-theme="dark"] .callout.callout-warn { background: #2d1414; border-color: #6e2f2f; color: #eebcbc; }
:root[data-theme="dark"] .sb-notice { background: #2b2110; border-color: #4d3d1a; color: #e3cf9d; }
:root[data-theme="dark"] .svc-tag.svc-green { background: rgba(87,197,132,0.15); color: #57c584; }
:root[data-theme="dark"] .sched-info { background: #12291b; border-color: #2c5a3a; color: #a9dcb9; }
:root[data-theme="dark"] .stop-badge.loop { background: rgba(87,197,132,0.15); color: #57c584; }
:root[data-theme="dark"] .sb-notice.sb-notice-warn { background: #2d1414; border-color: #6e2f2f; color: #eebcbc; }
:root[data-theme="dark"] .period-label.after { background: #2d1414; border-color: #6e2f2f; color: #ef8b8b; }
:root[data-theme="dark"] .variant-head.after { background: #2d1414; color: #ef8b8b; }

/* ── LATE NITE dark theme (WS/DCL): the light-lavender tint becomes deep purple ── */
:root[data-theme="dark"] .svc-toggle-btn.active .svc-toggle-label { color: var(--ink); }
:root[data-theme="dark"] .svc-toggle-btn.active { border-color: var(--brand); box-shadow: none; background: var(--brand-tint); }
:root[data-theme="dark"] .svc-toggle-btn.active .svc-toggle-icon { background: var(--surf-2); }
:root[data-theme="dark"] .svc-toggle-btn.active .svc-toggle-icon svg { color: var(--brand); }
:root[data-theme="dark"] .svc-toggle-btn.ln-active { background: #241b38; border-color: #7c3aed; box-shadow: none; }
:root[data-theme="dark"] .svc-toggle-btn.ln-active .svc-toggle-icon { background: #35265a; }
:root[data-theme="dark"] .svc-toggle-btn.ln-active .svc-toggle-icon svg { color: #b795f0; }
:root[data-theme="dark"] .svc-toggle-btn.ln-active .svc-toggle-label { color: #d9c9f6; }
:root[data-theme="dark"] .svc-toggle-btn.ln-active .svc-toggle-sub { color: #b795f0; }
:root[data-theme="dark"] .latenite-tint { background: #1b1230; border-color: #3f2d66; }
:root[data-theme="dark"] .latenite-tint .stop-scroll { background: #221741; border-color: #3f2d66; }
:root[data-theme="dark"] .latenite-tint .stop-row { border-color: #35265a; }
:root[data-theme="dark"] .latenite-tint .stop-row:hover { background: #2a1d4d; }
:root[data-theme="dark"] .latenite-tint .stop-name { color: #e5dcf8; }
:root[data-theme="dark"] .latenite-tint .stop-sub { color: #b795f0; }
:root[data-theme="dark"] .latenite-tint .dir-btn { background: #221741; border-color: #3f2d66; }
:root[data-theme="dark"] .latenite-tint .dir-btn .dir-label { color: #e5dcf8; }
:root[data-theme="dark"] .latenite-tint .dir-btn .dir-desc,
:root[data-theme="dark"] .latenite-tint .dir-btn .dir-arrow { color: #b795f0; }
:root[data-theme="dark"] .latenite-tint .dir-btn:hover { background: #2a1d4d; border-color: #5b21b6; }
:root[data-theme="dark"] .latenite-tint .sched-tab { background: #221741; border-color: #3f2d66; color: #cdbdf0; }
:root[data-theme="dark"] .latenite-tint .sched-table td { border-color: #35265a; }
:root[data-theme="dark"] .latenite-tint .sched-table tr:nth-child(even) td { background: #221741; }
:root[data-theme="dark"] .latenite-tint .sched-table td:first-child { color: #cdbdf0; }
:root[data-theme="dark"] .latenite-tint .ln-section-label { color: #b795f0; }
.ln-fee-note { font-size: 13px; color: #6b1a1a; line-height: 1.6; padding: 9px 22px; background: #fff8f8; margin: 0 -22px; list-style: none; }
:root[data-theme="dark"] .ln-fee-note { background: #2d1414; color: #eebcbc; }
:root[data-theme="dark"] .ql:hover .ql-ic { background: var(--surf-2); }
:root[data-theme="dark"] .btn-box { background: #1a6fba; color: #fff; }
:root[data-theme="dark"] .btn-box:hover { background: #2684d4; }

/* ── RESPONSIVE (shared breakpoints) ── */
@media (max-width: 940px) {
  .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; }
  .footer-links { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 620px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .section { padding: 24px 0; }
  .page-header { padding: 20px 16px 18px; }
  .wrap { padding: 0 16px; }
}