/* Setup Sheet Database: production stylesheet. Tokens follow the style guide exactly. */
:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --text-muted: #5f6368;
  --link: #1a0dab;
  --link-visited: #681da8;
  --focus: #1a73e8;
  --rule: #dadce0;
  --rule-light: #e8eaed;
  --bg-subtle: #f8f9fa;
  --notice-bg: #fef7e0;
  --notice-text: #8a5a00;
  --match: #fef7e0;

  --font: Arial, Helvetica, sans-serif;
  --fs-h1: 20px; --fs-h2: 18px; --fs-h3: 16px; --fs-h4: 13px; --fs-body: 14px; --fs-small: 12px;

  --s1: 2px; --s2: 4px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 24px; --s7: 32px;
  --radius: 2px;
  --jump-h: 36px;
}

html { scroll-padding-top: calc(var(--jump-h) + var(--s3)); }
body.sdb { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.5 var(--font); }
.sdb-page { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); }
.sdb ul, .sdb ol { margin: 0; padding: 0; list-style: none; }
.sdb h1, .sdb h2, .sdb h3, .sdb h4 { margin: 0; font-weight: 700; }

/* Links: lists, index and nav */
.sdb a { color: var(--link); text-decoration: none; }
.sdb a:hover { text-decoration: underline; }
.sdb a:focus-visible, .sdb-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--radius); }
.sdb-class a:visited, .sdb-table a:visited { color: var(--link-visited); }
/* Links: prose, notice, footer */
.sdb-notice a, .sdb-footer a, .sdb-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sdb-prose a:visited { color: var(--link-visited); }

/* Header */
.sdb-header { padding-top: var(--s3); }
.sdb-crumbs ol { display: flex; flex-wrap: wrap; font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); }
.sdb-crumbs li + li::before { content: "\203A"; padding: 0 var(--s2); }
.sdb h1 { font-size: var(--fs-h1); line-height: 1.3; margin: var(--s2) 0 var(--s3); }
.sdb-resources { display: flex; flex-wrap: wrap; margin: var(--s3) 0; }
.sdb-resources li + li::before, .sdb-footer li + li::before { content: "\00B7"; padding: 0 var(--s3); color: var(--text-muted); }

/* Notice */
.sdb-notice { margin: 0; padding: var(--s3) var(--s4); background: var(--notice-bg); }
.sdb-notice strong { color: var(--notice-text); }

/* Sticky jump bar */
.sdb-jump { position: sticky; top: 0; z-index: 1; background: var(--bg-subtle); border-bottom: 1px solid var(--rule); }
.sdb-jump-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); height: var(--jump-h); display: flex; align-items: center; gap: var(--s4); }
.sdb-jump ul { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.sdb-jump-sections { gap: var(--s4) !important; padding-right: var(--s4); border-right: 1px solid var(--rule); }
.sdb-jump-letters a, .sdb-jump-letters span { display: inline-block; min-width: 1.1em; padding: var(--s1); text-align: center; }
.sdb-jump-letters span { color: var(--text-muted); }
.sdb-filter { margin-left: auto; width: 180px; height: 24px; padding: 0 var(--s3); font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); box-sizing: border-box; }
@media (max-width: 600px) {
  .sdb-jump-inner { overflow-x: auto; }
  .sdb-filter { flex: 0 0 140px; }
}

/* Section heading */
.sdb h2 { font-size: var(--fs-h2); line-height: 1.3; margin: var(--s7) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }

/* A to Z index */
.sdb-az { line-height: 1.45; margin-bottom: var(--s6) !important; }
.sdb-az > li { display: flex; }
.sdb-az b { flex: 0 0 1.5em; }
.sdb-az ul { display: flex; flex-wrap: wrap; }
.sdb-az ul li + li::before { content: "-"; padding: 0 var(--s2); color: var(--text-muted); }

/* Brand block */
.sdb-brand { padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--rule-light); }
.sdb-brand-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.sdb-brand h3 { font-size: var(--fs-h3); line-height: 1.3; padding: 0 var(--s1); }
.sdb-brand:target h3 { background: var(--match); }
.sdb-top { margin-left: auto; font-size: var(--fs-small); }
.sdb-classes { columns: 220px; column-gap: var(--s4); }
.sdb-class { break-inside: avoid; padding-bottom: var(--s4); }
.sdb h4 { font-size: var(--fs-h4); line-height: 1.35; margin-bottom: var(--s2); }
/* 20px rows: denser than the guide's 24px hit height, closer to the old page. */
.sdb-class li { line-height: 20px; }
.sdb-class a { display: inline-block; padding: 0 0 var(--s1); }

