@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* EvoDIY 1.2 - readable type, restrained color and a consistent spacing scale. */
:root {
  --ink: #222a25;
  --muted: #566159;
  --red: #ED0000;
  --line: #dce1d9;
  --paper: #f5f6f2;
  --dark: #1d2420;
  --sans: 'DM Sans', Arial, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --sidebar: 260px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); }
button, input, select { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #A80000; outline-offset: 4px;
}
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { margin: 0 0 16px; font-size: clamp(30px, 3vw, 42px); line-height: 1.18; letter-spacing: -.8px; font-weight: 700; }
h2 { margin: 0; font-size: 26px; line-height: 1.3; letter-spacing: -.4px; font-weight: 700; }
h3 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; }
p { margin: 0 0 18px; }
code, pre { font-family: var(--mono); }
code { font-size: .9em; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* Navigation */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); display: flex; flex-direction: column; padding: 32px 20px; background: var(--dark); color: #fff; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 13px; font: 700 34px/1 var(--display); letter-spacing: .5px; padding: 2px 10px 26px; }
.brand:hover { color: #fff; }
.brand-mark { display: block; flex: 0 0 32px; width: 32px; height: 38px; color: #ED0000; fill: currentColor; }
.brand-accent { color: #ED0000; }
.brand-sub { display: block; margin-top: 9px; font: 500 10px/1.3 var(--sans); letter-spacing: 1.9px; color: #c5cec5; }
.sidebar-caption { display: none; }
.nav-label { margin: 8px 12px 16px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; color: #b4bfb4; }
nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 12px; color: #c8d0c7; border-radius: 6px; font-size: 14px; line-height: 1.4; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { color: #fff; background: #ffffff09; }
.nav-item.active { background: #343f35; color: #fff; font-weight: 600; }
.nav-item.active svg { color: #ED0000; }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: #ED0000; margin-left: auto; flex-shrink: 0; }
.nav-count { margin-left: auto; background: #465143; border-radius: 4px; padding: 1px 7px; font-size: 12px; }
.nav-divider { height: 1px; background: #424d40; margin: 16px 12px; }
.sidebar-bottom { margin-top: auto; padding: 36px 12px 4px; }
.built-icon { display: none; }
.sidebar-bottom strong { display: block; font-size: 18px; line-height: 1.5; font-weight: 500; color: #e6ebe3; }
.sidebar-bottom p { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: #bdc7ba; }
.mini-line { display: none; }
.independent { color: #aab6a6; font-size: 11px; line-height: 1.7; margin-top: 22px; }
.shell { margin-left: var(--sidebar); }
.topbar { min-height: 80px; display: flex; align-items: center; gap: 24px; padding: 16px 40px; border-bottom: 1px solid var(--line); background: #fff; }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); min-width: 0; }
.breadcrumb strong { font-weight: 600; color: var(--ink); }
.slash { color: #8b9588; }
.search-trigger { display: flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; width: 290px; padding: 10px 14px; border: 1px solid #d9dfd4; border-radius: 6px; background: #f8f9f5; color: #58644f; text-align: left; font-size: 13px; flex-shrink: 0; }
.search-trigger svg { width: 18px; height: 18px; }
.search-trigger kbd { margin-left: auto; padding: 0 5px; border: 1px solid #d6ddce; border-radius: 3px; font: 11px/1.8 var(--sans); }
.top-link { font-size: 13px; white-space: nowrap; }
.top-link span { color: var(--red); margin-left: 9px; }
.icon-button.mobile-menu { display: none; }
.scrim { display: none; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; background: transparent; color: #485443; font-size: 20px; }

/* Page structure */
main { max-width: 1200px; min-height: calc(100vh - 168px); margin: 0 auto; padding: 44px 40px 64px; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.page-intro > div { max-width: 740px; }
.eyebrow { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 1.25px; color: var(--red); }
.eyebrow:before { display: none; }
.intro-copy { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 68ch; margin: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-heading h2 { font-size: 25px; }
.section-heading h3 { font-size: 20px; }
.button-primary, .outline-button, .file-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; }
.button-primary { background: var(--red); color: #fff; }
.button-primary:hover { background: #B90000; color: #fff; }
.outline-button { border: 1px solid #cdd5c5; background: #fff; color: #38472f; }
.outline-button:hover { background: #edf1e6; color: var(--ink); }
.button-primary svg, .outline-button svg { width: 17px; height: 17px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; color: var(--red); font-size: 14px; font-weight: 600; line-height: 1.5; background: transparent; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link span { color: inherit; }
.source-link { color: #A80000; text-decoration: underline; text-underline-offset: 3px; }
.panel { min-width: 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.panel h2 { margin-bottom: 16px; }
.panel-copy { font-size: 15px; line-height: 1.8; color: var(--muted); }
.info-box { padding: 21px 24px; border: 1px solid #d8dfce; border-left: 3px solid #8a9a70; border-radius: 6px; background: #eef2e8; color: #4d5c40; font-size: 14px; line-height: 1.85; margin: 24px 0; }
.info-box strong { color: #263621; }
.note-banner { display: flex; gap: 12px; align-items: flex-start; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.8; }
.note-banner svg { width: 18px; height: 18px; margin-top: 3px; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 24px 40px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
footer button { background: transparent; font-size: inherit; color: #47583b; }

/* A quieter home page */
.hero { position: relative; min-height: 370px; border-radius: 10px; overflow: hidden; color: #fff; background: #172019 url('./assets/evo-workshop.webp') 66% 54% / cover; }
.hero:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #111a16f2 0%, #111a16cc 40%, #111a1655 70%, #111a161a); }
.hero-inner { position: relative; padding: 42px; display: flex; flex-direction: column; align-items: flex-start; }
.hero-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 1.6px; line-height: 1.5; color: #dce6d8; }
.hero h1, .hero h2 { font: 700 clamp(43px, 4.5vw, 62px)/1.05 var(--display); letter-spacing: .2px; margin: 24px 0 20px; }
.hero h1 span, .hero h2 span { color: #ED0000; }
.hero p { font-size: 16px; line-height: 1.75; max-width: 36ch; color: #edf0e6; margin: 0 0 26px; }
.hero .button-primary { background: #f0ede3; color: #253021; }
.hero .button-primary:hover { background: #fff; }
.hero-meta { display: none; }
.home-section { margin-top: 40px; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; }
.category-card { display: flex; align-items: flex-start; gap: 20px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.category-card:hover { border-color: #8b9b78; background: #fcfdf9; color: inherit; }
.category-icon { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; flex-shrink: 0; margin: 0 0 18px; border: 1px solid #dfe5d6; border-radius: 8px; background: #f1f4ec; color: #526245; }
.category-card .category-icon { margin: 0; }
.category-card h3 { font: 600 19px/1.35 var(--sans); margin: 0 0 9px; }
.category-card p { font-size: 14px; color: var(--muted); line-height: 1.75; margin: 0; max-width: 44ch; }
.card-bottom { display: none; }
.quick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 22px 26px; margin-bottom: 40px; border: 1px solid var(--line); border-radius: 8px; background: #eaf0e2; }
.quick-tools > strong { font-size: 14px; margin-right: auto; color: #37492b; }
.quick-tools a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; font-weight: 500; color: #3e542f; }
.quick-tools a svg { width: 18px; height: 18px; }
.home-guides { max-width: 100%; }
.article-list { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.article-row { display: flex; align-items: center; gap: 18px; width: 100%; padding: 23px 25px; border-bottom: 1px solid var(--line); background: #fff; text-align: left; }
.article-row:last-child { border-bottom: 0; }
.article-row:hover { background: #f8faf3; color: inherit; }
.article-symbol { display: flex; align-items: center; justify-content: center; width: 40px; height: 42px; flex-shrink: 0; border-radius: 6px; background: #f1f4ea; color: #62724f; }
.row-title { display: block; margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.row-meta { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.6; color: #55664a; }
.row-arrow { margin-left: auto; color: #6c7d58; }
.tag-dot { width: 3px; height: 3px; border-radius: 50%; background: #849174; }
.generation-strip { padding: 24px 0; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.generation-label { display: block; color: #596a4b; font-size: 12px; margin-bottom: 12px; }
.generation-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.generation-end { display: none; }
.pill { min-height: 39px; padding: 8px 14px; border: 1px solid #cdd7c3; border-radius: 5px; background: #fff; color: #46583a; font-size: 13px; }
.pill.selected, .pill:hover { background: #34472a; border-color: #34472a; color: #fff; }
.lower-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.rom-teaser { background: #eaf0e1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rom-teaser-inner { padding: 26px; }
.rom-teaser h3 { font-size: 23px; margin: 14px 0; }
.rom-teaser p { color: #526546; font-size: 15px; }
.tool-label { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; letter-spacing: .6px; color: #536943; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #526f36; }
.terminal { padding: 16px; margin: 20px 0; border-radius: 6px; background: #24301f; color: #dbe6d1; font: 12px/1.9 var(--mono); overflow-wrap: anywhere; }
.terminal .dim { color: #bdcaae; }
.terminal .terminal-orange { color: #ED0000; }
.rom-teaser-bottom { display: flex; align-items: center; gap: 8px; padding: 15px 26px; border-top: 1px solid #cbd6bf; font-size: 12px; color: #536846; }
.library-entry-grid { margin-top: 36px; }

/* Library, manuals and guide cards */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.filter-search { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; border: 1px solid #cdd7c4; border-radius: 6px; background: #fff; padding: 10px 14px; }
.filter-search input { width: 100%; min-height: 25px; border: 0; background: transparent; font-size: 15px; }
.filter-search svg { width: 18px; height: 18px; color: #617650; }
.filter-select { min-height: 48px; max-width: 100%; padding: 10px 30px 10px 13px; border: 1px solid #cdd7c4; border-radius: 6px; background: #fff; font-size: 14px; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.resource-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.resource-card h3 { margin: 14px 0 12px; font: 600 21px/1.4 var(--sans); }
.resource-card p { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 0 0 23px; }
.resource-card .card-tags { font-size: 12px; line-height: 1.7; color: #596d4c; letter-spacing: .15px; }
.resource-card .text-link { margin-top: auto; }
.card-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; margin-top: auto; }
.save-button { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: #657557; background: transparent; }
.save-button.saved { color: var(--red); background: #fae8dd; }
.save-button.saved svg { fill: #ED00001c; }
.result-count { font-size: 13px; color: var(--muted); margin: 18px 0; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 50px 26px; border: 1px solid #d4dccb; border-radius: 8px; background: #fff; color: #536747; }
.empty-state h3 { font-size: 24px; margin: 12px 0; color: var(--ink); }
.empty-state p { font-size: 15px; max-width: 58ch; margin: 14px auto; }
.empty-state .outline-button { margin-top: 16px; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.archive-card { display: flex; align-items: flex-start; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.archive-card h3 { font: 600 19px/1.4 var(--sans); margin-bottom: 14px; }
.archive-icon { margin-top: 3px; color: #667f4e; }
.archive-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.archive-links a { font-size: 14px; color: #A80000; text-decoration: underline; text-underline-offset: 4px; }
.chapter-list { display: grid; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 28px; overflow: hidden; }
.chapter { display: flex; align-items: flex-start; gap: 22px; padding: 26px; border-bottom: 1px solid var(--line); }
.chapter:last-child { border: 0; }
.chapter-number { min-width: 28px; font: 14px/1.8 var(--mono); color: #697e56; }
.chapter h3 { font: 600 21px/1.4 var(--sans); margin-bottom: 10px; }
.chapter p { color: var(--muted); font-size: 15px; line-height: 1.8; margin: 0; max-width: 62ch; }
.chapter .outline-button { margin-left: auto; flex-shrink: 0; }
.generation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.generation-card { padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.generation-card .gi { display: block; margin-bottom: 22px; font: 600 44px/1.1 var(--display); color: var(--red); }
.generation-card h3 { font-size: 21px; }
.generation-card p { color: var(--muted); font-size: 15px; margin: 14px 0 20px; }
.generation-card .text-link { margin: 8px 0; }

/* Article reading */
.article-page { max-width: 780px; margin: 0 auto; }
.article-page h1 { max-width: 24ch; font-size: clamp(32px, 3.5vw, 44px); line-height: 1.2; }
.back-link { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 0; background: transparent; color: #516a40; font-size: 14px; }
.article-meta { color: #5c704e; font-size: 13px; line-height: 1.8; margin: 20px 0 36px; }
.article-body { max-width: 69ch; }
.article-body h2 { margin: 36px 0 16px; font: 600 25px/1.4 var(--sans); }
.article-body p, .article-body li { color: #3e4b3a; font-size: 17px; line-height: 1.9; }
.article-body ul, .article-body ol { padding-left: 23px; }
.article-body li { margin: 10px 0; padding-left: 4px; }
.article-body .info-box { font-size: 15px; }
.source-list { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.source-list a { display: inline-block; color: #A80000; text-decoration: underline; text-underline-offset: 4px; margin: 6px 20px 6px 0; }

/* Tools and forms */
.steps { display: flex; gap: 16px; margin: 30px 0; }
.step { flex: 1; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 14px; }
.step b { display: block; color: var(--red); font: 14px/1.5 var(--mono); margin-bottom: 10px; }
.rom-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; }
.drop-zone { display: block; position: relative; padding: 34px 24px; margin-top: 24px; border: 1px dashed #9dad88; border-radius: 8px; background: #f6f9ef; text-align: center; cursor: pointer; }
.drop-zone:hover, .drop-zone.dragging { background: #edf4df; border-color: #A80000; }
.drop-zone svg { width: 30px; height: 30px; margin-bottom: 12px; color: #627d49; }
.drop-zone strong { display: block; margin-bottom: 10px; font: 600 22px/1.4 var(--sans); }
.drop-zone p { font: 13px/1.8 var(--sans); color: #5c7249; margin: 0 0 22px; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; top: 50%; left: 50%; }
.drop-zone:focus-within { outline: 3px solid #A80000; outline-offset: 4px; }
.file-button { background: #354a29; color: #fff; }
.result-list { margin: 24px 0 0; }
.result-item { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 13px/1.8 var(--mono); }
.result-item dt { color: #5a7147; }
.result-item dd { margin: 0; text-align: right; max-width: 70%; overflow-wrap: anywhere; }
.hash { font-size: 12px; }
.status-tag { display: inline-block; border-radius: 4px; padding: 5px 9px; background: #eaf1df; color: #405b2a; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .25px; }
.definition-label { display: block; margin: 24px 0 12px; font-size: 14px; font-weight: 500; }
.definition-input { max-width: 100%; font-size: 14px; }
.result-box { padding: 20px; margin-top: 22px; border-radius: 6px; background: #f1f5e9; font: 13px/1.9 var(--mono); overflow-wrap: anywhere; }
.result-box.match { background: #e9f3dd; color: #345020; }
.result-box.fail { background: #fff0e7; color: #A80000; }
.tool-note { font-size: 13px; line-height: 1.8; color: #586b49; margin: 16px 0; }
.checklist { list-style: none; padding: 0; color: #516744; font-size: 15px; line-height: 1.8; }
.checklist li { display: flex; gap: 12px; margin: 17px 0; }
.checklist li:before { content: '✓'; color: #607d45; }
.calculator { margin-top: 36px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 9px; color: #50673f; font-size: 12px; font-weight: 500; }
.form-field input, .form-field select { min-width: 0; min-height: 47px; padding: 12px; border: 1px solid #c8d4bb; border-radius: 5px; background: #fbfcf8; color: var(--ink); font: 16px/1.5 var(--sans); }
.calc-result { padding: 24px; margin-top: 24px; border-radius: 6px; background: #2d3e23; color: #e6eddc; font: 15px/1.8 var(--mono); }
.calc-result strong { font: 600 38px var(--display); color: #fff; }

/* PDFs: a readable list, with secondary metadata tucked away */
.pdf-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; color: #506744; font-size: 14px; }
.pdf-overview b { color: var(--ink); font-weight: 600; }
.pdf-overview span { margin-left: 5px; }
.pdf-overview .pdf-pack-version { margin-left: auto; color: var(--muted); font-size: 13px; }
.pdf-toolbar { align-items: stretch; }
.pdf-toolbar .filter-search { min-width: 200px; }
.pdf-list { display: grid; gap: 18px; }
.pdf-card.resource-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 148px; align-items: start; gap: 22px; padding: 26px; }
.pdf-file-symbol { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 56px; border: 1px solid #FFF0F0; border-radius: 5px; background: #fbefe8; color: #A80000; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.pdf-card h3 { font: 600 20px/1.45 var(--sans); margin: 6px 0 10px; }
.pdf-card p { font-size: 14px; line-height: 1.8; margin: 0 0 14px; color: var(--muted); }
.pdf-card .card-tags { color: #60764f; font-size: 12px; }
.pdf-metadata { font-size: 12px; line-height: 1.8; color: #5b704b; }
.pdf-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 8px; }
.pdf-actions .text-link { align-self: center; font-size: 13px; }
.pdf-actions .button-primary { font-size: 13px; padding: 10px 12px; }
.pdf-credit { margin-top: 14px; font-size: 12px; line-height: 1.8; color: #5c714b; }
.pdf-credit summary { cursor: pointer; color: #536944; }
.pdf-credit p { font-size: 13px; margin: 12px 0; }
.pdf-credit a { color: #A80000; text-decoration: underline; text-underline-offset: 3px; }
.pdf-hash { overflow-wrap: anywhere; font: 11px/1.8 var(--mono) !important; }
.pdf-external { background: #edf0e7; color: #5c704a; }
.pdf-shelf-note { margin-top: 28px; color: var(--muted); font-size: 13px; line-height: 1.9; }

/* Mitsubishi VIN decoder */
.vin-home-banner { display: flex; align-items: center; gap: 20px; padding: 24px; margin: 24px 0 36px; border: 1px solid #d4dfc8; border-radius: 8px; background: #ecf2e4; }
.vin-home-banner .category-icon { margin: 0; }
.vin-home-banner strong { display: block; font: 600 19px/1.5 var(--sans); }
.vin-home-banner p { color: #566e45; font-size: 14px; margin: 6px 0 0; }
.vin-home-banner > .text-link { margin-left: auto; flex-shrink: 0; }
.vin-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; }
.vin-form-panel .panel-copy { max-width: 60ch; }
.vin-input-label { display: block; margin: 26px 0 12px; color: #4f683e; font-size: 12px; font-weight: 600; letter-spacing: .4px; }
.vin-input { display: block; width: 100%; min-width: 0; padding: 16px; border: 1px solid #adbf9b; border-radius: 6px; background: #f8fbf1; color: #26391f; font: 500 20px/1.5 var(--mono); letter-spacing: .5px; text-transform: uppercase; }
.vin-input::placeholder { font-size: 15px; color: #6c8258; }
.vin-input[aria-invalid=true] { border-color: #A80000; }
.vin-submit { margin-top: 16px; }
.vin-form-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 22px; }
.vin-mode-label { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 180px; font-size: 13px; color: #4c653a; }
.vin-mode-label select { width: 100%; }
.vin-examples { margin: 26px 0 18px; border-top: 1px solid var(--line); padding-top: 20px; }
.vin-examples > span { display: block; font-size: 11px; font-weight: 500; color: #5d744b; margin-bottom: 13px; letter-spacing: .5px; }
.vin-examples > div { display: flex; flex-wrap: wrap; gap: 8px; }
.vin-examples .pill { font-size: 12px; }
.vin-privacy { color: #536e40; font-size: 12px; line-height: 1.8; margin-top: 16px; }
.vin-privacy summary { cursor: pointer; }
.vin-privacy p { margin: 8px 0 0; }
.vin-how h2 { margin-top: 18px; font-size: 25px; }
.vin-coverage { margin-top: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.vin-coverage > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 24px; cursor: pointer; font-size: 17px; font-weight: 600; }
.vin-coverage > summary::-webkit-details-marker { display: none; }
.vin-coverage > summary span { color: var(--red); font-size: 24px; }
.vin-coverage[open] > summary span { transform: rotate(45deg); }
.vin-coverage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 24px 24px; }
.vin-coverage h3 { font-size: 18px; margin: 12px 0; }
.vin-coverage p { font-size: 14px; line-height: 1.8; color: #536b42; }
.vin-code-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.vin-code-list span { padding: 5px 8px; border-radius: 4px; background: #edf3e3; color: #4f6a39; font: 12px/1.6 var(--mono); }
.vin-coverage-note { padding: 22px 24px; background: #f1f5e9; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.vin-coverage-note p { margin: 10px 0 0; }
.vin-reference-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; padding: 12px 24px 20px; }
.vin-source { display: flex; flex-direction: column; gap: 7px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vin-source span { color: #425e2e; font-size: 14px; font-weight: 500; line-height: 1.6; }
.vin-source small { font-size: 11px; color: #5b7349; }
.vin-coverage > .tool-note { padding: 0 24px 12px; }
.vin-result { margin-top: 30px; scroll-margin-top: 80px; }
.vin-result:empty { display: none; }
.vin-result-panel { border-top: 3px solid #78935a; }
.vin-result-panel.vin-result-partial { border-top-color: #A80000; }
.vin-result-panel.vin-result-error { border-top-color: #A80000; }
.vin-result-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.vin-result-top h2 { font-size: 28px; margin: 10px 0 12px; }
.vin-result-top p { font-size: 14px; color: #566f43; margin: 0; }
.vin-result-badge { flex-shrink: 0; padding: 6px 10px; border-radius: 4px; background: #e9f2dd; color: #416126; font-size: 11px; font-weight: 500; line-height: 1.6; }
.vin-result-partial .vin-result-badge { background: #FFF0F0; color: #8F0010; }
.vin-result-error .vin-result-badge { background: #fff0e7; color: #A80000; }
.vin-identifier { margin: 28px 0 18px; color: #3d5b27; font: 500 20px/1.6 var(--mono); letter-spacing: .5px; overflow-wrap: anywhere; }
.vin-character-strip { display: grid; grid-template-columns: repeat(17, minmax(26px, 1fr)); gap: 4px; overflow-x: auto; margin: 20px 0 28px; padding-bottom: 8px; }
.vin-character { padding: 9px 2px; border: 1px solid #d5e0c8; border-radius: 4px; background: #f1f6e9; text-align: center; }
.vin-character small { display: block; margin-bottom: 5px; color: #627d49; font: 10px/1.5 var(--mono); }
.vin-character b { color: #3e5c29; font: 500 17px/1.5 var(--mono); }
.vin-character.vin-wmi { background: #faf0e5; border-color: #FFF0F0; }
.vin-character.vin-wmi b { color: #A80000; }
.vin-character.vin-check { background: #eeefeb; border-color: #d8ded3; }
.vin-character.vin-year { background: #e4edda; border-color: #b9cba7; }
.vin-character.vin-character-invalid { background: #fff0ef; border: 2px solid #b60000; }
.vin-character.vin-character-invalid small, .vin-character.vin-character-invalid b { color: #a80000; }
.vin-frame-diagram { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; padding: 20px; border: 1px solid #d0dfbf; border-radius: 6px; background: #f1f7e8; margin: 20px 0 28px; font: 20px/1.6 var(--mono); color: #425e2f; }
.vin-frame-diagram > span { color: #A80000; }
.vin-frame-diagram strong { font-weight: 500; }
.vin-frame-diagram i { font-style: normal; color: #7d9467; }
.vin-frame-diagram small { flex-basis: 100%; color: #586f43; font: 11px/1.7 var(--sans); letter-spacing: .5px; }
.vin-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 0; margin-bottom: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vin-check-item { display: flex; flex-direction: column; gap: 8px; }
.vin-check-item b { font-size: 14px; color: #415f2d; font-weight: 600; }
.vin-check-item span { color: #566f43; font-size: 13px; line-height: 1.8; }
.vin-check-failed b { color: #A80000; }
.vin-fields-wrap { overflow-x: auto; }
.vin-fields { width: 100%; min-width: 580px; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 1.8; }
.vin-fields thead th { padding: 14px 12px; color: #506a3d; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.vin-fields tbody th, .vin-fields tbody td { padding: 18px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vin-fields tbody th { width: 20%; color: #4f6a3c; font-size: 13px; font-weight: 500; }
.vin-fields tbody td:nth-child(2) { width: 35%; color: #304f20; font-weight: 500; overflow-wrap: anywhere; }
.vin-fields tbody td:last-child { font-size: 13px; color: #566f43; }
.vin-fields small { display: block; margin-top: 8px; color: #637c4e; font: 10px/1.7 var(--mono); }
.vin-notes { padding: 23px; border: 1px solid #FFF0F0; border-radius: 6px; background: #fbf6e9; margin-top: 28px; }
.vin-notes h3 { font-size: 18px; color: #8F0010; }
.vin-notes ul { padding-left: 18px; margin: 14px 0 0; color: #8F0010; font-size: 14px; line-height: 1.85; }
.vin-notes li + li { margin-top: 10px; }
.vin-unknowns, .vin-result-sources { padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); }
.vin-unknowns > summary, .vin-result-sources > summary { color: #4a6537; font-size: 15px; font-weight: 500; cursor: pointer; }
.vin-unknowns ul { color: #566e43; font-size: 14px; line-height: 1.9; }
.vin-result-sources .vin-reference-list { padding: 8px 0 0; }
.vin-report-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; margin-top: 28px; border-top: 1px solid var(--line); }
.vin-report-actions > span { max-width: 38ch; font-size: 12px; line-height: 1.8; color: #5b7448; }
.vin-extra-form { padding: 18px; margin-top: 26px; border: 1px solid #d4dfc9; border-radius: 6px; background: #f7faf1; }
.vin-extra-form > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: #4c6839; font-size: 14px; font-weight: 600; }
.vin-extra-form > summary span { color: var(--red); }
.vin-extra-form .panel-copy { margin-top: 18px; font-size: 14px; }
.vin-extra-form .form-grid { margin: 22px 0; }
.vin-extra-form .filter-select { font-size: 14px; padding-right: 12px; width: 100%; }
.vin-record-import { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.vin-record-import > label { display: block; font-size: 14px; font-weight: 500; color: #4b6838; margin-bottom: 12px; }
.vin-record-import input[type=file] { max-width: 100%; font-size: 13px; }
.vin-record-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.vin-record-buttons .outline-button { font-size: 12px; }
.vin-evidence { margin: 30px 0; }
.vin-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vin-evidence-card { min-width: 0; padding: 21px; border: 1px solid #d7e1ca; border-radius: 6px; background: #f8faf3; }
.vin-evidence-card > span { display: block; font-size: 12px; color: #526e3f; margin-bottom: 12px; }
.vin-evidence-card > strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.6; color: #355523; overflow-wrap: anywhere; }
.vin-tier { display: inline-block; padding: 4px 7px; margin-top: 14px; border-radius: 3px; background: #eaf0df; color: #4b6835; font: 10px/1.7 var(--sans); letter-spacing: .2px; }
.vin-tier-published-record { background: #e1edcf; color: #3d5f22; }
.vin-tier-imported, .vin-tier-user-reported { background: #FFF0F0; color: #8F0010; }
.vin-tier-not-established { background: #f0e9dd; color: #8F0010; }
.vin-evidence-card p { color: #567344; font-size: 13px; line-height: 1.8; margin: 14px 0 0; }
.vin-evidence-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.vin-evidence-links a { color: #A80000; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.vin-imported-record { padding: 20px 0; font-size: 14px; color: #506e3b; }
.vin-imported-record pre { max-height: 300px; overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: #f5f8ec; color: #425f2c; font: 12px/1.9 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Local parts catalog */
.parts-import { margin-bottom: 34px; }
.parts-import-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.parts-import-actions label { cursor: pointer; }
.parts-import-actions .outline-button { font-size: 13px; }
.parts-selectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.parts-selectors select { width: 100%; }
.parts-search { display: flex; margin: 24px 0; }
.parts-search input { width: 100%; }
.parts-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; margin: 26px 0; }
.parts-layout .panel { min-width: 0; padding: 23px; }
.parts-layout h3 { font-size: 19px; }
.parts-zoom { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.parts-zoom button { min-height: 38px; min-width: 34px; padding: 7px 10px; border: 1px solid #c9d7ba; border-radius: 4px; background: #fff; font-size: 14px; }
.parts-zoom span { min-width: 35px; font-size: 12px; }
.parts-image-scroll { min-height: 150px; max-height: 700px; overflow: auto; background: #fff; }
.parts-image-stage { position: relative; margin: auto; }
.parts-image-stage img { display: block; width: 100%; height: auto; }
.parts-hotspots { position: absolute; inset: 0; pointer-events: none; }
.parts-hotspot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; min-width: 31px; min-height: 31px; padding: 3px 5px; border: 2px solid #A80000; border-radius: 50%; background: #fff9e8; color: #8F0010; font: 600 12px/1.4 var(--sans); }
.parts-hotspot.selected { background: #A80000; color: #fff; box-shadow: 0 0 0 4px #ED000030; }
.parts-table-scroll { max-height: 700px; overflow: auto; }
.parts-table-panel .vin-fields { min-width: 340px; }
.parts-row.selected { background: #FFF0F0; }
.parts-row p { margin: 10px 0; font-size: 14px; }
.parts-row small { font-size: 12px; }
.parts-callout { min-width: 32px; min-height: 34px; background: transparent; color: #A80000; font: 600 14px var(--sans); }
.parts-copy { display: inline-block; background: transparent; color: #A80000; font-size: 12px; padding: 6px; margin-left: 5px; }
.parts-match-list { display: grid; gap: 9px; max-height: 320px; overflow: auto; }
.parts-match-list button { padding: 17px; border: 1px solid #d4dfc8; border-radius: 5px; background: #fff; text-align: left; font-size: 14px; }
.parts-match-list small { display: block; margin-top: 7px; color: #597346; font-size: 12px; }
.parts-empty { margin: 28px 0; }
.parts-empty .pdf-file-symbol { margin-bottom: 18px; }

/* Dialogs */
dialog { width: auto; max-width: calc(100vw - 32px); padding: 0; border: 1px solid #d5dfca; border-radius: 10px; color: var(--ink); box-shadow: 0 20px 80px #101a1033; }
dialog::backdrop { background: #15201499; }
#search-dialog { width: 720px; max-height: 78vh; top: 10vh; margin: 0 auto; }
.search-dialog-top { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.search-dialog-top input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; }
.search-dialog-top svg { color: #647e4e; }
.search-hint { padding: 20px 24px 10px; font-size: 11px; font-weight: 500; letter-spacing: .7px; color: #5a7544; }
.search-result { display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 24px; background: #fff; text-align: left; }
.search-result:hover { background: #f1f6e8; color: inherit; }
.search-result strong { display: block; font-size: 15px; line-height: 1.5; }
.search-result small { display: block; font-size: 12px; line-height: 1.7; color: #5a7446; margin-top: 5px; }
.search-no-results { padding: 28px; color: #526e3e; }
#article-dialog { width: 680px; max-height: 82vh; padding: 32px; }
.about-close { float: right; min-width: 40px; min-height: 40px; background: transparent; color: #536e3e; font-size: 20px; }
.about-copy { font-size: 15px; line-height: 1.85; color: #4f6c3b; }
#toast { position: fixed; z-index: 100; bottom: 24px; left: calc(50% + var(--sidebar) / 2); max-width: calc(100vw - 40px); transform: translate(-50%, 100px); padding: 14px 24px; border-radius: 6px; background: #2b4021; color: #fff; box-shadow: 0 8px 24px #0002; opacity: 0; font-size: 14px; transition: transform .2s, opacity .2s; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Layout changes happen before text has to become small. */
@media (max-width: 1320px) {
  .top-link { display: none; }
  .search-trigger { width: 255px; }
  .parts-layout { grid-template-columns: 1fr; }
  .rom-layout, .vin-layout { grid-template-columns: 1fr; }
  .vin-how { display: none; }
  .pdf-card.resource-card { grid-template-columns: 44px minmax(0, 1fr) 138px; gap: 18px; }
  .pdf-file-symbol { width: 42px; }
  .chapter { flex-wrap: wrap; }
}
@media (max-width: 1000px) {
  :root { --sidebar: 280px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open ~ .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: #13200f77; }
  .shell { margin-left: 0; }
  .icon-button.mobile-menu { display: inline-flex; }
  .topbar { position: sticky; top: 0; z-index: 20; padding: 14px 28px; min-height: 74px; }
  .search-trigger { width: 270px; }
  .breadcrumb > span:first-of-type, .breadcrumb .slash { display: none; }
  main { padding: 34px 28px 52px; }
  .hero h1 { font-size: 58px; }
  .vin-reference-list { grid-template-columns: 1fr; }
  #toast { left: 50%; }
  footer { padding: 24px 28px; }
  footer > span:nth-child(2) { display: none; }
}
@media (max-width: 700px) {
  .topbar { padding: 12px 18px; gap: 12px; }
  .breadcrumb { font-size: 13px; }
  .breadcrumb strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100vw - 148px); }
  .search-trigger { width: 44px; min-height: 44px; padding: 10px; justify-content: center; }
  .search-trigger > span:nth-child(2), .search-trigger kbd { display: none; }
  main { padding: 28px 18px 44px; }
  .page-intro { margin-bottom: 28px; align-items: flex-start; }
  .page-intro > .outline-button { display: none; }
  .intro-copy { font-size: 15px; line-height: 1.8; }
  .eyebrow { font-size: 10px; letter-spacing: 1px; }
  h1 { font-size: 32px; letter-spacing: -.6px; }
  h2, .section-heading h2 { font-size: 23px; }
  .hero { min-height: 390px; background-position: 64% center; }
  .hero-inner { padding: 32px 25px; }
  .hero:before { background: linear-gradient(90deg, #111a16ee, #111a16bb 75%, #111a1680); }
  .hero h1, .hero h2 { font-size: clamp(38px, 10.5vw, 56px); margin: 26px 0 20px; }
  .hero p { font-size: 15px; max-width: 32ch; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 1px; }
  .home-section { margin-top: 32px; }
  .category-grid, .content-grid, .archive-grid, .generation-grid, .lower-grid { grid-template-columns: 1fr; gap: 16px; }
  .category-card { padding: 23px 20px; gap: 17px; }
  .category-card h3 { font-size: 18px; }
  .category-card p { font-size: 14px; }
  .quick-tools { align-items: flex-start; gap: 7px; padding: 20px; flex-direction: column; margin-bottom: 32px; }
  .quick-tools > strong { margin-bottom: 7px; }
  .quick-tools a { min-height: 40px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
  .section-heading .text-link { font-size: 13px; }
  .article-row { padding: 20px 18px; gap: 13px; }
  .row-title { font-size: 15px; }
  .row-meta { flex-wrap: wrap; gap: 7px; font-size: 11px; }
  .article-symbol { width: 34px; height: 38px; }
  .toolbar { gap: 10px; }
  .filter-search { flex-basis: 100%; min-width: 0; }
  .filter-select { flex: 1; min-width: 0; font-size: 14px; }
  .resource-card, .panel, .generation-card { padding: 23px; }
  .resource-card h3 { font-size: 21px; }
  .article-body p, .article-body li { font-size: 16px; line-height: 1.9; }
  .article-body h2 { font-size: 23px; }
  .chapter { padding: 22px 18px; gap: 14px; }
  .chapter-number { min-width: 22px; }
  .chapter .outline-button { margin-left: 36px; }
  .steps { flex-direction: column; }
  .step { display: flex; align-items: center; gap: 14px; }
  .step b { margin: 0; }
  .form-grid, .form-grid[style], .parts-selectors { grid-template-columns: 1fr !important; }
  .result-item { font-size: 12px; gap: 14px; }
  .result-item dd { max-width: 64%; }
  .pdf-overview { gap: 12px 20px; font-size: 13px; }
  .pdf-overview .pdf-pack-version { margin-left: 0; }
  .pdf-card.resource-card { grid-template-columns: 1fr; gap: 14px; padding: 23px; }
  .pdf-card > .pdf-file-symbol { display: none; }
  .pdf-card h3 { font-size: 20px; }
  .pdf-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 0; }
  .pdf-actions .button-primary { min-width: 145px; }
  .pdf-actions .text-link { margin: 0; }
  .vin-evidence-grid, .vin-coverage-grid, .vin-checks { grid-template-columns: 1fr; }
  .vin-home-banner { flex-wrap: wrap; gap: 16px; padding: 23px; }
  .vin-home-banner > .text-link { margin-left: 0; }
  .vin-input { font-size: 17px; padding: 14px 12px; }
  .vin-input::placeholder { font-size: 13px; }
  .vin-mode-label { flex-basis: 100%; }
  .vin-extra-form { padding: 16px; }
  .vin-identifier { font-size: 17px; }
  .vin-result-top h2 { font-size: 25px; }
  .vin-coverage > summary { padding: 22px 20px; font-size: 16px; }
  .vin-coverage-grid { padding: 0 20px 20px; }
  .vin-reference-list { padding: 10px 20px 20px; }
  .vin-report-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .vin-evidence-card { padding: 20px; }
  .parts-layout .panel { padding: 18px; }
  .parts-import-actions .outline-button { font-size: 12px; }
  .parts-layout .section-heading { gap: 12px; }
  .note-banner { font-size: 12px; }
  .search-dialog-top { gap: 10px; padding: 16px; }
  .search-dialog-top input { font-size: 15px; }
  .search-result { padding: 16px; gap: 13px; }
  .search-result strong { font-size: 14px; }
  #article-dialog { padding: 25px; }
  footer { padding: 23px 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition: none !important; scroll-behavior: auto !important; }
}

/* 1.3 individual chassis-record results: catalogue-style field rows. */
.vin-database-banner { display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:18px 22px;margin:0 0 26px;border:1px solid #d3dfc9;border-radius:8px;background:#eaf2e1; }
.vin-database-banner strong { font-size:16px;color:#304b21; }
.vin-database-banner span { font-size:13px;color:#49653a; }
.vin-record-id { font:500 16px/1.6 var(--mono);color:#365470!important; }
.vin-catalogue-result { border-top-color:#63894d; }
.vin-catalogue-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:24px; }
.vin-catalogue-grid dl { margin:0;min-width:0; }
.vin-catalogue-field { display:flex;justify-content:space-between;align-items:flex-start;gap:18px;min-height:45px;padding:12px 0;border-bottom:1px solid #e0e5eb; }
.vin-catalogue-field dt { flex-shrink:0;color:#536e89;font-size:13px;font-weight:400; }
.vin-catalogue-field dd { margin:0;text-align:right;color:#092b4e;font-size:14px;font-weight:500;line-height:1.6;overflow-wrap:anywhere; }
.vin-record-caption { color:#57724c;font-size:12px;line-height:1.8;margin:22px 0 0; }
.vin-record-provenance,.vin-technical { margin-top:22px;padding-top:18px;border-top:1px solid var(--line); }
.vin-record-provenance summary,.vin-technical>summary,.vin-format-examples summary { cursor:pointer;font-size:13px;font-weight:500;color:#4b6740; }
.vin-record-provenance p { font-size:13px;line-height:1.85;color:#4c6440;margin:16px 0; }
.vin-record-provenance pre { padding:16px;background:#f3f7ec;border:1px solid var(--line);border-radius:5px;font:12px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere; }
.vin-format-examples { margin-top:17px; }
.vin-format-examples>div { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px; }
.vin-lookup-miss { padding:19px 23px;margin-bottom:24px;border:1px solid #F5B8B8;border-left:3px solid #A80000;border-radius:6px;background:#fcf7e9;color:#8F0010;font-size:14px;line-height:1.85; }
.vin-tier-catalogue-record { background:#e0edd3;color:#35591f; }
@media(max-width:1150px){.vin-catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;}}
@media(max-width:700px){.vin-catalogue-grid{grid-template-columns:1fr;gap:0;}.vin-catalogue-field{padding:13px 0;}.vin-catalogue-field dt{font-size:13px;}.vin-catalogue-field dd{font-size:14px;}.vin-database-banner{padding:18px;}.vin-database-banner span{font-size:12px;}}

/* v1.5 - scoped ASA option-pack details. */
.vin-factory-options { margin-top:26px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#fff; }
.vin-factory-options h3 { margin:0 0 8px; }
.vin-option-list { margin:18px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px; }
.vin-option-list > div { display:grid;grid-template-columns:70px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line); }
.vin-option-list dt { font:600 14px/1.65 var(--mono);color:var(--red);white-space:pre; }
.vin-option-list dd { margin:0;font-size:14px;overflow-wrap:anywhere; }
.vin-option-list + .tool-note { margin-bottom:0; }
@media(max-width:700px) { .vin-option-list { grid-template-columns:1fr; }.vin-factory-options { padding:18px; } }

/* Build numbers: a compact index and one readable chart at a time. */
.guide-collection-intro { display:flex;flex-wrap:wrap;gap:5px 20px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:8px;margin:0 0 24px; }
.guide-collection-intro>strong { font-size:15px; }
.guide-collection-intro>span { font-size:13px;color:var(--muted); }
.guide-collection-intro details { flex-basis:100%;margin-top:8px; }
.guide-collection-intro summary,.guide-review summary { cursor:pointer;font-size:12px;font-weight:600; }
.guide-collection-intro p { font-size:13px;line-height:1.85;max-width:850px;margin:12px 0 0; }
.guide-scope { margin-top:25px;padding:19px 22px;border-left:3px solid var(--red);background:#fff2f2;border-radius:4px; }
.article-body .guide-scope p { margin:5px 0 0;font-size:14px; }
.guide-steps { padding-left:28px; }
.guide-steps li { padding-left:8px;margin-bottom:20px;line-height:1.9; }
.guide-steps li::marker { color:#A80000;font-weight:700; }
.guide-completion { background:#edf3e6;border:1px solid var(--line);padding:21px 24px;border-radius:6px;margin-top:30px; }
.article-body .guide-completion h2 { margin:0 0 10px;font-size:20px; }
.article-body .guide-completion p { margin:0;font-size:14px; }
.guide-review { margin-top:18px;padding-top:16px;border-top:1px solid var(--line); }
.guide-review p,.guide-review li { font-size:12px;line-height:1.85;color:var(--muted); }
.guide-review li { margin:12px 0; }
.build-table .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.build-summary { display:flex;align-items:center;gap:28px;padding:22px 26px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:28px; }
.build-summary>div { flex-shrink:0;display:flex;flex-direction:column; }
.build-summary strong { font:700 32px/1.15 var(--display); }
.build-summary span,.build-credit { font-size:12px;color:var(--muted); }
.build-summary p { font-size:13px;line-height:1.8;margin:0;max-width:660px; }
.build-layout { display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start; }
.build-selector { min-width:0; }
.build-selector .filter-search { width:100%;background:#fff; }
.build-filters { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px; }
.build-filters label { font-size:12px;color:var(--muted); }
.build-filters select { width:100%;min-width:0;margin-top:6px;background:#fff; }
.build-list { max-height:690px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff; }
.build-choice { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:17px 16px;text-align:left;background:#fff;border-bottom:1px solid var(--line);border-left:3px solid transparent; }
.build-choice:last-child { border-bottom:0; }
.build-choice strong { display:block;font-size:13px;line-height:1.55; }
.build-choice small { display:block;color:var(--muted);font-size:11px;margin-top:3px; }
.build-choice b { font-size:13px;font-variant-numeric:tabular-nums; }
.build-choice:hover { background:#f5f6f2; }
.build-choice.selected { background:#fff2f2;border-left-color:var(--red); }
.build-choice.selected b { color:#A80000; }
.build-detail { padding:28px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:8px; }
.build-detail-head { display:flex;justify-content:space-between;gap:20px;align-items:start; }
.build-detail h2 { font-size:27px;line-height:1.25;margin:12px 0 7px; }
.build-detail h3 { margin:27px 0 8px;font-size:17px; }
.build-total { display:flex;flex-direction:column;text-align:right;flex-shrink:0; }
.build-total strong { font:700 45px/1.1 var(--display);letter-spacing:-1px; }
.build-total span { font-size:12px;color:var(--muted); }
.build-range { margin-top:23px;padding:16px;background:var(--paper);border-radius:5px; }
.build-range span { display:block;color:var(--muted);font-size:11px;margin-bottom:5px; }
.build-range code { font:500 12px/1.8 var(--mono);overflow-wrap:anywhere; }
.build-table-scroll { overflow-x:auto; }
.build-table { border-collapse:collapse;width:100%;font-size:14px; }
.build-table th,.build-table td { padding:13px 8px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums; }
.build-table th:first-child { padding-left:0;text-align:left; }
.build-table thead th { font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:500;color:var(--muted); }
.build-table tbody th { font-weight:500; }
.build-table code { font:600 13px var(--mono); }
.build-table small { display:block;font:400 11px/1.6 var(--sans);color:var(--muted);max-width:160px;margin-top:4px; }
.build-table td:last-child { width:35%;padding-right:0; }
.build-bar { display:block;height:4px;margin-top:7px;background:#f5e9e9;border-radius:2px;overflow:hidden; }
.build-bar i { display:block;height:100%;background:var(--red); }
.build-breakdown { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.build-breakdown>div { padding:17px;background:var(--paper);border-radius:5px;display:flex;flex-direction:column; }
.build-breakdown span { font-size:12px; }
.build-breakdown strong { font:700 30px/1.4 var(--display); }
.build-breakdown small { font-size:11px;color:var(--muted); }
.build-note { padding-left:15px;border-left:2px solid var(--red);font-size:12px;line-height:1.85;margin:24px 0; }
.build-original { margin-top:24px;border-top:1px solid var(--line);padding-top:18px; }
.build-original summary,.build-collection-notes summary { cursor:pointer;font-size:14px;font-weight:600; }
.build-original summary span,.build-collection-notes summary span { float:right;color:var(--red); }
.build-original img { display:block;width:100%;height:auto;margin-top:18px;border-radius:4px; }
.build-collection-notes { margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#fff; }
.build-collection-notes p,.build-collection-notes li { font-size:13px;line-height:1.85; }
@media(max-width:1150px){.build-layout{grid-template-columns:255px minmax(0,1fr);gap:18px;}.build-detail{padding:22px;}.build-detail-head{flex-direction:column;gap:15px;}.build-total{text-align:left;}.build-summary{gap:20px;}}
@media(max-width:800px){.build-layout{grid-template-columns:1fr;}.build-list{max-height:280px;}.build-detail-head{flex-direction:row;}.build-summary{flex-wrap:wrap;}.build-summary p{flex-basis:100%;}.build-detail h2{font-size:24px;}.build-total strong{font-size:36px;}}
@media(max-width:500px){.build-detail{padding:20px 17px;}.build-detail-head{flex-direction:column;}.build-summary{padding:20px;}.build-breakdown{grid-template-columns:1fr;}.build-collection-notes{padding:20px;}}

/* Exact-record rarity: all denominators and reference scope stay visible. */
.vin-rarity { margin:28px 0;padding:26px 0;border-top:1px solid var(--border,#d9ded5);border-bottom:1px solid var(--border,#d9ded5); }
.vin-rarity .section-heading { flex-wrap:wrap;gap:12px; }
.vin-rarity-group { line-height:1.8;margin:16px 0; }
.vin-rarity-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.vin-rarity-card { min-width:0;padding:22px;background:#f8f9f4;border:1px solid #d9ded5;border-radius:6px; }
.vin-rarity-card h4 { margin:0 0 8px;font-size:14px; }
.vin-rarity-card p { font-size:13px;line-height:1.7;margin:8px 0; }
.vin-rarity-codes { overflow-wrap:anywhere;font-family:monospace; }
.vin-rarity-count { display:block;font-size:28px;line-height:1.4;color:var(--red,#ED0000); }
.vin-rarity-card small { display:block;font-size:12px;line-height:1.6; }
.vin-rarity-method { margin-top:18px;font-size:13px;line-height:1.8; }
.vin-rarity-method summary { cursor:pointer; }
@media(max-width:700px){.vin-rarity-grid{grid-template-columns:1fr;}.vin-rarity-card{padding:18px;}.vin-rarity-count{font-size:25px;}}

/* Browser ROM editor and immutable map suggestions. */
.rom-editor-intro,.rom-sharing-explainer { display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 24px;font-size:14px; }
.rom-editor-intro button,.rom-sharing-explainer a { margin-left:auto; }
.rom-editor-load { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.rom-editor-load .panel { min-width:0; }
.rom-editor-drop { margin:20px 0 12px;min-height:180px; }
.rom-editor-drop span { font-size:13px; }
.rom-definition-inputs { display:grid;gap:12px; }
.rom-definition-inputs label { display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px; }
.rom-definition-inputs input { max-width:100%;font-size:12px; }
.rom-definition-select { margin:16px 0; }
.rom-definition-select select { max-width:100%; }
.rom-editor-status { min-height:24px;line-height:1.7;font-size:14px;color:#355a42;overflow-wrap:anywhere; }
.rom-editor-error { color:#a80000;padding:12px 16px;border-left:3px solid var(--red);background:#fff1f0; }
.rom-demo-label { color:#a80000;font-weight:700; }
.rom-action-row { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
button:disabled { opacity:.5;cursor:not-allowed; }
.rom-session-bar { margin:22px 0;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center; }
.rom-session-bar>div:first-child { display:grid;gap:5px; }
.rom-session-bar>p { width:100%;margin:0; }
#editor-changes { color:var(--muted);font-size:13px; }
.rom-workbench { display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start; }
.rom-table-library { padding:22px;position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto; }
.rom-table-library h2 { font-size:20px;margin-bottom:16px; }
.rom-table-library .form-field { margin-bottom:12px; }
.rom-table-item { display:block;width:100%;padding:12px;text-align:left;background:transparent;border-left:3px solid transparent;border-bottom:1px solid var(--line); }
.rom-table-item strong { display:block;font-size:13px;line-height:1.5; }
.rom-table-item small { display:block;margin-top:5px;font-size:11px;line-height:1.5;overflow-wrap:anywhere; }
.rom-table-item.active { background:#fff1f0;border-left-color:var(--red); }
.rom-table-item:disabled { opacity:.6; }
.rom-map-panel { min-width:0;padding:26px; }
.rom-map-panel .section-heading { flex-wrap:wrap;gap:12px; }
.rom-map-panel h2,.rom-shared-map h2 { font-size:24px; }
.rom-map-controls { display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:14px;margin:20px 0; }
.rom-map-controls>label { display:grid;gap:6px;font-size:12px; }
.rom-map-controls select,.rom-bulk-tools select,.rom-bulk-tools input { border:1px solid #bdc9b6;border-radius:4px;padding:9px;background:#fff;max-width:100%;font-size:13px; }
.rom-grid-scroll { max-width:100%;overflow:auto;max-height:600px;border:1px solid var(--line);border-radius:5px; }
.rom-grid { border-collapse:separate;border-spacing:0;font:12px/1.5 var(--mono);width:100%; }
.rom-grid caption { text-align:left;background:#f0f3ed;color:var(--muted);padding:10px 12px;font-family:var(--sans);font-size:12px; }
.rom-grid th { position:sticky;top:0;z-index:1;background:#eaf0e4;padding:9px;white-space:nowrap;font-weight:600;border-right:1px solid #dce1d9;border-bottom:1px solid #dce1d9; }
.rom-grid tbody th { left:0;z-index:2; }
.rom-grid td { min-width:68px;padding:0;border-right:1px solid #e0e5dc;border-bottom:1px solid #e0e5dc;background:#fff; }
.rom-grid td input,.rom-grid td select { display:block;width:100%;min-width:68px;border:0;border-radius:0;padding:9px 7px;font:inherit;text-align:right;background:transparent; }
.rom-grid td input:focus,.rom-grid td select:focus { outline:2px solid #a80000;outline-offset:-2px; }
.rom-grid td.selected { box-shadow:inset 0 0 0 2px #73896a;background:#f1f5eb; }
.rom-grid td.modified { background:#ffe5e3;color:#9c0000; }
.rom-grid td.modified.selected { background:#ffd4d0; }
.rom-grid td input[readonly] { color:#748071; }
.rom-grid-legend { display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:14px 0;font-size:12px;color:var(--muted); }
.rom-modified-dot { width:10px;height:10px;border:1px solid #edb8b1;background:#ffe5e3; }
.rom-bulk-tools { display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:16px;background:#f6f7f3;border:1px solid var(--line);border-radius:5px; }
.rom-bulk-tools label { display:grid;gap:5px;font-size:12px;min-width:90px;flex:1; }
.rom-bulk-tools input { width:100%; }
.rom-paste { margin-top:18px;font-size:13px; }
.rom-paste summary,.rom-editor-help summary { cursor:pointer;font-weight:600; }
.rom-paste textarea { display:block;width:100%;padding:12px;margin:12px 0;border:1px solid var(--line);font-family:var(--mono); }
.rom-editor-help { margin-top:28px;font-size:14px; }
.rom-surface { width:100%;height:auto;max-height:450px;stroke:none; }
.rom-surface-angle { display:flex;align-items:center;gap:16px;font-size:12px; }
.rom-share-dialog { max-width:650px;width:calc(100% - 32px);padding:32px;border:1px solid var(--line);border-radius:10px; }
.rom-share-dialog::backdrop { background:#14201999; }
.rom-share-dialog .form-field { margin:18px 0; }
.form-field textarea { padding:12px;border:1px solid #bdc9b6;border-radius:4px;resize:vertical;font:inherit;background:#fff; }
.rom-map-import { display:flex;align-items:center;flex-wrap:wrap;gap:18px;font-size:14px; }
.rom-map-import input { max-width:100%; }
.rom-shared-map { margin:20px 0;min-width:0; }
.rom-shared-map .section-heading { flex-wrap:wrap;gap:12px; }
.rom-shared-note { white-space:pre-wrap;border-left:3px solid #819775;padding:12px 18px;background:#f6f7f3; }
.rom-shared-submit { margin-top:28px;border-top:1px solid var(--line);padding-top:24px; }
.rom-shared-submit form { display:grid;gap:14px;max-width:680px; }
.rom-shared-submit form button { justify-self:start; }
.rom-version-item { display:grid;gap:5px;border-bottom:1px solid var(--line);padding:16px 0; }
.rom-version-item small { color:var(--muted);font-size:12px; }
.rom-version-item span { white-space:pre-wrap;font-size:14px; }
.rom-share-history h2 { font-size:22px; }
@media(max-width:1200px){.rom-workbench{grid-template-columns:230px minmax(0,1fr);}.rom-map-panel{padding:20px;}.rom-session-bar .rom-action-row{width:100%;}}
@media(max-width:900px){.rom-editor-load{grid-template-columns:1fr;}.rom-workbench{grid-template-columns:1fr;}.rom-table-library{position:static;max-height:340px;}.rom-editor-intro button{margin-left:0;}.rom-map-panel{padding:18px;}.rom-session-bar{padding:20px;}}
@media(max-width:500px){.rom-grid td,.rom-grid td input,.rom-grid td select{min-width:62px;}.rom-share-dialog{padding:22px;}.rom-action-row .button-primary{width:100%;justify-content:center;}}

.rom-custom-xml { margin-top:18px;font-size:13px; }
.rom-custom-xml summary { cursor:pointer;font-weight:600; }
.rom-custom-xml .rom-definition-inputs { margin:14px 0; }
#editor-dependency .form-field { margin-top:16px; }

/* Numeric map values use a relative red scale; edits and selection retain separate outlines. */
.rom-grid td[style] { background:var(--cell-heat,#fff); }
.rom-grid td.modified { outline:2px solid #a80000;outline-offset:-3px; }
.rom-grid td.selected { box-shadow:inset 0 0 0 2px #536c49; }
.rom-heat-key { width:55px;height:10px;border:1px solid #dfb8b8;background:linear-gradient(90deg,#fff6f6,#f8c6c6); }
.rom-storage-notice { padding:10px 12px;border-left:3px solid #ED0000;background:#fff3f3;font-size:12px;line-height:1.6; }

body.section-off-saved [data-save],body.section-off-map [data-desk-command="share"],body.section-off-map [data-local-command="share"],body.section-off-rom #shared-apply{display:none!important}
.custom-section{max-width:900px;overflow-wrap:anywhere}.custom-section p{line-height:1.8}

.vin-search-counter{margin:0 0 18px;padding:12px 16px;border:1px solid var(--border,#dce2d6);border-radius:8px;font-size:12px}.vin-search-counter strong{font-size:18px;margin-right:7px}

[data-home-block]:first-child { margin-top: 0; }
.home-text > p { line-height: 1.7; }
body[data-homepage-preview] main { padding: 24px; min-height: 0; }
@media (max-width: 650px) { body[data-homepage-preview] main { padding: 16px; } }
[data-home-block] + .hero { margin-top: 40px; }
[data-home-block]:not([data-home-block="cards"]) + .quick-tools { margin-top: 40px; }

.vin-showcase{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:12px 15px;border:1px solid var(--line);border-radius:8px;background:#f0f4e9}
.vin-showcase > p { flex: 1 1 240px; margin: 0; padding: 5px 8px; border-radius: 5px; color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .vin-showcase > p { animation: vin-showcase-pulse 1.6s ease-in-out 3; }
}
@keyframes vin-showcase-pulse {
  0%, 100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px transparent, 0 0 0 0 transparent;
    color: var(--muted);
  }
  50% {
    background-color: #ffd6d2;
    box-shadow: inset 0 0 0 2px #c9241b, 0 0 0 3px rgb(237 0 0 / 22%);
    color: #741c17;
  }
}