/* =====================================================================
   Mercedes-Benz chassis / electronic-system browse UI for the Database
   tab. Loaded after styles.css and polish.css so these rules win where
   they overlap. Deliberately reuses the site's existing design tokens
   (var(--accent), var(--surface), var(--line), etc.) so this reads as
   part of the same product, just organized around chassis codes —
   nothing here reproduces Mercedes-Benz's own logo or badge artwork.
   ===================================================================== */

.db-breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-bottom:16px; font-size:14px;
}
.db-crumb-link{
  background:none; border:none; padding:2px 4px; cursor:pointer;
  color:var(--accent-2); font-weight:700; font-size:14px; font-family:inherit;
}
.db-crumb-link:hover{ text-decoration:underline; }
.db-crumb-sep{ color:var(--ink-dim); }
.db-crumb-current{ color:var(--ink-dim); font-weight:600; }

.chassis-grid-pane{ margin-bottom:6px; }
.chassis-grid-intro{ margin-bottom:20px; }
.chassis-grid-title{
  font-family:var(--font-display); font-weight:800;
  font-size:24px; letter-spacing:-.01em; margin-bottom:6px;
  display:flex; align-items:center; gap:10px;
}
.chassis-grid-title::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:2px;
  background:var(--accent); transform:rotate(45deg); flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.chassis-grid-sub{ color:var(--ink-dim); font-size:15px; max-width:640px; line-height:1.5; }

.chassis-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.chassis-toolbar .chassis-search-wrap{ margin-bottom:0; flex:1 1 260px; }
.chassis-search-wrap{ max-width:420px; margin-bottom:18px; }
.chassis-search-wrap input{
  width:100%; padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font-size:15px;
}
.chassis-search-wrap input:focus{
  outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);
}
/* VIN-lookup button (opens the openDialog()-based VIN prompt in app.part4.js) */
.vin-lookup-btn{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:10px 16px; font-weight:700; font-size:14px; color:var(--accent-2); cursor:pointer;
  font-family:inherit; white-space:nowrap; transition:border-color .15s ease, transform .15s ease;
}
.vin-lookup-btn:hover, .vin-lookup-btn:focus-visible{ border-color:var(--accent); transform:translateY(-1px); outline:none; }

.chassis-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
  gap:14px; margin-bottom:18px;
}
.chassis-tile{
  text-align:left; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius-lg); padding:16px 16px 14px; cursor:pointer;
  display:flex; flex-direction:column; gap:3px; font-family:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position:relative; overflow:hidden;
}
.chassis-tile::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:0; transition:opacity .15s ease;
}
.chassis-tile:hover, .chassis-tile:focus-visible{
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(var(--accent-rgb),.14), var(--shadow);
  outline:none;
}
.chassis-tile:hover::before, .chassis-tile:focus-visible::before{ opacity:1; }
.chassis-tile-code{
  font-family:var(--font-mono); font-weight:700; font-size:20px;
  color:var(--accent); letter-spacing:.01em;
}
.chassis-tile-line{ font-weight:700; font-size:15px; color:var(--ink); }
.chassis-tile-years{ font-size:12.5px; color:var(--ink-dim); margin-bottom:6px; }
.chassis-tile-blurb{ font-size:13px; color:var(--ink-dim); line-height:1.45; flex:1; }
.chassis-tile-count{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--accent-2); margin-top:10px;
}

.system-tile .chassis-tile-line{ font-size:14px; }
.system-tile .chassis-tile-code{ font-size:17px; }

/* Main chassis-browse grid tiles: stripped down to code + class + years +
   procedure count (no tagline), centered. Scoped to .vehicle-tile so the
   system-grid tiles above are untouched. */
.chassis-tile.vehicle-tile{
  align-items:center; text-align:center; justify-content:center; gap:4px;
}
.chassis-tile.vehicle-tile .chassis-tile-years{ margin-bottom:0; }
.chassis-tile.vehicle-tile .chassis-tile-count{ margin-top:8px; }

.db-view-all-link{
  display:inline-block; background:none; border:none; cursor:pointer;
  color:var(--accent-2); font-weight:700; font-size:14.5px; padding:6px 2px;
  font-family:inherit;
}
.db-view-all-link:hover{ text-decoration:underline; }

@media (max-width:640px){
  .chassis-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .chassis-grid-title{ font-size:20px; }
}

/* ================= Chassis-grid right rail =================
   Fills the .main grid's third (340px) column on the chassis-grid
   landing page only — that column is defined by the grid everywhere on
   the site but nothing ever actually sits in it, which is also most of
   why the page reads as left-heavy/off-center on wide screens. Hidden
   below the layout's single-column breakpoint, where the inline
   "recently viewed" strip above the tile grid takes over instead. */