/* Data table */
.sdb-table { border-collapse: collapse; margin-bottom: var(--s5); }
.sdb-table th { background: var(--bg-subtle); font-size: var(--fs-h4); text-align: left; }
.sdb-table th, .sdb-table td { padding: var(--s2) var(--s4) var(--s2) var(--s3); border-bottom: 1px solid var(--rule-light); text-align: left; }
.sdb-table tbody tr:hover { background: var(--bg-subtle); }

/* Meta + file tags */
.sdb-meta, .sdb-file { font-size: var(--fs-small); color: var(--text-muted); margin-left: var(--s2); }

/* Footer */
.sdb-footer { margin-top: var(--s7); padding-top: var(--s3); padding-bottom: var(--s6); border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); }
.sdb-footer p { margin: 0 0 var(--s2); }
.sdb-footer ul { display: flex; flex-wrap: wrap; }

/* Filter states (set by sdb-filter.js) */
.sdb [hidden] { display: none !important; }
.sdb mark { background: var(--match); color: inherit; }
.sdb-empty { color: var(--text-muted); }

/* ---------------------------------------------------------------- model pages */
.sdb-sub { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0 0 var(--s3); font-size: var(--fs-small); color: var(--text-muted); }
.sdb-count { font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); }
.sdb-file { font-size: var(--fs-small); margin-left: var(--s2); }
.sdb-doc-cols .sdb-class li { line-height: 1.4; padding: var(--s1) 0; }
.sdb-doc-cols .sdb-class a { display: inline; padding: 0; }
.sdb-more-list summary { cursor: pointer; color: var(--link); font-size: var(--fs-small); padding: var(--s1) 0; }
.sdb-more-list summary:hover { text-decoration: underline; }
.sdb-more-list[open] summary { color: var(--text-muted); }

.sdb-status { margin: 0 0 var(--s2); font-size: var(--fs-small); color: var(--text-muted); }
.sdb-more { margin: var(--s3) 0 0; }
.sdb-sep { color: var(--text-muted); }

/* Dated tables (setups, reports) */
.sdb-table-wrap { overflow-x: auto; }
.sdb-dated { width: 100%; }
.sdb-dated th, .sdb-dated td { padding: var(--s1) var(--s4) var(--s1) 0; vertical-align: baseline; }
.sdb-dated th { padding-top: var(--s2); padding-bottom: var(--s2); }
.sdb-dated th:first-child, .sdb-dated td:first-child { padding-left: var(--s3); }
.sdb-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sdb-dated td.sdb-details { font-size: var(--fs-small); color: var(--text-muted); }
.sdb-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
/* Older than 12 months: pushed back, still usable */
.sdb-dated tr.is-old td { color: var(--text-muted); }
.sdb-dated tr.is-old a { color: var(--text-muted); }
.sdb-dated tr.is-old a:hover { color: var(--link); }
.sdb-divider td { padding-top: var(--s4) !important; font-size: var(--fs-h4); font-weight: 700; color: var(--text); background: var(--bg); }
.sdb-dated tbody tr.sdb-divider:hover { background: var(--bg); }
/* Phones: each row becomes two lines. Driver and Download on top; date, event, surface below. */
@media (max-width: 600px) {
  .sdb-dated thead { display: none; }
  .sdb-dated tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--rule-light); }
  .sdb-dated td { border: 0 !important; padding: 0 !important; }
  .sdb-dated .sdb-driver { order: 1; flex: 1 1 calc(100% - 7em); }
  .sdb-dated .sdb-dl { order: 2; flex: 0 0 auto; text-align: right; }
  .sdb-dated .sdb-date { order: 3; }
  .sdb-dated .sdb-event { order: 4; }
  .sdb-dated .sdb-surface { order: 5; }
  .sdb-dated .sdb-date, .sdb-dated .sdb-event, .sdb-dated .sdb-surface { font-size: var(--fs-small); color: var(--text-muted); }
  .sdb-dated .sdb-event:empty, .sdb-dated .sdb-surface:empty, .sdb-dated .sdb-details { display: none; }
  .sdb-divider td { flex: 1 1 100%; padding-top: var(--s4) !important; }
}

