/* 4x4manuals.com — "Instrument cluster" (C2) design.
   Fonts are served from this site (SIL OFL 1.1, see assets/fonts/): no request to a third party. */
@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000; src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000; src: url("fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); }

:root {
  color-scheme: light;
  --bg: #eef1f4;
  --surface: #ffffff;
  --ink: #1e2328;
  --muted: #5a6470;
  --line: #dce1e7;
  --soft: #eef1f4;
  --accent: #0e7c86;
  --accent-ink: #0b6a73;
  --accent-soft: #e3f1f2;
  --dark: #1e2328;
  --dark-2: #2a3037;
  --dark-line: #3b434c;
  --dark-muted: #a9b3bf;
  --viewer: #e3e7ec;
  --paper: #ffffff;
  --amber: #b7791f;
  --red: #c0392b;
  --green: #1f8a4c;
  --danger: #a72b25;
  --mark: #ffe27a;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 16px 40px rgb(20 30 45 / 14%);
  --display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --body: "DM Sans", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  /* 30.09.2026 (owner): wider pages, so the manual is shown larger on big screens. */
  --page-max: 1920px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: var(--body); font-size: 16px; line-height: 1.55; }
body.reader-locked { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: #08525a; text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--radius-sm); color: #fff; background: var(--dark); font-weight: 700; }
.skip-link:focus { top: 12px; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.eyebrow { margin-bottom: 6px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.section-title { font-family: var(--display); font-size: clamp(24px, 3vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.display-title { font-family: var(--display); font-size: clamp(38px, 6vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
.lede { max-width: 640px; margin-top: 12px; color: var(--muted); font-size: 17px; }
.text-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons */
.primary-button, .secondary-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.primary-button { border: 0; color: #fff; background: var(--accent); }
.primary-button:hover { color: #fff; background: var(--accent-ink); text-decoration: none; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.secondary-button:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }
.plain-button { padding: 6px 0; border: 0; color: var(--accent-ink); background: none; font-size: 14px; font-weight: 600; }

/* Header */
.site-header { position: relative; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 14px max(20px, calc((100vw - var(--page-max)) / 2 + 40px)); border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); white-space: nowrap; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border: 3px solid var(--accent); border-radius: 50%; font-family: var(--display); font-size: 14px; font-weight: 700; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-word { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.brand-copy small { color: var(--muted); font-size: 11px; }
.global-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 620px; margin: 0 auto; }
.search-field { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: var(--soft); }
.search-field:focus-within { border-color: var(--accent); background: var(--surface); }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: none; font-size: 15px; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 30; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--soft); text-decoration: none; }
.search-results strong { font-size: 15px; }
.search-results small { color: var(--muted); font-size: 12px; }
.search-empty { padding: 12px; color: var(--muted); font-size: 14px; }
.top-nav { display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.top-nav a { color: var(--ink); }
.saved-button { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 12px; color: var(--ink); background: var(--soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.saved-button:hover { background: var(--line); }
.saved-count { min-width: 22px; padding: 1px 6px; border-radius: 11px; color: #fff; background: var(--accent); font-family: var(--mono); font-size: 12px; text-align: center; }
.saved-panel { padding: 18px max(20px, calc((100vw - var(--page-max)) / 2 + 40px)); border-bottom: 1px solid var(--line); background: var(--surface); }
.saved-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.saved-head h2 { font-family: var(--display); font-size: 20px; }
.saved-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; }
.saved-list a { font-size: 14px; font-weight: 600; }
.saved-empty { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* Page frame */
.page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 24px clamp(16px, 2.6vw, 40px) 48px; flex: 1 0 auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs span:last-child { color: var(--ink); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-head p, .section-head a { color: var(--muted); font-size: 14px; }

/* Home */
.home-hero { padding: clamp(28px, 5vw, 56px); border-radius: 22px; color: #eef1f4; background: var(--dark); }
.home-hero > div { max-width: 860px; }
.home-hero .eyebrow { color: var(--dark-muted); }
.home-hero .lede { color: var(--dark-muted); }
.home-hero .home-search { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 760px; margin: 26px 0 0; padding: 6px; border-radius: 16px; background: var(--dark-2); }
.home-search .search-field { min-height: 54px; border-radius: 12px; background: var(--surface); }
.home-search input { font-size: 17px; }
.home-search-button { min-width: 150px; padding: 0 20px; border: 0; border-radius: 12px; color: #fff; background: var(--accent); font-size: 15px; font-weight: 600; }
.home-search-button:hover { background: var(--accent-ink); }
.home-search .search-results { color: var(--ink); }
.search-hint { margin-top: 12px; color: var(--dark-muted); font-size: 13px; }
.catalog-section, .latest-section { margin-top: 24px; }
.make-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.make-card { display: grid; grid-template-rows: 120px auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); }
.make-card:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.make-card-logo { display: grid; place-items: center; padding: 20px; background: var(--soft); }
.make-card-logo img { max-width: 72%; height: 70px; object-fit: contain; }
.make-card-logo > span { font-family: var(--display); font-size: 56px; font-weight: 700; }
.make-card-copy { display: grid; gap: 4px; padding: 14px 16px 16px; }
.make-card-copy strong { font-family: var(--display); font-size: 20px; }
.make-card-copy > span { color: var(--muted); font-size: 13px; }
.make-card-copy b { color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.manual-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.manual-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); }
.manual-card:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.card-cover { display: grid; place-items: center; padding: 14px; background: var(--soft); }
.card-cover img { width: 100%; height: auto; max-height: 128px; object-fit: contain; border-radius: 4px; box-shadow: 0 6px 16px rgb(20 30 45 / 18%); }
.card-copy { display: grid; align-content: start; gap: 4px; padding: 16px; }
.card-copy small { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.card-copy strong { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.card-copy span { color: var(--muted); font-size: 13px; }
.card-copy b { margin-top: 8px; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.tool-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.tool-strip div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tool-strip strong, .tool-strip span { display: block; }
.tool-strip strong { font-family: var(--display); font-size: 17px; }
.tool-strip span { margin-top: 4px; color: var(--muted); font-size: 14px; }

/* Make hub */
.make-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 22px; color: #eef1f4; background: var(--dark); }
.make-hero .eyebrow { color: var(--dark-muted); }
.make-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.make-facts span { padding: 6px 12px; border-radius: 999px; color: #eef1f4; background: var(--dark-2); font-family: var(--mono); font-size: 13px; }
.make-cover-collage { display: flex; justify-content: center; gap: 12px; }
.make-cover-collage img { width: 120px; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgb(0 0 0 / 35%); }
.make-catalog { margin-top: 24px; }
.year-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.year-chips span { padding: 4px 9px; border-radius: 8px; background: var(--surface); font-family: var(--mono); font-size: 12px; }
.make-utility { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.make-utility h2 { font-family: var(--display); font-size: 18px; }
.make-utility > div { display: flex; flex-wrap: wrap; gap: 8px; }
.make-utility span { padding: 4px 10px; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: 13px; }

/* Model page: side column + main column */
.model-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.model-side, .model-main { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.hero-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; color: #eef1f4; background: var(--dark); }
.hero-card .breadcrumbs { margin: 0; color: var(--dark-muted); font-size: 12px; }
.hero-card .breadcrumbs a { color: var(--dark-muted); }
.hero-card .breadcrumbs span:last-child { color: #eef1f4; }
.hero-title { display: flex; gap: 14px; align-items: center; }
.hero-title img { width: 64px; height: auto; flex: 0 0 64px; border-radius: 6px; background: #fff; }
.hero-title p { margin-top: 6px; color: var(--dark-muted); font-size: 14px; }
.model-page-title { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.model-page-title span { display: block; margin-top: 4px; color: var(--dark-muted); font-family: var(--body); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.year-picker { display: flex; flex-direction: column; gap: 10px; }
.year-group h3 { margin-bottom: 6px; color: var(--dark-muted); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.year-chip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--dark-2); }
.year-chip { min-height: 40px; border: 0; border-radius: 9px; color: #eef1f4; background: transparent; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.year-chip:hover { background: var(--dark-line); }
.year-chip[aria-pressed="true"] { color: #fff; background: var(--accent); }
.hero-actions { display: grid; gap: 8px; }
.hero-actions > a { min-width: 0; padding: 8px 12px; white-space: normal; text-align: center; line-height: 1.25; }
.hero-download { color: var(--ink); background: #fff; }
.hero-download:hover { color: var(--ink); background: var(--accent-soft); }
.hero-amazon { border: 0; color: #eef1f4; background: var(--dark-2); }
.hero-amazon:hover { color: #fff; background: var(--dark-line); }
.side-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.side-head h2 { font-family: var(--display); font-size: 18px; }
.side-head span { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.side-toc-list { display: flex; max-height: min(520px, 62vh); flex-direction: column; margin: 0 -8px; overflow-y: auto; scrollbar-width: thin; }
.side-toc-list a, .side-toc-list button { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 8px; border: 0; border-radius: 8px; color: var(--ink); background: none; font-size: 14px; line-height: 1.3; text-align: left; }
.side-toc-list a:hover, .side-toc-list button:hover { background: var(--soft); text-decoration: none; }
.side-toc-list small { flex: 0 0 auto; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.side-toc-list [aria-current="true"] { color: var(--accent-ink); background: var(--accent-soft); font-weight: 700; }
.side-toc-list [aria-current="true"] small { color: var(--accent-ink); }
.side-note { color: var(--muted); font-size: 13px; }
.recall-status a { font-size: 14px; font-weight: 600; }
.recall-line { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.status-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: var(--muted); }
.recall-status[data-recall-state="clear"] .status-dot { background: var(--green); }
.recall-status[data-recall-state="open"] .status-dot { background: var(--red); }

/* Manual heading and reader */
.manual-editions { scroll-margin-top: 16px; }
.manual-edition { display: flex; flex-direction: column; gap: 16px; }
.reader-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.document-heading { flex: 1 1 260px; min-width: 0; }
.document-heading h2 { font-family: var(--display); font-size: 20px; line-height: 1.2; }
.document-meta { margin-top: 2px; color: var(--muted); font-size: 13px; }
.document-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pdf-reader { background: var(--surface); scroll-margin-top: 12px; }
.reader-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tool-group { display: flex; align-items: center; gap: 4px; }
.tool-actions { margin-left: auto; }
.tool-button { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--ink); background: var(--soft); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tool-button:hover { background: var(--line); }
.tool-button:disabled { opacity: .45; cursor: default; }
.tool-button[aria-pressed="true"], .tool-actions .tool-button[data-done] { color: #fff; background: var(--accent); }
.tool-step { font-size: 20px; }
.page-control { display: flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--muted); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.page-control input { width: 58px; min-height: 36px; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-family: var(--mono); font-size: 15px; text-align: center; appearance: textfield; }
.zoom-select { min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--soft); font-size: 14px; }
.reader-search { display: flex; flex: 0 1 320px; min-width: 200px; gap: 6px; }
.reader-search label { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: var(--soft); }
.reader-search label:focus-within { border-color: var(--accent); background: var(--surface); }
.reader-search input { width: 100%; min-width: 0; min-height: 40px; border: 0; outline: 0; color: var(--ink); background: none; font-size: 14px; }
.reader-search button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; background: var(--accent); font-size: 14px; font-weight: 600; }
.reader-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.reader-sidebar { grid-column: 1; width: 250px; padding: 12px; border-right: 1px solid var(--line); }
.stage-wrap { position: relative; grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.reader-search-tray { grid-column: 3; width: 270px; padding: 14px; border-left: 1px solid var(--line); }
.reader-sidebar-head, .tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
.reader-sidebar-title, .tray-head strong { font-size: 14px; font-weight: 700; }
.sidebar-close { display: none; }
.pdf-reader.sidebar-hidden .reader-sidebar { display: none; }
.outline { max-height: 640px; overflow-y: auto; scrollbar-width: thin; }
.outline button, .search-result { display: grid; width: 100%; gap: 2px; padding: 8px 10px; border: 0; border-radius: 10px; color: var(--ink); background: none; font-size: 13px; line-height: 1.35; text-align: left; }
.outline button:hover, .search-result:hover { background: var(--soft); }
.outline button[aria-current="true"], .search-result[aria-current="true"] { background: var(--accent-soft); }
.outline small, .search-result small { color: var(--muted); font-size: 12px; }
.search-result b { color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.search-result mark { padding: 0 1px; border-radius: 2px; color: inherit; background: var(--mark); }
.find-status { color: var(--muted); font-size: 12px; }
.search-results-pdf { display: grid; gap: 2px; max-height: 720px; margin: 8px -6px 0; overflow-y: auto; scrollbar-width: thin; }
.viewer-stage { position: relative; display: flex; min-height: 560px; flex-direction: column; align-items: center; justify-content: flex-start; overflow: auto; padding: 24px; background: var(--viewer); }
.pdf-page-wrap { position: relative; flex: 0 0 auto; margin: 0 auto; border-radius: 3px; background: var(--paper); box-shadow: 0 16px 40px rgb(20 30 45 / 18%);
  --user-unit: 1; --total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit)); --scale-round-x: 1px; --scale-round-y: 1px; }
.pdf-page { display: block; max-width: none; background: var(--paper); }
.reader-loading, .reader-error { position: absolute; inset: 0; display: grid; gap: 14px; justify-items: center; place-content: center; padding: 30px; color: var(--muted); background: var(--viewer); text-align: center; font-size: 15px; }
.reader-error { color: var(--danger); }
.reader-error .primary-button { color: #fff; }
.thumbnail-nav { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.thumbnail-nav > button { height: 96px; border: 0; border-radius: 10px; color: var(--ink); background: var(--soft); font-size: 22px; }
.thumbnail-nav > button:hover { background: var(--line); }
.thumbnail-nav > button:disabled { opacity: .35; cursor: default; }
.thumbnail-track { display: flex; min-width: 0; align-items: center; gap: 10px; overflow: hidden; padding: 4px 2px; }
.thumbnail-status { color: var(--muted); font-size: 13px; }
.page-thumb { display: grid; flex: 0 0 72px; justify-items: center; gap: 4px; padding: 4px; border: 0; border-radius: 8px; background: none; }
.page-thumb canvas { display: block; max-width: 58px; max-height: 76px; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgb(20 30 45 / 22%); }
.page-thumb span { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.page-thumb:hover { background: var(--soft); }
.page-thumb[aria-current="true"] canvas { outline: 3px solid var(--accent); outline-offset: 2px; }
.page-thumb[aria-current="true"] span { color: var(--accent-ink); font-weight: 700; }
.reader-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 12px; }
.reader-footer button { padding: 4px 0; border: 0; color: var(--accent-ink); background: none; font-family: var(--body); font-size: 13px; font-weight: 600; }
.reader-footer .resume-button { padding: 6px 12px; border-radius: 10px; background: var(--accent-soft); }
.pdf-reader:fullscreen { display: flex; flex-direction: column; overflow: auto; background: var(--surface); }
.pdf-reader:fullscreen .reader-body { flex: 1; }
.pdf-reader:fullscreen .viewer-stage { min-height: 0; }
.pdf-reader:fullscreen .outline { max-height: calc(100vh - 220px); }
.reader-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.reader-dialog::backdrop { background: rgb(15 20 28 / 55%); }
.reader-dialog form { display: grid; gap: 14px; }
.reader-dialog h3 { font-family: var(--display); font-size: 20px; }
.dialog-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.dialog-choice input[type="number"] { width: 80px; min-height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); }
.dialog-note { color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Selectable PDF text layer (PDF.js 5) */
.textLayer { color-scheme: only light; position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer .highlight { margin: -1px; padding: 1px; border-radius: 3px; background-color: rgb(255 196 0 / 45%); }
.textLayer .highlight.appended { position: initial; }
.textLayer ::selection { background: rgb(14 124 134 / 28%); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }

/* Under the reader */
.reading-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.quick-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quick-nav strong { margin-right: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.quick-nav a { padding: 6px 12px; border-radius: 999px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.quick-nav a:hover { border-color: var(--accent); text-decoration: none; }
.manual-reference-index > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.manual-reference-index h2, .recall-section h2, .complaints-section h2, .table-card h2, .faq-intro .section-title { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.manual-reference-index > header p { color: var(--muted); font-size: 14px; }
.manual-reference-index > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.manual-reference-index article { display: flex; flex-direction: column; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.manual-reference-index article h3 { margin-bottom: 6px; font-family: var(--display); font-size: 17px; }
.manual-reference-index article a { display: flex; min-height: 42px; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; }
.manual-reference-index article a:hover { color: var(--accent-ink); text-decoration: none; }
.manual-reference-index article a span { flex: 1; }
.manual-reference-index article a small { flex: 0 0 auto; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.manual-reference-index article a.manual-page-figure { display: flex; min-height: 0; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 8px; padding: 10px; border-radius: 12px; background: var(--soft); }
.manual-reference-index article a.manual-page-figure img { width: 110px; }
.wl-icon { width: 26px; height: 26px; flex: 0 0 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wl-red { color: var(--red); }
.wl-amber { color: var(--amber); }
.manual-page-figure { color: var(--muted); font-size: 12px; }
.manual-page-figure img { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgb(20 30 45 / 22%); }
.recall-section, .complaints-section, .community-section, .table-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.recall-section { scroll-margin-top: 16px; }
.recall-section > header, .complaints-section > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.recall-section > header > a, .complaints-section > header > a { font-size: 14px; font-weight: 600; }
.recall-empty { color: var(--muted); font-size: 15px; }
.recall-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.recall-list details { border-radius: 12px; background: var(--soft); }
.recall-list summary { display: grid; gap: 2px; padding: 12px 14px; cursor: pointer; }
.recall-list summary span { font-size: 15px; font-weight: 600; }
.recall-list summary small { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.recall-list details > p { padding: 0 14px 12px; color: var(--muted); font-size: 14px; }
.recall-meta { margin-top: 10px; color: var(--muted); font-size: 12px; }
.problem-report { align-self: flex-start; }
.problem-report > summary { color: var(--accent-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.problem-report > form { display: grid; grid-template-columns: minmax(200px, .6fr) minmax(260px, 1fr); gap: 12px 16px; margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.problem-report form > p { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.problem-report label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.problem-report select, .problem-report textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 15px; font-weight: 400; }
.problem-report form > div { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.problem-report [data-problem-report-status] { color: var(--muted); font-size: 13px; }

/* FAQ */
.faq-section { scroll-margin-top: 16px; }
.faq-edition { display: flex; flex-direction: column; gap: 12px; }
.faq-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.faq-intro p { max-width: 640px; color: var(--muted); font-size: 14px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq-item { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq-copy { min-width: 0; }
.faq-copy h3 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.faq-answer { margin-top: 6px; color: #3a424c; font-size: 15px; line-height: 1.6; }
.faq-steps, .faq-facts { display: grid; gap: 6px; padding-left: 20px; }
.faq-steps li::marker { color: var(--accent-ink); font-weight: 700; }
.faq-facts li::marker { color: var(--accent-ink); }
.faq-copy > a { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 12px; }
.faq-table-intro { margin-top: 6px; color: #3a424c; font-size: 15px; }
.faq-table-wrap { margin-top: 8px; overflow-x: auto; border-radius: 10px; background: var(--soft); }
.faq-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.faq-table th, .faq-table td { padding: 8px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.faq-table tr:first-child th, .faq-table tr:first-child td { border-top: 0; }
.faq-table th { width: 40%; font-weight: 600; }
.faq-table td { color: #3a424c; }

/* Complaints, questions and answers, tables */
.help-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.help-grid > :only-child { grid-column: 1 / -1; }
.complaints-note { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.complaints-table-wrap { overflow-x: auto; }
.complaints-table, .plain-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.complaints-table th, .complaints-table td, .plain-table th, .plain-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--soft); text-align: left; vertical-align: top; }
.complaints-table thead th, .plain-table thead th { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; }
.complaints-table td:nth-child(2) { font-family: var(--mono); white-space: nowrap; }
.complaints-table td:last-child { color: var(--muted); }
.plain-table tbody th { font-weight: 600; }
.plain-table td { color: var(--muted); font-variant-numeric: tabular-nums; }
.plain-table tr:last-child th, .plain-table tr:last-child td { border-bottom: 0; }
.community-section { scroll-margin-top: 16px; }
.community-section > header { margin-bottom: 12px; }
.community-section > header p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.community-section .section-title { font-size: 22px; }
.community-edition { display: flex; flex-direction: column; gap: 14px; }
.community-list { display: grid; gap: 10px; }
.community-empty { color: var(--muted); font-size: 14px; }
.community-question { padding: 14px; border-radius: 12px; background: var(--soft); }
.community-question-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.community-question-heading strong { font-size: 14px; }
.community-question-heading time { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.community-question > p { margin-top: 6px; font-size: 15px; }
.community-answer { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--surface); }
.community-answer strong { color: var(--accent-ink); font-size: 13px; }
.community-answer p { margin-top: 4px; font-size: 14px; }
.question-form { position: relative; display: grid; gap: 12px; }
.question-form-heading h3 { font-family: var(--display); font-size: 17px; }
.question-form-heading p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.question-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.question-form label span { color: var(--muted); font-weight: 400; }
.question-form input, .question-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface); font-size: 15px; font-weight: 400; resize: vertical; }
.question-form input:focus, .question-form textarea:focus { border-color: var(--accent); }
.question-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.question-submit { display: grid; gap: 6px; }
.question-submit .primary-button { width: fit-content; }
.question-submit p { min-height: 18px; color: var(--muted); font-size: 13px; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.table-card h2 { margin-bottom: 8px; }
.table-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.more-section { margin-top: 24px; }

/* Information pages, A–Z index, 404 */
.info-page > header { padding: clamp(24px, 4vw, 44px); border-radius: 22px; color: #eef1f4; background: var(--dark); }
.info-page > header .eyebrow, .info-page > header .lede { color: var(--dark-muted); }
.info-page .breadcrumbs { margin-bottom: 16px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.info-grid section, .policy-copy section { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.info-grid h2, .policy-copy h2 { font-family: var(--display); font-size: 20px; }
.info-grid p, .policy-copy p, .policy-copy ul { margin-top: 8px; color: #3a424c; font-size: 15px; line-height: 1.7; }
.policy-copy { display: grid; max-width: 900px; gap: 12px; margin-top: 16px; }
.policy-copy ul { padding-left: 22px; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.az-index { margin-top: 0; }
.az-jump { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 10px 0; background: var(--bg); }
.az-jump a { min-width: 40px; padding: 6px 10px; border-radius: 10px; color: var(--ink); background: var(--surface); font-family: var(--mono); text-align: center; }
.az-jump a:hover { color: var(--accent-ink); text-decoration: none; }
.az-letter { scroll-margin-top: 70px; margin-top: 16px; }
.az-letter > h2 { font-family: var(--display); font-size: 28px; }
.az-make { margin-top: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.az-make h3 { font-family: var(--display); font-size: 19px; }
.az-make h3 small { color: var(--muted); font-family: var(--body); font-size: 13px; font-weight: 500; }
.az-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; margin-top: 8px; }
.az-models a { padding: 5px 0; font-size: 15px; font-weight: 600; }
.az-models a small { color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 400; }

/* Footer */
.site-footer { display: grid; grid-template-columns: minmax(240px, 1.3fr) repeat(2, minmax(180px, .7fr)); gap: 40px; padding: 32px max(20px, calc((100vw - var(--page-max)) / 2 + 40px)) 40px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface); font-size: 14px; }
.footer-brand p { margin-top: 12px; }
.footer-column > strong { display: block; margin-bottom: 10px; color: var(--ink); }
.footer-column nav { display: grid; gap: 7px; }
.footer-column nav a { color: var(--ink); }
.footer-column p { margin-top: 12px; font-size: 13px; }
.footer-column p + p { margin-top: 6px; }

/* C2 details: reader bar icons, floating page control, idle search column, section progress */
.document-heading h2 { font-family: var(--display); font-size: 20px; line-height: 1.2; }
.tool-actions .tool-button { width: 42px; padding: 0; }
.tool-actions .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.tool-more { display: none; font-size: 20px; }
.viewer-stage { flex: 1 0 auto; padding: 24px 24px 88px; }
.reader-pill { position: sticky; bottom: 16px; z-index: 3; display: flex; width: fit-content; align-items: center; gap: 2px; margin: -70px auto 18px; padding: 4px 8px; border-radius: 26px; color: #eef1f4; background: var(--dark); box-shadow: 0 10px 30px rgb(20 30 45 / 30%); }
.pill-button { display: inline-grid; min-width: 40px; height: 40px; place-items: center; border: 0; border-radius: 20px; color: #eef1f4; background: transparent; font-size: 20px; line-height: 1; }
.pill-button:hover { background: var(--dark-2); }
.pill-button:disabled { opacity: .4; cursor: default; }
.pill-contents { display: none; }
.pdf-reader:fullscreen .pill-contents { display: inline-grid; }
.pill-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--dark-line); }
.reader-pill .page-control { color: var(--dark-muted); }
.reader-pill .page-control input { width: 54px; min-height: 32px; border: 0; color: #fff; background: var(--dark-2); }
.reader-pill .tool-zoom { display: flex; align-items: center; gap: 2px; }
.reader-pill .zoom-select { min-height: 32px; padding: 0 4px; color: #eef1f4; background: transparent; font-family: var(--mono); font-size: 13px; }
.reader-pill .zoom-select option { color: var(--ink); background: #fff; }
.reader-search-tray[data-idle] .tray-head button { visibility: hidden; }
.reader-search-tray[data-idle] .find-status { margin-top: 4px; }
.section-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.section-progress[hidden] { display: none !important; }
.progress-bar { position: relative; display: block; width: 180px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--soft); }
.progress-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--accent); }
.index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.manual-reference-index > div { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.manual-reference-index > div > :only-child { grid-column: 1 / -1; }
.fuse-preview { display: flex !important; min-height: 0 !important; align-items: center; gap: 12px; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--soft); }
.fuse-preview img { width: 48px; height: auto; flex: 0 0 48px; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgb(20 30 45 / 22%); }
.fuse-preview span { display: grid; gap: 2px; }
.fuse-preview strong { font-size: 14px; }
.fuse-preview small { color: var(--accent-ink) !important; }
.faq-item { padding: 0; }
.faq-item > summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: "▸"; flex: 0 0 auto; color: var(--muted); font-size: 13px; transition: transform .15s; }
.faq-item[open] > summary::before { transform: rotate(90deg); }
.faq-item > summary h3 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.faq-item .faq-copy { padding: 0 18px 16px 41px; }
.side-toc > summary { cursor: pointer; list-style: none; }
.side-toc > summary::-webkit-details-marker { display: none; }
.side-toc nav { margin-top: 6px; }
.side-toc-list [aria-current="true"] span::after { content: " · you are here"; font-weight: 500; }
.side-saved h2 { font-family: var(--display); font-size: 18px; }
.side-saved-list { display: grid; gap: 2px; margin: 0 -8px; }
.side-saved-list a { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 8px; color: var(--ink); font-size: 14px; }
.side-saved-list a:hover { background: var(--soft); text-decoration: none; }
.side-saved-list small { color: var(--accent-ink); font-family: var(--mono); font-size: 12px; }
.model-page-title span { font-size: 14px; }

/* Responsive */
@media (max-width: 1180px) {
  .top-nav { display: none; }
  .model-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 18px; }
  .faq-list { grid-template-columns: 1fr; }
  .tool-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .page { padding: 16px 16px 40px; }
  .model-layout { grid-template-columns: 1fr; }
  .model-side { display: contents; }
  .hero-card { order: -3; }
  .model-side > .side-toc { order: -2; }
  .model-main { order: -1; }
  .side-toc-list { max-height: 300px; }
  .help-grid { grid-template-columns: 1fr; }
  .make-hero { grid-template-columns: 1fr; }
  .make-cover-collage { justify-content: flex-start; }
  .info-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .tool-more { display: inline-flex; }
  .pdf-reader:not(.actions-open) .tool-extra { display: none; }
  .reader-toolbar .reader-search { flex: 1 1 auto; order: 0; flex-basis: auto; min-width: 0; max-width: none; }
  .reader-search button { display: none; }
  .tool-actions { flex: 0 0 auto; margin-left: 0; }
  .tool-actions .tool-button { flex: 0 0 44px; width: 44px; height: 44px; }
  .pdf-reader.actions-open .tool-actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .document-heading { flex-basis: 100%; }
  .reader-pill .tool-zoom, .reader-pill .pill-sep { display: none; }
  .viewer-stage { padding: 8px 8px 72px; }
  .section-progress { display: none !important; }
  .thumbnail-nav { grid-template-columns: 34px minmax(0, 1fr) 34px; padding: 8px 10px; }
  .index-grid { grid-template-columns: 1fr; }
  .manual-reference-index > div { grid-template-columns: 1fr; }
  .faq-item .faq-copy { padding-left: 18px; }
  .site-header { flex-wrap: wrap; gap: 10px 12px; padding: 10px 12px; }
  .global-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .saved-button { margin-left: auto; }
  .saved-button .saved-label { display: none; }
  .brand-copy small { display: none; }
  .home-hero .home-search { grid-template-columns: 1fr; }
  .tool-zoom { display: none; }
  .home-search-button { min-height: 48px; }
  .reader-card { margin: 0 -16px; border-right: 0; border-left: 0; border-radius: 0; }
  .reader-toolbar { gap: 6px; padding: 8px 10px; }
  .reader-search input { font-size: 16px; }
  .page-control input { font-size: 16px; }
  .reader-body { display: flex; flex-direction: column; }
  .reader-sidebar { order: 1; width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .reader-search-tray { width: 100%; border-left: 0; }
  .stage-wrap { order: 3; }
  .viewer-stage { min-height: 320px; }
  .search-results-pdf { max-height: none; }
  .pdf-reader.sidebar-hidden .reader-sidebar { display: none; }
  .pdf-reader.mobile-sidebar .reader-sidebar { display: block; }
  .sidebar-close { display: inline-flex; }
  .outline { max-height: 55vh; }
  .thumbnail-nav > button { height: 84px; }
  .page-thumb { flex-basis: 60px; }
  .page-thumb canvas { max-width: 48px; max-height: 64px; }
  .problem-report > form { grid-template-columns: 1fr; }
  .question-submit .primary-button { width: 100%; }
  .tool-strip { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 420px) {
  .model-page-title { font-size: 30px; }
  .hero-card { padding: 18px; }
  .manual-card { grid-template-columns: 88px minmax(0, 1fr); }
}

@media print {
  body * { visibility: hidden !important; }
  .pdf-reader, .pdf-reader * { visibility: visible !important; }
  .pdf-reader { position: absolute; inset: 0; border: 0; }
  .reader-toolbar, .thumbnail-nav, .reader-sidebar, .reader-footer, .reader-search-tray { display: none !important; }
  .reader-body { display: block; }
  .viewer-stage { min-height: 0; padding: 0; background: #fff; }
  .pdf-page-wrap { box-shadow: none; }
  .pdf-page { width: 100% !important; height: auto !important; }
}
.side-toc-list a.toc-sub, .side-toc-list button.toc-sub { padding-left: 22px; font-size: 13px; color: #3a424c; }
/* One FAQ answer split by generation (newest first). */
.faq-gen + .faq-gen { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.faq-gen-label { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }

/* 30.09.2026 (owner review): results only after a search, over the manual on narrow screens;
   folded model years; contents tree; magnifier. */
.reader-search-tray[data-idle] { display: none; }
.reader-search-tray { width: 300px; }
.tray-head > span { display: flex; align-items: center; gap: 14px; }
.tray-hide { display: none; }
.search-reopen { display: none; }
@media (max-width: 1399px) {
  .reader-body { position: relative; }
  .reader-search-tray { position: absolute; grid-column: 1 / -1; grid-row: 1 / -1; top: 0; right: 0; bottom: 0; z-index: 6; width: min(360px, calc(100% - 24px)); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -14px 0 32px rgb(20 30 45 / 18%); }
  .reader-search-tray[data-collapsed] { display: none; }
  .search-results-pdf { max-height: none; }
  .tray-hide { display: inline-flex; }
  .search-reopen:not([hidden]) { position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; color: #fff; background: var(--dark); font-size: 14px; font-weight: 600; box-shadow: 0 8px 22px rgb(20 30 45 / 28%); }
}
@media (max-width: 760px) {
  .reader-search-tray { width: 100%; box-shadow: none; }
}
.year-more { border-radius: 12px; }
.year-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; color: #eef1f4; background: var(--dark-2); font-family: var(--mono); font-size: 13px; cursor: pointer; list-style: none; }
.year-more > summary::-webkit-details-marker { display: none; }
.year-more > summary::after { content: "▾"; color: var(--dark-muted); }
.year-more[open] > summary::after { content: "▴"; }
.year-more > summary small { margin-left: auto; color: var(--dark-muted); font-size: 12px; }
.year-more[open] > summary { margin-bottom: 10px; }
.year-more > .year-group + .year-group { margin-top: 10px; }
.toc-filter { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: var(--soft); }
.toc-filter:focus-within { border-color: var(--accent); background: var(--surface); }
.toc-filter input { width: 100%; min-width: 0; min-height: 36px; border: 0; outline: 0; background: none; font-size: 14px; }
.toc-filter .icon { order: -1; width: 16px; height: 16px; }
.toc-tree { gap: 1px; }
.toc-row { display: flex; align-items: stretch; }
.toc-toggle { display: grid; flex: 0 0 26px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: none; }
.toc-toggle::before { content: "+"; font-size: 16px; font-weight: 600; line-height: 1; }
.toc-group.open > .toc-row .toc-toggle::before { content: "−"; }
.toc-toggle:hover { background: var(--soft); color: var(--ink); }
.toc-row > a, .toc-leaf > a { flex: 1; min-width: 0; }
.toc-leaf > a { margin-left: 26px; }
.side-toc-list a.toc-top { font-weight: 600; }
.toc-children { display: none; margin: 0 0 4px 12px; padding-left: 14px; border-left: 1px solid var(--line); }
.toc-group.open > .toc-children, .toc-tree.filtering .toc-children { display: grid; }
.side-toc-list .toc-children a { font-size: 13px; color: #3a424c; }
.side-toc-list .toc-children a.lvl-2 { padding-left: 20px; font-size: 12.5px; }
.side-toc-list { max-height: min(640px, 70vh); }
.magnifier-lens { position: absolute; z-index: 4; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgb(20 30 45 / 35%), 0 0 0 1px rgb(20 30 45 / 25%); pointer-events: none; }
.pdf-reader.magnifying .pdf-page-wrap { cursor: zoom-in; touch-action: none; }
.pdf-reader.magnifying .textLayer { pointer-events: none; }
.pill-magnifier[aria-pressed="true"] { color: #fff; background: var(--accent); }
.pill-magnifier .icon { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .reader-pill .pill-magnifier { display: inline-grid; }
}
@media (max-width: 760px) {
  .hero-card { gap: 10px; padding: 16px; }
  .hero-title img { width: 48px; flex-basis: 48px; }
  .model-page-title { font-size: 26px; }
  .model-page-title span { font-size: 13px; }
  .year-chip { min-height: 36px; font-size: 14px; }
  .year-chip-row { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .hero-actions:not([hidden]) { grid-template-columns: 1fr 1fr; }
  .hero-actions > a { min-height: 42px; font-size: 14px; }
}

/* 30.09.2026 evening (owner): one left edge for header, page and footer; icons; latest manuals; year chips; footer */
:root { --gutter: clamp(16px, 2.6vw, 40px); }
@media (max-width: 960px) { :root { --gutter: 16px; } }
.page { padding-left: var(--gutter); padding-right: var(--gutter); }
.site-header, .saved-panel { padding-left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--dark-muted); font-size: 14px; }
.hero-stats li { display: flex; align-items: center; gap: 8px; }
.hero-stats .icon { width: 20px; height: 20px; color: var(--accent); }
.hero-stats b { color: #eef1f4; font-family: var(--display); font-size: 17px; }

.tool-strip { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tool-strip div { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.tool-strip-icon { display: grid; grid-row: span 2; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--accent-ink); background: var(--soft); font-style: normal; }
.tool-strip-icon .icon { width: 22px; height: 22px; }
.tool-strip span { margin-top: 0; }
.make-utility span { display: inline-flex; align-items: center; gap: 6px; }
.make-utility span .icon { width: 15px; height: 15px; color: var(--accent-ink); }

#latest-manuals .manual-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#latest-manuals .manual-card { grid-template-columns: 88px minmax(0, 1fr); }
#latest-manuals .card-copy { padding: 14px; }
#latest-manuals .card-copy strong { font-size: 19px; }
.manual-card[hidden] { display: none; }

.make-catalog .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.year-chips { justify-content: flex-start; gap: 8px; }
.year-chips button { min-height: 38px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); font-family: var(--mono); font-size: 15px; font-weight: 600; cursor: pointer; }
.year-chips button:hover { border-color: var(--accent); }
.year-chips button[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: var(--accent); }

.site-footer { display: block; padding: 0; }
.footer-inner { display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(260px, 1.3fr) minmax(200px, 1fr) minmax(200px, 1fr); gap: 32px 48px; max-width: var(--page-max); margin: 0 auto; padding: 40px var(--gutter) 32px; }
.footer-brand p { max-width: 36ch; }
.footer-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; }
.footer-stats b { color: var(--ink); font-family: var(--display); font-size: 16px; }
.footer-makes nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.footer-more { display: inline-block; margin-top: 12px; color: var(--accent-ink); font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; max-width: var(--page-max); margin: 0 auto; padding: 16px var(--gutter) 24px; border-top: 1px solid var(--line); font-size: 13px; }

@media (max-width: 1399px) {
  #latest-manuals .manual-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #latest-manuals .manual-card-grid { grid-template-columns: 1fr; }
  #latest-manuals .manual-card:nth-child(n+7) { display: none; }
  .tool-strip { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
  .year-chips button { min-height: 36px; padding: 5px 11px; font-size: 14px; }
}

/* 01.10.2026 (owner): the magnifier is easy to find — a labelled button in the reader toolbar */
.tool-actions .tool-magnifier { width: auto; padding: 0 14px 0 12px; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-weight: 600; }
.tool-actions .tool-magnifier .tool-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.tool-actions .tool-magnifier[aria-pressed="true"] { color: #fff; background: var(--accent); }
@media (max-width: 760px) {
  .tool-actions .tool-magnifier { flex: 0 0 auto; width: auto; }
  .tool-actions .tool-magnifier .tool-label { display: none; }
}
.footer-sources { display: flex; flex-wrap: wrap; gap: 10px 32px; max-width: var(--page-max); margin: 0 auto; padding: 18px var(--gutter); border-top: 1px solid var(--line); font-size: 13px; }
.footer-sources p { display: flex; align-items: center; gap: 8px; margin: 0; }
.footer-sources .icon { width: 18px; height: 18px; color: var(--accent-ink); }
.footer-sources b { color: var(--ink); font-weight: 600; }

/* 01.10.2026 (owner): recalls as compact rows; the NHTSA text opens inside the row */
.recall-summary { margin: 0 0 12px; font-size: 15px; }
.recall-list { grid-template-columns: 1fr; gap: 6px; }
.recall-list .recall-row summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; list-style: none; }
.recall-list .recall-row .recall-comp { flex: 1 1 180px; }
.recall-list .recall-row .recall-date { flex: 0 0 72px; }
.recall-list .recall-row .recall-id { flex: 0 0 96px; }
.recall-list .recall-row summary::-webkit-details-marker { display: none; }
.recall-list .recall-row summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 700; }
.recall-list .recall-row[open] summary::after { content: "−"; }
.recall-comp { font-weight: 600; }
.recall-list summary .recall-date, .recall-list summary .recall-id { color: var(--muted); font-family: var(--mono); font-size: 13px; font-weight: 400; }
.recall-list summary .recall-free { justify-self: start; padding: 2px 8px; border-radius: 999px; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-size: 12px; font-weight: 600; }
.recall-body { padding: 0 14px 12px; font-size: 14px; }
.recall-body [data-recall-text] p { margin: 0 0 8px; color: var(--muted); }
.recall-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; }
.recall-actions a { font-size: 14px; font-weight: 600; }
@media (max-width: 760px) {
  .recall-list summary .recall-id { display: none; }
}

/* 01.10.2026: an edition chip ("2026 Hybrid / Plug-in Hybrid") takes a whole row instead of
   wrapping word by word in a year-sized cell */
.year-chip { white-space: nowrap; }
.year-chip-row { grid-auto-flow: dense; }
.year-chip-wide { grid-column: 1 / -1; overflow: hidden; padding: 0 12px; text-overflow: ellipsis; }

/* 01.10.2026 (owner): manual assistant */
.assistant { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.assistant-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.assistant-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--display); font-size: 20px; }
.assistant-head h2 .icon { width: 22px; height: 22px; color: var(--accent); }
.assistant-left { color: var(--muted); font-size: 13px; }
.assistant-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.assistant-form input { min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 16px; }
.assistant-form input:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.assistant-log { display: grid; gap: 10px; margin-top: 12px; }
.assistant-item { padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.assistant-question { margin: 0 0 6px; font-weight: 600; }
.assistant-answer p { margin: 0 0 6px; }
.assistant-answer.is-loading { color: var(--muted); }
.assistant-answer.is-error { color: var(--red, #b42318); }
.assistant-pages { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.assistant-pages a { font-weight: 600; }
.assistant-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* 01.10.2026 (owner): new wordmark logo */
.brand-logo { display: block; width: auto; height: 30px; }
.footer-brand .brand-logo { height: 26px; }
@media (max-width: 760px) { .brand-logo { height: 22px; } }

/* 02.10.2026 (owner): blocks were hard to tell apart. Chosen preview variants 3 + 5:
   an icon chip before each section heading and a tinted background per kind of block.
   Every two-column row is now split exactly in half with the same 16px gap. */
.faq-list, .help-grid, .table-grid, .manual-reference-index > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.index-grid { column-gap: 16px; }
.help-grid > :only-child, .table-grid > :only-child { grid-column: 1 / -1; }
@media (max-width: 1180px) { .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .faq-list, .help-grid, .table-grid, .manual-reference-index > div { grid-template-columns: 1fr; } }

.complaints-section h2, .recall-section h2, .community-section .section-title, .table-card h2, .faq-intro .section-title, .manual-reference-index > header h2 { display: flex; align-items: center; gap: 10px; }
.complaints-section h2::before, .recall-section h2::before, .community-section .section-title::before, .table-card h2::before, .faq-intro .section-title::before, .manual-reference-index > header h2::before {
  content: ""; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--chip, var(--accent)) var(--glyph) center / 18px no-repeat;
}
.complaints-section h2 { --chip: #c9473b; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }
.recall-section h2 { --chip: #c27a1a; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.community-section .section-title { --chip: #0e7c86; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.table-card h2 { --chip: #4f6d8f; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5'/%3E%3C/svg%3E"); }
.faq-intro .section-title { --chip: #0e7c86; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); }
.manual-reference-index > header h2 { --chip: #6b7785; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 13l3-3'/%3E%3C/svg%3E"); }
.assistant-head h2 .icon { box-sizing: content-box; flex: 0 0 18px; width: 18px; height: 18px; padding: 7px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0e7c86, #6d4bd8); }

.complaints-section { border-color: #f0d3cd; background: #fdf4f2; }
.recall-section { border-color: #efdcb9; background: #fdf8ee; }
.community-section { border-color: #cbe4e6; background: #f0f8f8; }
.table-card { border-color: #d3dce7; background: #f6f8fb; }
.assistant { border-color: #b5dade; background: #e6f3f4; }
.complaints-table th, .complaints-table td, .plain-table th, .plain-table td { border-bottom-color: rgb(0 0 0 / 7%); }
.assistant-form input, .assistant-item { background: var(--surface); }

/* "Ask AI" buttons: next to the manual search and in the reader pill */
.ask-ai-button, .pill-ask-ai { display: inline-flex; align-items: center; gap: 6px; border: 0; color: #fff; font-family: var(--body); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ask-ai-button[hidden], .pill-ask-ai[hidden] { display: none; }
.ask-ai-button .icon, .pill-ask-ai .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.reader-search:has(.ask-ai-button:not([hidden])) { flex-basis: 440px; }
.reader-search .ask-ai-button { min-height: 40px; padding: 0 14px; border-radius: 10px; background: linear-gradient(90deg, #0e7c86, #6d4bd8); font-size: 14px; box-shadow: 0 4px 14px -4px rgb(109 75 216 / 55%); }
.pill-ask-ai { min-height: 32px; margin-left: 6px; padding: 0 14px; border-radius: 20px; background: linear-gradient(90deg, #12a0ab, #7b5cf0); font-size: 13px; }
.ask-ai-button:hover, .pill-ask-ai:hover { filter: brightness(1.08); }
.ask-ai-button:focus-visible, .pill-ask-ai:focus-visible { outline: 2px solid #6d4bd8; outline-offset: 2px; }
@media (max-width: 760px) {
  .pill-ask-ai { margin-left: 2px; padding: 0 10px; }
  .pill-ask-ai span { display: none; }
}
.ask-ai-button[aria-pressed="true"], .pill-ask-ai[aria-pressed="true"] { box-shadow: 0 0 0 3px rgb(109 75 216 / 30%); }

/* 02.10.2026 (owner): the AI panel to the right of the manual, where search results appear */
.reader-ai-tray { grid-column: 3; display: flex; width: 340px; min-height: 0; flex-direction: column; contain: size; border-left: 1px solid #cbe4e6; background: linear-gradient(180deg, #e6f3f4, #f4fafa 60%, #fff); }
.reader-ai-tray[hidden] { display: none; }
.pdf-reader.ai-open .reader-search-tray, .pdf-reader.ai-open .search-reopen { display: none !important; }
.ai-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.ai-tray-head strong { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 17px; }
.ai-tray-head strong .icon { box-sizing: content-box; flex: 0 0 16px; width: 16px; height: 16px; padding: 6px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0e7c86, #6d4bd8); fill: currentColor; stroke: none; }
.ai-tray-head button { color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.reader-ai-tray .assistant { display: flex; min-height: 0; flex: 1; flex-direction: column; margin: 0; padding: 0 16px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.reader-ai-tray .assistant-head { margin: 0 0 6px; }
.reader-ai-tray .assistant-head h2 { display: none; }
.reader-ai-tray .assistant-left { font-size: 12px; }
.reader-ai-tray .assistant-form { grid-template-columns: 1fr; }
.reader-ai-tray .assistant-form input { min-height: 44px; font-size: 15px; }
.reader-ai-tray .assistant-form .primary-button { min-height: 42px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(90deg, #0e7c86, #6d4bd8); font-weight: 700; }
.reader-ai-tray .assistant-form .primary-button:disabled { opacity: .6; }
.reader-ai-tray .assistant-log { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.reader-ai-tray .assistant-item { border: 1px solid #d5e8ea; background: #fff; font-size: 14px; }
.reader-ai-tray .assistant-pages { margin-top: 6px; }
.reader-ai-tray .assistant-pages a { padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; }
.reader-ai-tray .assistant-note { font-size: 11px; }
@media (max-width: 1399px) {
  .reader-ai-tray { position: absolute; grid-column: 1 / -1; grid-row: 1 / -1; top: 0; right: 0; bottom: 0; z-index: 6; width: min(380px, calc(100% - 24px)); contain: none; box-shadow: -14px 0 32px rgb(20 30 45 / 18%); }
}
@media (max-width: 760px) {
  .reader-ai-tray { width: 100%; box-shadow: none; }
}

/* one line under the manual that opens the panel */
.ask-ai-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding: 14px 18px; border: 1px solid #b5dade; border-radius: var(--radius); background: linear-gradient(90deg, #e6f3f4, #efeafd); }
.ask-ai-strip[hidden] { display: none; }
.ask-ai-strip p { margin: 0; font-size: 15px; }
.ask-ai-strip p span { color: var(--muted); }
.ask-ai-strip .ask-ai-button { flex: 0 0 auto; min-height: 42px; padding: 0 18px; border-radius: 10px; background: linear-gradient(90deg, #0e7c86, #6d4bd8); font-size: 15px; box-shadow: 0 4px 14px -4px rgb(109 75 216 / 55%); }
@media (max-width: 760px) {
  .ask-ai-strip { flex-direction: column; align-items: stretch; }
  .ask-ai-strip .ask-ai-button { justify-content: center; }
}
@media print { .reader-ai-tray, .ask-ai-strip { display: none !important; } }