/* Bus Traffic Fever Guide v7 — flat traffic-dispatch visual system. */

:root {
  --dispatch-canvas: #f4f5f1;
  --dispatch-surface: #ffffff;
  --dispatch-ink: #182120;
  --dispatch-charcoal: #24302e;
  --dispatch-muted: #606a66;
  --dispatch-line: #d6dad3;
  --dispatch-line-strong: #b7c0b7;
  --dispatch-pink: #e65d87;
  --dispatch-pink-soft: #fbe8ee;
  --dispatch-yellow: #f2c94c;
  --dispatch-yellow-soft: #fff7d9;
  --dispatch-blue: #3478b9;
  --dispatch-blue-soft: #e9f1f8;
  --dispatch-teal: #26958d;
  --dispatch-teal-soft: #e5f4f1;
  --dispatch-red: #c7494e;
  --dispatch-radius: 6px;
  --dispatch-radius-sm: 4px;
  --level-tabs-collapsed-height: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.btf-theme {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--dispatch-canvas);
  color: var(--dispatch-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
.btf-theme a { color: inherit; }
.btf-theme button, .btf-theme input, .btf-theme textarea, .btf-theme select { font: inherit; }
.btf-theme img, .btf-theme video { max-width: 100%; }
.btf-theme [hidden] { display: none !important; }
.btf-theme :focus-visible { outline: 3px solid var(--dispatch-yellow); outline-offset: 3px; }
.dispatch-container { width: min(100% - 40px, 1180px); margin-inline: auto; }
.dispatch-main { min-height: 60vh; }
.dispatch-section { padding: 72px 0; }
.dispatch-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-160%);
  border: 2px solid var(--dispatch-ink); border-radius: var(--dispatch-radius-sm);
  background: var(--dispatch-yellow); padding: 9px 13px; color: var(--dispatch-ink); font-weight: 800;
}
.dispatch-skip-link:focus { transform: translateY(0); }