/* ---------------------------------------------------------------- index header + A to Z bar */
/* Section links and the filter sit on one header line, directly above the sticky letters. */
.sdb-sections { display: flex; align-items: center; gap: var(--s6); margin: 0 0 var(--s3); }
.sdb-sections ul { display: flex; flex-wrap: wrap; gap: var(--s6); }
.sdb-sections .sdb-filter { margin-left: auto; }
/* Desktop: all 27 letters spread evenly across the bar. */
.sdb-jump--az .sdb-jump-letters { flex: 1 1 auto; justify-content: space-between; gap: 0; }
.sdb-jump--az .sdb-jump-letters a, .sdb-jump--az .sdb-jump-letters span { min-width: 1.6em; padding: var(--s1) var(--s2); }
@media (max-width: 600px) {
  .sdb-sections { flex-wrap: wrap; gap: var(--s3) var(--s6); }
  .sdb-sections .sdb-filter { flex: 1 1 100% !important; width: 100%; margin-left: 0; height: 32px; }
  /* Phones: no sideways scrolling. Two rows of 14 (# A-M, N-Z), each a full-size tap target. */
  .sdb-jump--az .sdb-jump-inner { height: auto; overflow: visible; padding-top: var(--s1); padding-bottom: var(--s1); }
  .sdb-jump--az .sdb-jump-letters { display: grid; grid-template-columns: repeat(14, 1fr); width: 100%; }
  .sdb-jump--az .sdb-jump-letters li { display: block; }
  .sdb-jump--az .sdb-jump-letters a, .sdb-jump--az .sdb-jump-letters span { display: block; min-width: 0; padding: 0; line-height: 28px; font-size: 15px; text-align: center; }
  .sdb-jump--az .sdb-jump-letters span { color: var(--rule); }
  /* Jump targets clear the taller two-row bar. */
  .sdb-brand, .sdb-az > li, .sdb h2 { scroll-margin-top: 24px; } /* adds to the 44px scroll padding */
}

/* ---------------------------------------------------------------- model page header + toolbar */
/* Sticky bar: one link per kind of document with its count. No separators, so wrapping is clean. */
.sdb-kinds { display: flex; gap: var(--s6) !important; }
.sdb-kinds a { display: inline-flex; align-items: baseline; gap: var(--s2); }
.sdb-kind-n { font-size: var(--fs-small); color: var(--text-muted); }
.sdb-doc-cols .sdb-class, .sdb-docs { scroll-margin-top: var(--s3); }

/* Toolbar above each table: search on its own line, then the dropdowns. */
.sdb-tools { margin: 0 0 var(--s3); }
.sdb-search { display: block; width: 100%; max-width: 420px; box-sizing: border-box; height: 32px; padding: 0 var(--s3); margin: 0 0 var(--s3);
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); }
.sdb-selects { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.sdb-select { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-h4); font-weight: 700; }
.sdb-select select { height: 32px; min-width: 9em; padding: 0 var(--s3); font: inherit; font-weight: 400; font-size: var(--fs-body);
  color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); }
.sdb-search:focus-visible, .sdb-select select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

@media (max-width: 600px) {
  /* Counts bar: equal columns, label over count, never wider than the screen. */
  .sdb-jump--model .sdb-jump-inner { height: auto; overflow: visible; padding-top: var(--s2); padding-bottom: var(--s2); }
  .sdb-kinds { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: var(--s2) !important; }
  .sdb-kinds li { display: block; min-width: 0; }
  .sdb-kinds a { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.25; text-align: center; }
  .sdb-kind { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
  /* Toolbar: full-width search, dropdowns in equal columns with the label above. */
  .sdb-search { max-width: none; height: 40px; font-size: 16px; } /* 16px stops iOS zooming in */
  .sdb-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s3); }
  .sdb-select { flex-direction: column; align-items: stretch; gap: var(--s1); font-size: var(--fs-small); color: var(--text-muted); }
  .sdb-select select { width: 100%; min-width: 0; height: 40px; font-size: 16px; }
}

/* ---------------------------------------------------------------- documents grid */
/* Desktop: each document type takes half the width (or all of it when alone) and lists in
   two or more columns inside that. Phones: one column. */
.sdb-doc-cols { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--s4) var(--s6); }
.sdb-doc-cols .sdb-class { padding-bottom: 0; }
.sdb-doc-cols .sdb-class > ul, .sdb-doc-cols .sdb-more-list > ul { columns: 2 200px; column-gap: var(--s5); }
.sdb-doc-cols .sdb-class li { break-inside: avoid; }
.sdb-doc-cols .sdb-more-list { margin-top: var(--s1); }