/* Vertline brand layer, loaded after style.css. Near-black, white, lime #c8f53a. */
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('../assets/fonts/BarlowCondensed-ExtraBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url('../assets/fonts/BarlowCondensed-BlackItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); }

:root { --display: 'Barlow Condensed', 'Inter', sans-serif; --numeral: 'JetBrains Mono', ui-monospace, monospace; --lime: #c8f53a; }

/* Slanted parallelogram tag: the brand's one repeating shape. */
.tag { display: inline-block; padding: 3px 14px 2px 10px; background: var(--lime); color: #0a0a0a; font: italic 900 1rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

h1, h2, .sidebar-section h3, .tab-btn, .btn, .btn-primary, #mobile-header h1, .sidebar-header h1, .route-vehicle-title { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: .01em; }
.sidebar-section h3, .tab-btn, .btn-primary { text-transform: uppercase; }
.sidebar-section h3 { font-size: 1.05rem; }
.sidebar-header h1, #mobile-header h1 { font-weight: 900; font-size: 1.5rem; text-transform: none; }
.tab-btn { font-size: .95rem; }
.btn-primary { color: #0a0a0a; }
.btn-primary:hover { color: #0a0a0a; }

/* Numbers read like a dash. */
.route-stat-value, .rec-big, .rec-val, .route-stat-num { font-family: var(--numeral); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Photo bands inside the menu and tabs. */
.brand-band { position: relative; display: flex; align-items: flex-end; height: 150px; margin: 0 0 12px; border-radius: 8px; overflow: hidden; background: #141414 center 40%/cover no-repeat; }
.brand-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.75)); pointer-events: none; }
.brand-band .tag { position: relative; z-index: 1; margin: 0 0 12px 12px; }
.brand-credit { position: absolute; right: 6px; bottom: 4px; z-index: 2; font: 500 9px/1.2 var(--numeral); color: rgba(255,255,255,.72); text-shadow: 0 1px 2px #000; }

/* Demo label: always visible, never catches a tap. */
#demo-build { position: fixed; z-index: 2147483000; top: calc(var(--safe-top, 0px) + 2px); left: 50%; transform: translateX(-50%); padding: 1px 10px 0 7px; background: rgba(10,10,10,.82); color: var(--lime); font: 500 9px/1.3 var(--numeral); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); pointer-events: none; }

/* First run */
#first-run { position: fixed; inset: 0; z-index: 2147482000; background: #0a0a0a; color: #fff; overflow: hidden; display: flex; flex-direction: column; }
#first-run h2 { font: italic 900 3.4rem/.95 var(--display); text-transform: uppercase; margin: 10px 0 8px; color: #fff; }
#first-run .tag { font-size: 1.15rem; }
.fr-photo { position: absolute; inset: 0; background: center/cover no-repeat; }
.fr-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.1) 40%, rgba(10,10,10,.92) 85%); }
.fr-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 22px calc(26px + var(--safe-bottom, 0px)); }
.fr-panel p { font-size: 1rem; line-height: 1.4; margin: 0 0 18px; color: #e8e8e8; max-width: 32em; }
.fr-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: italic 900 1.8rem/1 var(--display); }
.fr-mark { width: 38px; height: 38px; }
.fr-cta { display: block; width: 100%; min-height: 54px; border: 0; background: var(--lime); color: #0a0a0a; font: italic 900 1.5rem/1 var(--display); text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); cursor: pointer; }
.fr-text { display: block; width: 100%; margin-top: 10px; min-height: 44px; border: 0; background: none; color: #fff; font-size: .95rem; cursor: pointer; text-decoration: underline; }
.fr-skip { position: absolute; top: calc(var(--safe-top, 0px) + 18px); right: 16px; z-index: 3; min-height: 44px; padding: 0 12px; border: 0; background: rgba(10,10,10,.55); color: #fff; font: italic 800 1.1rem/1 var(--display); text-transform: uppercase; border-radius: 4px; cursor: pointer; }
#first-run > .brand-credit { bottom: calc(var(--safe-bottom, 0px) + 6px); }
.fr-q { padding: calc(var(--safe-top, 0px) + 26px) 22px 16px; flex: none; background: #0a0a0a; margin: 0 !important; font-size: 3rem !important; }
.fr-choice { position: relative; flex: 1 1 0; min-height: 0; width: 100%; border: 0; border-top: 3px solid #0a0a0a; padding: 0 20px 18px; background: #141414 center/cover no-repeat; color: #fff; text-align: left; cursor: pointer; display: flex; align-items: flex-end; }
.fr-choice::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.82)); }
.fr-choice-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fr-choice .tag { font-size: 1.6rem; padding: 4px 18px 3px 12px; }
.fr-line { font-size: .95rem; text-shadow: 0 1px 3px #000; }

/* Credits dialog */
#brand-credits { position: fixed; inset: 0; z-index: 2147482500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.72); }
.brand-credits-card { max-height: 90%; overflow: auto; width: min(520px, 100%); padding: 18px; background: #141414; border-radius: 8px; color: #fff; }
.brand-credits-card ul { padding-left: 18px; font-size: .85rem; line-height: 1.5; }
.brand-credits-card a { color: var(--lime); }

/* Links stay readable on near-black, and the floating search bar loses the old navy. */
.sidebar-body a, .hint a { color: var(--lime); }
#mobile-header, #mobile-search { background-color: rgba(10,10,10,.92); }