:root {
  /* The app itself stays dark, as the shop wants it: deep-ink background,
     lifted charcoal panels, near-white text, and a lighter secondary-text
     tone so entries stay easy to read on the dark scheme. The two things
     that get lightened on purpose are the "Download record" button on each
     unit page (solid amber, see .hero-actions .download-btn below) and the
     downloaded record document itself, which downloadUnitRecord generates
     as a bright white page. The scheme is pinned dark so the phone or
     Chromebook display setting cannot restyle it either way. */
  color-scheme: dark;
  --bg: #141a21;
  --surface: #232d38;
  --surface-2: #2c3743;
  --text: #f2f5f8;
  --dim: #b6c1cc;
  --border: #46545f;
  --accent: #f59e0b;
  --accent-dark: #fbbf24;
  --navy: #10161d;
  --navy-2: #1d2733;
  --green: #7bc79b;
  --danger: #f28b82;
  --radius: 11px;
  --space-surface: var(--surface);
  --space-surface-alt: var(--surface-2);
  --space-muted: var(--dim);
  --space-border: var(--border);
  --space-accent: var(--accent);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { min-height: 100vh; background: var(--bg); }
.index-shell, .detail-shell { width: min(1160px, 100%); margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 14px calc(44px + env(safe-area-inset-bottom)); }

.finder { display: grid; gap: 24px; margin: -16px -14px 0; padding: calc(34px + env(safe-area-inset-top)) 18px 28px; background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; border-bottom: 4px solid var(--accent); box-shadow: 0 3px 14px rgba(0,0,0,.26); }
.finder-copy { max-width: 560px; }
.section-mark { margin: 0 0 6px; color: var(--accent-dark); font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: .14em; }
.finder .section-mark { color: var(--accent); }
h1, h2, h3, .unit-id, .hero-id { font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.finder h1 { margin: 0; font-size: clamp(40px, 11vw, 66px); line-height: .98; letter-spacing: -.045em; }
.finder-copy > p:last-child { margin: 14px 0 0; color: #c9d0d7; line-height: 1.5; }
.search-wrap { display: grid; align-content: end; gap: 7px; }
.search-wrap label { color: #e3e7eb; font-size: 13px; font-weight: 750; }
.search-input { width: 100%; min-height: 58px; padding: 0 16px; border: 2px solid #fff; border-radius: 8px; background: #fff; color: #1b2430; font-size: 17px; outline: none; box-shadow: 5px 5px 0 var(--accent); }
.search-input:focus { border-color: var(--accent); }

.fleet-toolbar { display: flex; flex-direction: column; gap: 15px; padding: 20px 2px; }
.totals { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--dim); font-size: 13px; }
.totals b { color: var(--text); font-size: 16px; }
.filter-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; }
select, input, textarea { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
select:focus, input:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent-dark); }
.filter-label select { flex: 1; max-width: 300px; min-height: 46px; padding: 0 34px 0 12px; }

.unit-grid { display: grid; gap: 11px; }
.unit-card { width: 100%; min-height: 110px; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 0 12px 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.35); overflow: hidden; }
.unit-card:hover, .unit-card:focus-visible { border-color: var(--accent-dark); box-shadow: 0 5px 15px rgba(0,0,0,.12); outline: none; }
.unit-id { align-self: stretch; display: grid; place-items: center; padding: 6px; background: var(--navy); color: #fff; border-right: 4px solid var(--accent); font-size: 21px; font-weight: 900; letter-spacing: -.03em; }
.unit-card-main { min-width: 0; display: flex; flex-direction: column; }
.unit-card-main strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-card-main span { color: var(--dim); font-size: 13px; }
.unit-card-main small { margin-top: 8px; color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-card-meta { display: none; min-width: 96px; flex-direction: column; align-items: flex-end; color: var(--dim); font-size: 12px; }
.unit-card-meta b { color: var(--text); }
.unit-card-meta small { font-size: 12px; }
.chevron { color: var(--accent-dark); font-size: 29px; line-height: 1; }
.loading-list, .state-block, .empty-ledger { min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 28px; border: 2px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--dim); }
.state-block strong, .empty-ledger strong { color: var(--text); font-family: Rockwell, Georgia, serif; font-size: 19px; }

.back-btn { min-height: 44px; margin-bottom: 12px; padding: 0; border: 0; background: transparent; color: var(--dim); font-weight: 750; cursor: pointer; }
.back-btn:hover { color: var(--text); }
.unit-hero { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 16px; align-items: stretch; margin: 0 -14px; padding: 18px 16px; background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; border-bottom: 4px solid var(--accent); box-shadow: 0 3px 14px rgba(0,0,0,.22); }
.hero-id { display: grid; place-items: center; min-height: 88px; padding: 8px; background: #fff; color: #1b2430; border-radius: 8px; box-shadow: 4px 4px 0 var(--accent); font-size: 26px; font-weight: 900; }
.hero-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-copy p { margin: 0 0 2px; color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.hero-copy h1 { margin: 0; font-size: clamp(26px, 8vw, 44px); line-height: 1.04; letter-spacing: -.035em; }
.hero-copy span { margin-top: 7px; color: #c9d0d7; font-size: 13px; overflow-wrap: anywhere; }
.hero-copy small { margin-top: 7px; color: #c9d0d7; font-size: 12px; }
.hero-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-actions .secondary-btn { background: rgba(255,255,255,.08); border-color: #98a4b0; color: #fff; }
.hero-actions .download-btn { background: var(--accent); border-color: var(--accent-dark); color: #201803; font-weight: 800; box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.hero-actions .download-btn:hover { background: #fbbf24; border-color: #fde68a; }

.tabs { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 20px 0 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.tabs button { min-height: 51px; padding: 4px 7px; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--dim); font-size: 13px; font-weight: 750; cursor: pointer; }
.tabs button.active { color: var(--text); border-color: var(--accent); }
.tabs span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 6px; border-radius: 11px; background: var(--surface-2); font-size: 11px; }
.service-section, .panel-section, .spec-section { padding-top: 24px; }
.spec-block + .spec-block { margin-top: 32px; }
.section-heading, .form-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.section-heading h2, .form-heading h2, .upload-box h2 { margin: 0; font-size: 25px; line-height: 1.15; }
.section-note { margin: 8px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5; }

.primary-btn, .secondary-btn, .danger-btn, .text-btn, .quiet-action { min-height: 46px; border-radius: 8px; font-weight: 750; cursor: pointer; }
.primary-btn { border: 1px solid var(--accent-dark); background: var(--accent); color: #201803; padding: 0 18px; box-shadow: 2px 2px 0 var(--accent-dark); }
.primary-btn:hover:not(:disabled) { background: #fbbf24; }
.primary-btn:disabled { opacity: .55; cursor: default; }
.secondary-btn { display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 14px; text-decoration: none; }
.secondary-btn:hover { border-color: var(--accent-dark); }
.text-btn, .quiet-action { border: 0; background: transparent; color: var(--dim); padding: 0 8px; }
.text-btn:hover, .quiet-action:hover { color: var(--text); }
.danger-btn { border: 1px solid #e0655a; background: #931f17; color: #fff; padding: 0 13px; }

.record-form, .upload-box { margin: 0 0 24px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--accent); border-radius: var(--radius); box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.compact-form { margin-top: 18px; }
.form-grid { display: grid; gap: 15px; }
.form-grid label, .upload-box label:not(.file-pick) { display: grid; gap: 6px; color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.form-grid input, .form-grid select, .form-grid textarea, .upload-box input { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--text); font-weight: 500; resize: vertical; }
.form-grid textarea { min-height: 92px; }
.optional-label { color: var(--dim); font-weight: 600; letter-spacing: 0; }
.record-form > .primary-btn, .upload-box > .primary-btn { width: 100%; margin-top: 18px; }
.form-error { margin: 14px 0 0; color: var(--danger); font-weight: 700; font-size: 13px; }
.save-ok { margin: 14px 0 0; color: var(--green); font-weight: 800; font-size: 13px; }
.check-field { margin: 18px 0 0; padding: 0; border: 0; }
.check-field legend { margin-bottom: 9px; color: var(--dim); font-size: 12px; font-weight: 800; }
.checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { min-height: 50px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; user-select: none; }
.check-chip input { width: 23px; height: 23px; margin: 0; accent-color: var(--accent-dark); }
.check-chip.on { border-color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.check-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.check-badges span { padding: 4px 9px; border: 1px solid var(--accent-dark); border-radius: 999px; background: color-mix(in srgb, var(--accent) 17%, var(--surface)); color: var(--text); font-size: 12px; font-weight: 700; }
.brake-badges { align-items: center; }
.brake-badges strong { color: var(--dim); font-size: 12px; font-weight: 800; }
.brake-grid { display: grid; gap: 14px; }
.brake-axle { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.brake-axle h3 { margin: 0 0 10px; font-family: inherit; font-size: 15px; font-weight: 800; }
.brake-sides { display: grid; gap: 14px; }
.brake-side-label { display: block; margin-bottom: 7px; color: var(--dim); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brake-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.brake-parts .check-chip { background: var(--surface); }

.service-list { border-top: 1px solid var(--border); }
.service-item { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--border); }
.service-date { display: flex; justify-content: space-between; gap: 12px; padding: 17px 0 7px; color: var(--dim); font-size: 13px; font-weight: 750; }
.service-date b { color: var(--green); }
.service-body { padding: 0 0 18px; }
.service-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; }
.service-title h3 { margin: 0; font-size: 20px; }
.service-title span { color: var(--dim); font-size: 13px; }
.service-body p { margin: 9px 0 0; white-space: pre-wrap; line-height: 1.55; }
.service-notes { color: var(--dim); font-size: 13px; }
.item-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.quiet-action { min-height: 38px; font-size: 12px; }
.inline-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; }
.inline-confirm button { min-height: 38px; }

.attachments-layout { display: grid; gap: 24px; padding-top: 24px; }
.upload-box { margin: 0; }
.upload-box > div:first-child > p:last-child { margin: 8px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5; }
.file-pick { min-height: 104px; display: grid; place-items: center; margin: 18px 0 15px; padding: 18px; border: 2px dashed var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); text-align: center; font-weight: 800; cursor: pointer; }
.file-pick:hover { border-color: var(--accent-dark); }
.file-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-list { display: grid; gap: 13px; align-content: start; }
.attachment-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 13px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.attachment-card > img { width: 84px; height: 96px; object-fit: cover; border-radius: 5px; background: var(--surface-2); }
.pdf-stamp { width: 84px; height: 96px; display: grid; place-items: center; border-bottom: 4px solid var(--accent); background: var(--navy); color: #fff; font-family: Rockwell, Georgia, serif; font-size: 20px; font-weight: 900; }
.attachment-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.attachment-info strong, .attachment-info small { overflow-wrap: anywhere; }
.attachment-info small { margin-top: 5px; color: var(--dim); }
.attachment-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pdf-viewer { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--border); }
.pdf-viewer button, .spec-viewer button { min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.spec-viewer { min-height: 600px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }

@media (min-width: 700px) {
  .index-shell, .detail-shell { padding-left: 28px; padding-right: 28px; }
  .finder { grid-template-columns: minmax(0,1.05fr) minmax(330px,.95fr); min-height: 250px; align-items: end; margin-left: -28px; margin-right: -28px; padding-left: 32px; padding-right: 32px; }
  .fleet-toolbar { flex-direction: row; justify-content: space-between; align-items: center; }
  .unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .unit-card-meta { display: flex; }
  .unit-hero { grid-template-columns: 116px minmax(0,1fr) auto; margin-left: -28px; margin-right: -28px; padding: 24px 28px; }
  .hero-id { min-height: 116px; font-size: 34px; }
  .hero-actions { grid-column: auto; display: flex; flex-direction: column; justify-content: center; min-width: 155px; }
  .tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brake-sides { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wide-field { grid-column: 1 / -1; }
  .service-item { grid-template-columns: 170px minmax(0,1fr); }
  .service-date { display: flex; flex-direction: column; justify-content: flex-start; padding: 22px 20px 22px 0; }
  .service-body { padding: 20px 0 22px; }
  .attachments-layout { grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); align-items: start; }
  .upload-box { position: sticky; top: 72px; }
}
@media (min-width: 1040px) {
  .unit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .detail-shell { width: min(1040px,100%); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* --- crew app additions: auth bar, login, admin, offline queue, spec viewer --- */
.user-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--navy); border-bottom: 3px solid var(--accent); color: #fff; }
.user-bar .brand { font-family: Rockwell, "Roboto Slab", Georgia, serif; font-weight: 900; letter-spacing: .02em; }
.user-bar .who { margin-left: auto; color: #c9d0d7; font-size: 13px; }
.user-bar .who b { color: #fff; }
.role-badge { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #201803; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.role-badge.crew { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.queue-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--accent-dark); border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, var(--navy)); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.queue-badge[hidden] { display: none; }
.offline-note { padding: 10px 14px; background: #5b4307; color: #ffe9b0; font-size: 13px; font-weight: 700; text-align: center; }
.offline-note[hidden] { display: none; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px 14px; background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.login-card { width: min(420px, 100%); padding: 26px 22px; background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--accent); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.login-card h1 { margin: 0 0 4px; font-size: 30px; }
.login-card .sub { margin: 0 0 20px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; color: var(--dim); font-size: 12px; font-weight: 800; }
.login-card input { min-height: 50px; padding: 10px 12px; }
.spec-frame { width: 100%; min-height: 620px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.admin-section { padding-top: 24px; }
.user-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.user-row .uname { font-weight: 800; }
.user-row .urow-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.inactive { color: var(--dim); text-decoration: line-through; }
.queued-tag { padding: 3px 9px; border-radius: 999px; background: #5b4307; color: #ffe9b0; font-size: 11px; font-weight: 800; }
.tabs { grid-template-columns: repeat(auto-fit, minmax(0,1fr)); }
.pdf-viewer, .spec-viewer { min-height: 0; border: 0; background: transparent; overflow: visible; }