/* Header */
.dispatch-header {
  position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--dispatch-line);
  background: rgba(255,255,255,.98);
}
.dispatch-nav { position: relative; display: flex; min-height: 72px; align-items: center; gap: 24px; }
.dispatch-brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; text-decoration: none; }
.dispatch-brand-mark { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; }
.dispatch-brand-copy { display: grid; min-width: 0; line-height: 1.08; }
.dispatch-brand-copy strong { color: var(--dispatch-ink); font-size: .94rem; letter-spacing: -.01em; }
.dispatch-brand-copy span { margin-top: 4px; color: var(--dispatch-muted); font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-desktop-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dispatch-nav-link { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; padding: 0 11px; color: #39433f; font-size: .86rem; font-weight: 750; text-decoration: none; }
.dispatch-nav-link:hover { border-bottom-color: var(--dispatch-pink); color: var(--dispatch-ink); }
.dispatch-nav-jump { display: flex; height: 44px; align-items: center; overflow: hidden; border: 1px solid var(--dispatch-line-strong); border-radius: var(--dispatch-radius-sm); background: #fff; }
.dispatch-nav-jump label { padding-left: 10px; color: var(--dispatch-muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dispatch-nav-jump input { width: 50px; height: 100%; border: 0; background: transparent; padding: 0 7px; color: var(--dispatch-ink); font-weight: 800; outline: 0; }
.dispatch-nav-jump button { width: 44px; height: 100%; border: 0; border-left: 1px solid var(--dispatch-line); background: var(--dispatch-charcoal); color: #fff; cursor: pointer; }
.dispatch-menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--dispatch-line); border-radius: var(--dispatch-radius-sm); background: #fff; color: var(--dispatch-ink); cursor: pointer; }
.dispatch-mobile-menu { position: absolute; top: calc(100% + 1px); right: 0; left: 0; border: 1px solid var(--dispatch-line); border-top: 0; background: #fff; padding: 14px; }
.dispatch-mobile-links { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--dispatch-line); }
.dispatch-mobile-links a { min-height: 46px; display: flex; align-items: center; border-right: 1px solid var(--dispatch-line); border-bottom: 1px solid var(--dispatch-line); padding: 0 13px; font-size: .87rem; font-weight: 750; text-decoration: none; }
.dispatch-mobile-links a:nth-child(2n) { border-right: 0; }
.dispatch-mobile-links a:nth-last-child(-n+2) { border-bottom: 0; }
.dispatch-mobile-jump { margin-top: 12px; }
.dispatch-mobile-jump label { display: block; margin-bottom: 6px; color: var(--dispatch-muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.dispatch-mobile-jump div { display: flex; }
.dispatch-mobile-jump input { min-width: 0; flex: 1; border: 1px solid var(--dispatch-line-strong); border-right: 0; border-radius: var(--dispatch-radius-sm) 0 0 var(--dispatch-radius-sm); padding: 11px; }
.dispatch-mobile-jump button { border: 1px solid var(--dispatch-charcoal); border-radius: 0 var(--dispatch-radius-sm) var(--dispatch-radius-sm) 0; background: var(--dispatch-charcoal); padding: 0 17px; color: #fff; font-weight: 800; }
.level-jump-input.is-invalid { border-color: var(--dispatch-red) !important; background: #fff4f4 !important; }

/* Shared typography and controls */
.dispatch-overline { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: var(--dispatch-muted); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.dispatch-overline > span { width: 25px; height: 4px; background: var(--dispatch-pink); }
.dispatch-overline-light { color: #d8e0dc; }
.dispatch-overline-light > span { background: var(--dispatch-yellow); }
.dispatch-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: var(--dispatch-radius-sm); padding: 10px 16px; font-size: .84rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.dispatch-button-dark { border-color: var(--dispatch-charcoal); background: var(--dispatch-charcoal); color: #fff !important; }
.dispatch-button-dark:hover { border-color: var(--dispatch-teal); background: var(--dispatch-teal); }
.dispatch-button-light { border-color: var(--dispatch-line-strong); background: #fff; color: var(--dispatch-ink) !important; }
.dispatch-button-light:hover { border-color: var(--dispatch-blue); color: var(--dispatch-blue) !important; }
.dispatch-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--dispatch-blue) !important; font-size: .86rem; font-weight: 800; text-decoration: none; }
.dispatch-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.dispatch-status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--dispatch-teal); box-shadow: 0 0 0 4px var(--dispatch-teal-soft); }
.dispatch-section-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: 50px; align-items: end; margin-bottom: 28px; }
.dispatch-section-header h2 { max-width: 680px; margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; line-height: 1.08; }
.dispatch-section-header > p { margin: 0; color: var(--dispatch-muted); font-size: .93rem; }

/* Footer */
.dispatch-footer { position: relative; border-top: 6px solid var(--dispatch-yellow); background: var(--dispatch-charcoal); color: #edf1ee; }
.dispatch-footer-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(160px, .7fr)); gap: 54px; padding: 52px 0 42px; }
.dispatch-footer-intro > p { max-width: 570px; margin: 18px 0 0; color: #bfc9c4; font-size: .88rem; }
.dispatch-footer-brand { display: flex; align-items: center; gap: 11px; }
.dispatch-footer-brand img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: var(--dispatch-radius-sm); }
.dispatch-footer-brand div { display: grid; line-height: 1.1; }
.dispatch-footer-brand strong { font-size: .95rem; }
.dispatch-footer-brand span { margin-top: 5px; color: #aeb9b3; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-footer h2 { margin: 0 0 13px; color: var(--dispatch-yellow); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.dispatch-footer ul { margin: 0; padding: 0; list-style: none; }
.dispatch-footer li + li { margin-top: 8px; }
.dispatch-footer li a { color: #dce4df; font-size: .83rem; text-decoration: none; overflow-wrap: anywhere; }
.dispatch-footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dispatch-footer-bottom { display: grid; grid-template-columns: .55fr 1.45fr; gap: 40px; border-top: 1px solid #46514e; padding: 20px 0 28px; color: #aeb9b3; font-size: .72rem; }
.dispatch-footer-bottom p { margin: 0; }

/* Page headers */
.dispatch-page-head { border-bottom: 1px solid var(--dispatch-line); background: #fff; padding: 62px 0 54px; }
.dispatch-page-head-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 70px; align-items: end; }
.dispatch-page-head h1 { max-width: 760px; margin: 0; color: var(--dispatch-ink); font-size: clamp(2.25rem, 5vw, 4.35rem); font-weight: 880; letter-spacing: -.055em; line-height: .98; }
.dispatch-page-head-copy { border-left: 4px solid var(--dispatch-yellow); padding-left: 22px; }
.dispatch-page-head-copy > p { margin: 0; color: var(--dispatch-muted); font-size: .94rem; line-height: 1.7; }
.dispatch-page-code { display: block; margin-top: 17px; color: var(--dispatch-blue); font-size: .67rem; font-weight: 850; letter-spacing: .13em; }
.dispatch-updated { display: inline-flex; margin: 20px 0 0; border: 1px solid var(--dispatch-line); background: var(--dispatch-canvas); padding: 6px 9px; color: var(--dispatch-muted); font-size: .73rem; font-weight: 750; }
.dispatch-library-head h1, .dispatch-legal-head h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); }
.dispatch-page-head-copy dl { display: flex; gap: 28px; margin: 20px 0 0; }
.dispatch-page-head-copy dl div { display: grid; }
.dispatch-page-head-copy dt { color: var(--dispatch-muted); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-page-head-copy dd { margin: 2px 0 0; color: var(--dispatch-ink); font-size: 1.2rem; font-weight: 850; }

/* Range controls and level directory */
.dispatch-range-strip { border-bottom: 1px solid var(--dispatch-line); background: #fff; padding: 18px 0; }
.level-tabs-collapse { --level-tabs-collapsed-height: 104px; }
.level-tabs-panel { overflow: hidden; transition: max-height .2s ease; }
.level-tabs-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.level-range-tab, .level-tabs-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dispatch-line-strong); border-radius: var(--dispatch-radius-sm); background: #fff; padding: 8px 12px; color: #46514d; font-size: .76rem; font-weight: 820; cursor: pointer; }
.level-range-tab:hover { border-color: var(--dispatch-blue); color: var(--dispatch-blue); }
.level-range-tab.active { border-color: var(--dispatch-charcoal); background: var(--dispatch-charcoal); color: #fff; }
.level-tabs-toggle { margin-top: 9px; color: var(--dispatch-blue); }
.level-tabs-collapse:not(.has-overflow) .level-tabs-toggle { display: none; }
.level-tabs-collapse.has-overflow .level-tabs-toggle.hidden { display: inline-flex !important; }
.level-tabs-collapse.is-expanded .level-tabs-toggle i { transform: rotate(180deg); }
.dispatch-level-directory { background: #fff; }
.dispatch-range-control { margin-bottom: 20px; }
.dispatch-level-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--dispatch-line); border-left: 1px solid var(--dispatch-line); background: #fff; }
.dispatch-level-entry { min-width: 0; border-right: 1px solid var(--dispatch-line); border-bottom: 1px solid var(--dispatch-line); }
.dispatch-level-entry-link { min-height: 0; display: grid; grid-template-columns: minmax(50px, .65fr) minmax(58px, 1fr) 30px; grid-template-rows: auto 68px; gap: 0; align-items: center; padding: 0; color: var(--dispatch-ink); text-decoration: none; transition: background-color .14s ease; }
.dispatch-level-entry-link:hover { background: var(--dispatch-yellow-soft); }
.dispatch-level-thumb { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; grid-column: 1 / -1; grid-row: 1; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--dispatch-line); background: var(--dispatch-canvas); }
.dispatch-level-thumb img { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); max-width: none; max-height: none; object-fit: contain; object-position: center; }
.dispatch-level-thumb.is-missing::before { content: "\f207"; color: var(--dispatch-blue); font-family: "Font Awesome 6 Free"; font-size: 1.45rem; font-weight: 900; }
.dispatch-level-thumb.is-missing img { display: none; }
.dispatch-level-entry-copy { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; }
.dispatch-level-entry-copy > span { display: block; color: var(--dispatch-muted); font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dispatch-level-entry-copy h2, .dispatch-level-entry-copy h3 { margin: 2px 0 0; font-size: 1.28rem; line-height: 1; }
.dispatch-guide-format { height: 100%; display: grid; align-content: center; gap: 3px; color: var(--dispatch-muted); font-size: .64rem; font-weight: 750; }
.dispatch-guide-format span { display: flex; align-items: center; gap: 6px; }
.dispatch-guide-format i { width: 13px; color: var(--dispatch-teal); text-align: center; }
.dispatch-entry-arrow { width: 30px; height: 100%; display: grid; place-items: center; color: var(--dispatch-line-strong); font-size: .7rem; }
.dispatch-level-entry-link:hover .dispatch-entry-arrow { color: var(--dispatch-pink); }
.dispatch-level-index.is-loading { min-height: 220px; opacity: .48; pointer-events: none; }
.dispatch-section-action { margin-top: 22px; text-align: right; }
.dispatch-library-page { min-height: 480px; background: var(--dispatch-canvas); }
.dispatch-library-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--dispatch-line); border-bottom: 0; background: #fff; padding: 9px 12px; }
.dispatch-library-toolbar > div { display: flex; align-items: center; gap: 10px; }
.dispatch-library-toolbar strong { font-size: .82rem; }
.dispatch-library-toolbar > div > span:last-child { color: var(--dispatch-muted); font-size: .74rem; }
.dispatch-inline-jump { display: flex; align-items: center; }
.dispatch-inline-jump label { margin-right: 8px; color: var(--dispatch-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.dispatch-inline-jump input { width: 66px; min-height: 44px; border: 1px solid var(--dispatch-line-strong); border-right: 0; border-radius: var(--dispatch-radius-sm) 0 0 var(--dispatch-radius-sm); padding: 7px; }
.dispatch-inline-jump button { min-height: 44px; border: 1px solid var(--dispatch-charcoal); border-radius: 0 var(--dispatch-radius-sm) var(--dispatch-radius-sm) 0; background: var(--dispatch-charcoal); padding: 0 13px; color: #fff; font-size: .75rem; font-weight: 800; }
.dispatch-empty-state { grid-column: 1 / -1; display: grid; min-height: 260px; place-items: center; align-content: center; border: 1px solid var(--dispatch-line); background: #fff; padding: 34px; text-align: center; }
.dispatch-empty-state i { color: var(--dispatch-blue); font-size: 1.8rem; }
.dispatch-empty-state h2 { margin: 13px 0 4px; font-size: 1.1rem; }
.dispatch-empty-state p { margin: 0; color: var(--dispatch-muted); font-size: .84rem; }
.dispatch-pagination { display: flex; justify-content: center; margin-top: 28px; }
.dispatch-pagination .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dispatch-pagination a, .dispatch-pagination span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dispatch-line-strong); border-radius: var(--dispatch-radius-sm); background: #fff; padding: 6px 10px; font-size: .76rem; font-weight: 750; text-decoration: none; }
.dispatch-pagination .active span { border-color: var(--dispatch-charcoal); background: var(--dispatch-charcoal); color: #fff; }

/* About */
.dispatch-editorial-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.55fr); gap: 72px; align-items: start; }
.dispatch-editorial-rail { position: sticky; top: 102px; border-top: 6px solid var(--dispatch-pink); background: #fff; padding: 26px; }
.dispatch-rail-label { margin: 0 0 12px; color: var(--dispatch-blue); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dispatch-editorial-rail h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.035em; line-height: 1.12; }
.dispatch-editorial-rail > p:not(.dispatch-rail-label) { margin: 18px 0 22px; color: var(--dispatch-muted); font-size: .9rem; }
.dispatch-editorial-content { border-top: 1px solid var(--dispatch-line); }
.dispatch-editorial-content > section { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; border-bottom: 1px solid var(--dispatch-line); padding: 30px 0; }
.dispatch-section-number { color: var(--dispatch-pink); font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.dispatch-editorial-content h2 { margin: 0 0 13px; font-size: 1.35rem; letter-spacing: -.025em; }
.dispatch-editorial-content p { margin: 0; color: #4f5a55; font-size: .91rem; }
.dispatch-editorial-content p + p { margin-top: 14px; }
.dispatch-editorial-content a { color: var(--dispatch-blue); font-weight: 750; }
.dispatch-process-list { display: grid; margin: 0; padding: 0; list-style: none; }
.dispatch-process-list li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; border-top: 1px solid var(--dispatch-line); padding: 14px 0; }
.dispatch-process-list strong { font-size: .84rem; }
.dispatch-process-list span { color: var(--dispatch-muted); font-size: .84rem; }
.dispatch-independence-note { background: var(--dispatch-yellow-soft); padding-right: 24px !important; padding-left: 16px !important; }

/* Contact */
.dispatch-contact-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr); gap: 60px; align-items: start; }
.dispatch-contact-address { border-top: 6px solid var(--dispatch-blue); background: #fff; padding: 27px; }
.dispatch-contact-address > a { display: block; color: var(--dispatch-ink); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 850; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dispatch-contact-address > p:not(.dispatch-rail-label) { margin: 18px 0; color: var(--dispatch-muted); font-size: .87rem; }
.dispatch-contact-status { display: flex; gap: 13px; border-top: 1px solid var(--dispatch-line); padding-top: 18px; }
.dispatch-contact-status p { margin: 0; color: var(--dispatch-muted); font-size: .76rem; }
.dispatch-contact-status strong { display: block; margin-bottom: 3px; color: var(--dispatch-ink); }
.dispatch-contact-routing { border-top: 1px solid var(--dispatch-line); }
.dispatch-contact-routing > header { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); gap: 24px; border-bottom: 1px solid var(--dispatch-line); padding: 9px 14px; color: var(--dispatch-muted); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dispatch-contact-routing section { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); gap: 24px; border-bottom: 1px solid var(--dispatch-line); padding: 20px 14px; }
.dispatch-contact-routing section > div { display: flex; align-items: flex-start; gap: 11px; }
.dispatch-contact-routing i { width: 18px; margin-top: 4px; color: var(--dispatch-pink); text-align: center; }
.dispatch-contact-routing h2 { margin: 0; font-size: .94rem; }
.dispatch-contact-routing p { margin: 0; color: var(--dispatch-muted); font-size: .83rem; }

/* Legal */
.dispatch-legal-layout { display: grid; grid-template-columns: 220px minmax(0, 780px); gap: 70px; justify-content: center; align-items: start; }
.dispatch-legal-nav { position: sticky; top: 102px; border-top: 5px solid var(--dispatch-teal); background: #fff; padding: 20px; }
.dispatch-legal-nav nav { display: grid; }
.dispatch-legal-nav a { min-height: 44px; display: flex; align-items: center; border-top: 1px solid var(--dispatch-line); padding: 9px 0; color: #45504b; font-size: .77rem; font-weight: 700; text-decoration: none; }
.dispatch-legal-nav a:hover { color: var(--dispatch-blue); }
.dispatch-legal-content { border-top: 1px solid var(--dispatch-line); }
.dispatch-legal-content section { border-bottom: 1px solid var(--dispatch-line); padding: 29px 0; scroll-margin-top: 100px; }
.dispatch-legal-content h2 { display: flex; gap: 14px; margin: 0 0 15px; font-size: 1.28rem; letter-spacing: -.02em; }
.dispatch-legal-content h2 span { color: var(--dispatch-pink); font-size: .7rem; line-height: 2.2; }
.dispatch-legal-content h3 { margin: 20px 0 7px; font-size: .9rem; }
.dispatch-legal-content p, .dispatch-legal-content li { color: #505b56; font-size: .88rem; line-height: 1.75; }
.dispatch-legal-content p { margin: 0; }
.dispatch-legal-content p + p { margin-top: 13px; }
.dispatch-legal-content ul { margin: 10px 0 0; padding-left: 21px; }
.dispatch-legal-content li + li { margin-top: 6px; }
.dispatch-legal-content a { color: var(--dispatch-blue); font-weight: 750; }
.dispatch-legal-notice { border-left: 4px solid var(--dispatch-yellow); background: var(--dispatch-yellow-soft); padding: 15px !important; color: var(--dispatch-ink) !important; }

/* Play */
.dispatch-play-page { padding: 54px 0 74px; }
.dispatch-play-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: end; border-bottom: 1px solid var(--dispatch-line); padding-bottom: 26px; }
.dispatch-play-header h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.1rem); letter-spacing: -.055em; line-height: 1; }
.dispatch-play-header p:not(.dispatch-overline) { max-width: 760px; margin: 17px 0 0; color: var(--dispatch-muted); font-size: .92rem; }
.dispatch-play-actions { display: flex; gap: 8px; }
.dispatch-embed-notice { display: flex; gap: 13px; border: 1px solid var(--dispatch-line); border-left: 5px solid var(--dispatch-yellow); background: #fff; margin: 22px 0 14px; padding: 14px 16px; }
.dispatch-embed-notice > i { margin-top: 4px; color: var(--dispatch-blue); }
.dispatch-embed-notice strong { font-size: .78rem; }
.dispatch-embed-notice p { margin: 3px 0 0; color: var(--dispatch-muted); font-size: .75rem; }
.dispatch-game-frame-wrap { position: relative; height: min(78vh, 820px); min-height: 560px; overflow: hidden; border: 1px solid var(--dispatch-line-strong); background: #252b2a; }
.dispatch-game-frame, .dispatch-game-frame-loading { width: 100%; height: 100%; }
.dispatch-game-frame { display: block; border: 0; }
.dispatch-game-frame-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: .82rem; }

/* Comments */
.dispatch-comments-section { border-top: 1px solid var(--dispatch-line); background: #fff; padding: 70px 0 78px; }
.dispatch-comments-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); gap: 50px; align-items: end; margin-bottom: 28px; }
.dispatch-comments-header h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.dispatch-comments-header .comment-count { display: inline-flex; min-width: 30px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; background: var(--dispatch-yellow); padding: 0 8px; font-size: .76rem; vertical-align: middle; }
.dispatch-comments-header > p { margin: 0; color: var(--dispatch-muted); font-size: .86rem; }
.dispatch-comment-layout { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.35fr); gap: 32px; align-items: start; }
.dispatch-comment-form-panel { border: 1px solid var(--dispatch-line); border-top: 5px solid var(--dispatch-pink); background: var(--dispatch-canvas); padding: 22px; }
.dispatch-comment-form-panel h3 { margin: 0 0 9px; font-size: 1.05rem; }
.dispatch-form-note { display: flex; gap: 8px; margin: 0 0 20px; color: var(--dispatch-muted); font-size: .73rem; }
.dispatch-form-note i { margin-top: 3px; color: var(--dispatch-blue); }
.dispatch-form-grid { display: grid; gap: 15px; }
.dispatch-field { position: relative; display: grid; gap: 6px; }
.dispatch-field label, .dispatch-field-label { color: var(--dispatch-ink); font-size: .75rem; font-weight: 800; }
.dispatch-field label > span { color: var(--dispatch-red); }
.dispatch-field small, .dispatch-field-label small { margin-left: 5px; color: var(--dispatch-muted); font-size: .65rem; font-weight: 650; }
.dispatch-field input, .dispatch-field textarea { width: 100%; border: 1px solid var(--dispatch-line-strong); border-radius: var(--dispatch-radius-sm); background: #fff; padding: 11px 12px; color: var(--dispatch-ink); font-size: .84rem; outline: 0; }
.dispatch-field input:focus, .dispatch-field textarea:focus { border-color: var(--dispatch-blue); box-shadow: 0 0 0 3px var(--dispatch-blue-soft); }
.dispatch-field textarea { resize: vertical; }
.dispatch-char-count { position: absolute; right: 8px; bottom: 6px; background: rgba(255,255,255,.9); padding: 1px 4px; color: var(--dispatch-muted); font-size: .62rem; }
.dispatch-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dispatch-upload-button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--dispatch-line-strong); border-radius: var(--dispatch-radius-sm); background: #fff; padding: 8px 12px; color: var(--dispatch-ink); font-size: .73rem; font-weight: 800; cursor: pointer; }
.image-file-name { color: var(--dispatch-muted); font-size: .7rem; overflow-wrap: anywhere; }
.image-preview { margin-top: 10px; }
.image-preview img { display: block; max-width: 160px; max-height: 120px; border: 1px solid var(--dispatch-line); object-fit: contain; }
.remove-image-btn { min-height: 44px; display: inline-flex; align-items: center; border: 0; background: none; padding: 6px 0 0; color: var(--dispatch-red); font-size: .68rem; font-weight: 750; cursor: pointer; }
.dispatch-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--dispatch-line); margin-top: 18px; padding-top: 16px; }
.dispatch-form-actions p { margin: 0; color: var(--dispatch-muted); font-size: .68rem; }
.dispatch-form-actions a { color: var(--dispatch-blue); font-weight: 750; }
.comment-error, .dispatch-success-message { margin-top: 12px; border: 1px solid #e2b2b4; background: #fff1f1; padding: 10px 12px; color: #8d3034; font-size: .75rem; }
.dispatch-success-message { border-color: #a9d4c6; background: var(--dispatch-teal-soft); color: #17645f; }
.dispatch-comments-list { border-top: 1px solid var(--dispatch-line); }
.dispatch-comment-item { border-bottom: 1px solid var(--dispatch-line); padding: 20px 0; }
.dispatch-comment-meta { display: flex; align-items: center; gap: 10px; }
.dispatch-avatar { width: 34px; height: 34px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: var(--dispatch-blue-soft); color: var(--dispatch-blue); font-size: .75rem; font-weight: 900; }
.dispatch-avatar-small { width: 28px; height: 28px; background: var(--dispatch-teal-soft); color: var(--dispatch-teal); }
.dispatch-comment-meta > div { display: grid; }
.dispatch-comment-meta strong { font-size: .78rem; }
.dispatch-comment-meta strong em { color: var(--dispatch-muted); font-size: .68rem; font-style: normal; font-weight: 650; }
.dispatch-comment-meta time { color: var(--dispatch-muted); font-size: .64rem; }
.dispatch-comment-meta time i { margin-right: 4px; }
.dispatch-comment-body { padding-left: 44px; }
.dispatch-comment-text { margin: 10px 0; color: #46514d; font-size: .84rem; overflow-wrap: anywhere; }
.dispatch-comment-image { display: inline-block; margin: 2px 0 9px; }
.dispatch-comment-image img { display: block; max-width: 210px; max-height: 170px; border: 1px solid var(--dispatch-line); object-fit: contain; }
.dispatch-comment-actions { display: flex; gap: 5px; }
.dispatch-comment-actions button { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--dispatch-line); border-radius: var(--dispatch-radius-sm); background: #fff; padding: 7px 10px; color: var(--dispatch-muted); font-size: .67rem; font-weight: 750; cursor: pointer; }
.dispatch-comment-actions button:hover, .dispatch-comment-actions .is-vote-active { border-color: var(--dispatch-blue); color: var(--dispatch-blue); }
.replies-list { margin: 18px 0 0; border-left: 3px solid var(--dispatch-yellow); padding-left: 17px; }
.dispatch-reply-item { border-top: 1px solid var(--dispatch-line); padding: 15px 0; }
.reply-form-container { border-left: 3px solid var(--dispatch-blue); background: var(--dispatch-blue-soft); margin-top: 15px; padding: 14px; }
.dispatch-replying { margin: 0 0 12px; color: var(--dispatch-muted); font-size: .72rem; }
.reply-form { display: grid; gap: 12px; }
.dispatch-inline-actions { display: flex; gap: 8px; }
.dispatch-no-comments { display: grid; min-height: 260px; place-items: center; align-content: center; text-align: center; }
.dispatch-no-comments i { color: var(--dispatch-blue); font-size: 1.5rem; }
.dispatch-no-comments h3 { margin: 12px 0 3px; font-size: 1rem; }
.dispatch-no-comments p { margin: 0; color: var(--dispatch-muted); font-size: .78rem; }
.dispatch-toast { position: fixed; right: 20px; bottom: 20px; z-index: 300; border-left: 4px solid var(--dispatch-teal); background: var(--dispatch-charcoal); padding: 11px 15px; color: #fff; font-size: .75rem; }
.image-lightbox { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; background: rgba(15,20,19,.88); padding: 24px; }
.image-lightbox.active { display: flex; }
.image-lightbox-content { position: relative; max-width: min(92vw, 1000px); max-height: 90vh; }
.image-lightbox-content img { display: block; max-width: 100%; max-height: 86vh; object-fit: contain; }
.image-lightbox-close { position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border: 1px solid #fff; border-radius: 50%; background: var(--dispatch-charcoal); color: #fff; font-size: 1.5rem; cursor: pointer; }

/* Jump result */
.dispatch-jump-page { min-height: 100vh; display: grid; place-items: center; background: var(--dispatch-canvas); padding: 24px; }
.dispatch-jump-panel { width: min(100%, 660px); border: 1px solid var(--dispatch-line-strong); border-top: 6px solid var(--dispatch-yellow); background: #fff; }
.dispatch-jump-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--dispatch-line); padding: 15px 18px; }
.dispatch-jump-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.dispatch-jump-brand img { width: 38px; height: 38px; object-fit: contain; }
.dispatch-jump-brand span { display: grid; color: var(--dispatch-muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.dispatch-jump-brand strong { color: var(--dispatch-ink); font-size: .82rem; letter-spacing: 0; text-transform: none; }
.dispatch-jump-state { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dispatch-line); padding: 6px 9px; color: var(--dispatch-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.dispatch-jump-state.is-success { border-color: #9bc9ba; color: var(--dispatch-teal); }
.dispatch-jump-state.is-error { border-color: #dda5a8; color: var(--dispatch-red); }
.dispatch-jump-body { padding: 38px; }
.dispatch-jump-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; border: 2px solid currentColor; color: var(--dispatch-blue); font-size: 1.1rem; }
.dispatch-jump-icon.is-success { color: var(--dispatch-teal); }
.dispatch-jump-icon.is-error { color: var(--dispatch-red); }
.dispatch-jump-body h1 { margin: 0; font-size: clamp(1.45rem, 4vw, 2.25rem); letter-spacing: -.035em; line-height: 1.15; }
.dispatch-jump-progress { height: 5px; overflow: hidden; background: var(--dispatch-line); margin-top: 28px; }
.dispatch-jump-progress > div { width: 100%; height: 100%; background: var(--dispatch-blue); transform-origin: left; }
.dispatch-jump-meta { margin: 9px 0 20px; color: var(--dispatch-muted); font-size: .75rem; }
.dispatch-jump-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes jumpProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1050px) {
  .dispatch-desktop-nav { display: none; }
  .dispatch-nav-jump { margin-left: auto; }
  .dispatch-menu-button { display: inline-flex; }
  .dispatch-level-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dispatch-editorial-layout, .dispatch-contact-layout { gap: 40px; }
}

@media (max-width: 820px) {
  .dispatch-container { width: min(100% - 28px, 1180px); }
  .dispatch-section { padding: 54px 0; }
  .dispatch-page-head { padding: 48px 0 42px; }
  .dispatch-page-head-grid, .dispatch-section-header, .dispatch-comments-header { grid-template-columns: 1fr; gap: 24px; }
  .dispatch-page-head-copy { max-width: 650px; }
  .dispatch-level-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dispatch-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .dispatch-footer-intro { grid-column: 1 / -1; }
  .dispatch-footer-bottom { grid-template-columns: 1fr; gap: 10px; }
  .dispatch-editorial-layout, .dispatch-contact-layout, .dispatch-legal-layout, .dispatch-comment-layout { grid-template-columns: 1fr; gap: 30px; }
  .dispatch-editorial-rail, .dispatch-legal-nav { position: static; }
  .dispatch-legal-nav nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .dispatch-play-header { grid-template-columns: 1fr; gap: 22px; }
  .dispatch-game-frame-wrap { min-height: 500px; }
}

@media (max-width: 640px) {
  .dispatch-container { width: min(100% - 22px, 1180px); }
  .dispatch-nav { min-height: 64px; gap: 10px; }
  .dispatch-brand-mark { width: 36px; height: 36px; }
  .dispatch-brand-copy strong { font-size: .82rem; }
  .dispatch-brand-copy span { display: none; }
  .dispatch-nav-jump { display: none; }
  .dispatch-menu-button { margin-left: auto; }
  .dispatch-page-head h1 { font-size: clamp(2.05rem, 12vw, 3rem); }
  .dispatch-level-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dispatch-level-entry-link { min-height: 0; grid-template-columns: minmax(46px, .65fr) minmax(54px, 1fr) 26px; grid-template-rows: auto 64px; gap: 0; padding: 0; }
  .dispatch-level-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .dispatch-level-thumb img { top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .dispatch-level-entry-copy { padding: 7px 8px; }
  .dispatch-level-entry-copy h2, .dispatch-level-entry-copy h3 { font-size: 1.12rem; }
  .dispatch-guide-format { font-size: .58rem; }
  .dispatch-guide-format i { width: 10px; }
  .dispatch-entry-arrow { width: 26px; }
  .dispatch-library-toolbar { align-items: flex-start; flex-direction: column; }
  .dispatch-library-toolbar > div > span:last-child { display: none; }
  .dispatch-inline-jump { width: 100%; }
  .dispatch-inline-jump input { flex: 1; width: auto; }
  .dispatch-editorial-content > section { grid-template-columns: 35px minmax(0, 1fr); gap: 10px; }
  .dispatch-process-list li { grid-template-columns: 1fr; gap: 3px; }
  .dispatch-contact-routing > header { display: none; }
  .dispatch-contact-routing section { grid-template-columns: 1fr; gap: 8px; padding: 18px 8px; }
  .dispatch-legal-nav nav { grid-template-columns: 1fr 1fr; }
  .dispatch-play-actions { align-items: stretch; flex-direction: column; }
  .dispatch-game-frame-wrap { height: 72vh; min-height: 430px; }
  .dispatch-comments-section { padding: 54px 0; }
  .dispatch-comment-form-panel { padding: 16px; }
  .dispatch-form-actions { align-items: stretch; flex-direction: column; }
  .dispatch-comment-body { padding-left: 0; }
  .dispatch-footer-grid { grid-template-columns: 1fr; }
  .dispatch-footer-intro { grid-column: auto; }
  .dispatch-jump-body { padding: 28px 20px; }
}