.chassis-rail{ display:flex; flex-direction:column; gap:20px; padding:18px 20px 18px 16px; border-left:1px solid var(--line); }
.chassis-rail-card{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; }
.chassis-rail-title{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--ink-dim); margin-bottom:10px; }
.chassis-rail-stats{ display:flex; flex-direction:column; gap:10px; }
.chassis-rail-stat{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chassis-rail-stat span{ font-size:13.5px; color:var(--ink-dim); }
.chassis-rail-stat b{ font-size:19px; font-family:var(--font-display); color:var(--ink); }
.chassis-rail-card .recent-strip{ margin-bottom:0; }
/* Capped and scrollable so a full 6-item history can't stretch the rail
   (and with it the whole grid row, since .main sizes its single row to
   the tallest of its three columns) taller than the actual page content. */
.chassis-rail-card .recent-strip-row{
  flex-direction:column; flex-wrap:nowrap; max-height:230px; overflow-y:auto; overflow-x:hidden;
  padding-right:4px; margin-right:-4px;
}
.chassis-rail-card .recent-chip{ max-width:none; flex-shrink:0; }
@media (max-width:980px){ .chassis-rail{ display:none!important; } }
@media (min-width:981px){ .recent-strip-inline{ display:none; } }

/* ================= Recently viewed strip (chassis-grid landing) =================
   Local-only "continue where you left off" — see recordRecentlyViewed()
   in app.part3.js. Hidden entirely (buildRecentlyViewedStrip returns
   null) until there's at least one procedure to show. */
.recent-strip{ margin-bottom:22px; }
.recent-strip-label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--ink-dim); margin-bottom:8px;
}
.recent-strip-row{ display:flex; gap:10px; flex-wrap:wrap; }
.recent-chip{
  text-align:left; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius-md); padding:8px 12px; cursor:pointer; font-family:inherit;
  max-width:260px; display:flex; flex-direction:column; gap:2px;
  transition:border-color .15s ease, transform .15s ease;
}
.recent-chip:hover, .recent-chip:focus-visible{ border-color:var(--accent); transform:translateY(-1px); outline:none; }
.recent-chip-title{
  font-weight:600; font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent-chip-sub{ font-size:11.5px; color:var(--ink-dim); }

/* ================= Related procedures (open card body) =================
   Computed client-side from combinedDB() by chassis/system/DTC overlap —
   see relatedProcedures() in app.part5.js. Same visual language as the
   recently-viewed chips above, just full-width rows instead of a strip. */
.related-procs{ margin-top:4px; }
.related-procs-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.related-proc-link{
  text-align:left; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius-md); padding:10px 14px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; gap:2px; width:100%;
  transition:border-color .15s ease, transform .15s ease;
}
.related-proc-link:hover, .related-proc-link:focus-visible{ border-color:var(--accent); transform:translateX(2px); outline:none; }
.related-proc-title{ font-weight:600; font-size:13.5px; color:var(--ink); }
.related-proc-sub{ font-size:11.5px; color:var(--ink-dim); }

/* ================= Print (single procedure) =================
   #printArea is built and filled by printProcedure() in app.part5.js only
   when the mechanic clicks "Print procedure" — empty and display:none the
   rest of the time. @media print hides every other element on the page so
   the print/PDF output is just the procedure sheet. */
#printArea{ display:none; }
@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ display:block; position:absolute; top:0; left:0; width:100%; padding:0; margin:0; }
  .print-doc{ font-family:Georgia,"Times New Roman",serif; color:#000; padding:24px; }
  .print-doc h1{ font-size:22px; margin:0 0 4px; }
  .print-meta{ font-size:13px; color:#444; margin-bottom:14px; }
  .print-desc{ margin-bottom:14px; }
  .print-warn{ border:1.5px solid #000; padding:10px 14px; margin-bottom:14px; }
  .print-warn strong{ display:block; margin-bottom:4px; }
  .print-jobinfo{ display:flex; gap:24px; margin-bottom:14px; font-size:13px; }
  .print-doc h2{ font-size:16px; margin:18px 0 8px; border-bottom:1px solid #999; padding-bottom:3px; }
  .print-steps{ padding-left:20px; }
  .print-steps li{ margin-bottom:10px; }
  .print-step-label{ font-weight:700; font-size:13px; }
  .print-step-text{ font-size:13px; }
  .print-specs{ border-collapse:collapse; width:100%; font-size:13px; }
  .print-specs td{ border:1px solid #999; padding:5px 8px; }
  .print-dtc li{ font-size:13px; margin-bottom:4px; }
  .print-tips li{ font-size:13px; margin-bottom:6px; }
  .print-tools dt{ font-weight:700; font-size:13px; margin-top:8px; }
  .print-tools dd{ margin:2px 0 0; font-size:13px; }
  .print-tools-list{ margin:2px 0 0; padding-left:16px; }
  .print-tools-list li{ margin-bottom:2px; }
  .print-footer{ margin-top:24px; font-size:11px; color:#666; border-top:1px solid #ccc; padding-top:8px; }
}