@font-face {
      font-family: 'Parkinsans';
      src: url('fonts/Parkinsans-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'Parkinsans';
      src: url('fonts/Parkinsans-SemiBold.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
    }

    /* ========== CSS Variables ========== */
    :host {
      --blue: #0190CA;
      --blue-dark: #097BAA;
      --gray-100: #F7F9FA;
      --gray-300: #E2EAED;
      --gray-400: #647479;
      --gray-800: #27292A;
      --green: #01B27A;
      --yellow: #E7AC41;
      --red: #E35053;
    }

    /* ========== Base Styles ========== */
    * { box-sizing: border-box; }
    .cv-dec-root {
      background: var(--gray-100);
      color: var(--gray-800);
      font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 0px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
    }
    .card {
      background: white;
      border: 1px solid var(--gray-300);
      border-radius: 8px;
      padding: 0;
      margin-bottom: 16px;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(18, 54, 68, 0.05);
    }

    /* ========== Utility Classes ========== */
    svg { display: inline-block; vertical-align: middle; }
    img.alert-icon { display: inline-block; vertical-align: middle; width: 14px; height: 14px; }
    img.alert-icon-distance { display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: 4px; }
    img.warranty-icon { display: inline-block; vertical-align: middle; width: 14px; height: 14px; }
    img.done-check-icon { display: inline-block; vertical-align: middle; width: 14px; height: 14px; }
    img.w-5 { width: 18px; height: 18px; }
    .state svg { width: 14px; height: 14px; }
    .done img { width: 18px; height: 18px; }
    .mention svg { width: 14px; height: 14px; }
    .mention img.alert-icon { width: 14px; height: 14px; }
    .jobs-count svg { width: 18px; height: 18px; }
    .section-title svg { width: 18px; height: 18px; }
    .top-right img.alert-icon { width: 14px; height: 14px; }
    .top-right img.warranty-icon { width: 18px; height: 18px; }
    .done-count img.done-check-icon { width: 14px; height: 14px; }
    .semibold { font-weight: 600; }
    .bullet { color: var(--gray-300); margin: 0 4px; }

    /* ========== Report Metadata ========== */
    .report-metadata {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .metadata-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
    }
    .metadata-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
    }
    .metadata-row svg {
      width: 16px;
      height: 16px;
    }
    /* On the narrowest phones the label may wrap, never the date itself. */
    .metadata-row .semibold { white-space: nowrap; }
    .metadata-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-download,
    .btn-print {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      height: 32px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 400;
      cursor: pointer;
      border: none;
      background: var(--blue);
      color: white;
      font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      white-space: nowrap;
      transition: all 0.2s;
      box-shadow: 0px 0px 15px rgba(1, 144, 202, 0.25);
    }
    .btn-download:hover,
    .btn-print:hover {
      background: var(--blue-dark);
    }
    .btn-download svg,
    .btn-print svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    /* ========== Distance units (Km | Mi) ========== */
    /* Every distance is in the document twice (see utils/distanceUnits.js);
       data-units on .report-container shows one. Km is the default when the
       attribute is missing, so a report injected without it still reads right. */
    .u-mi { display: none; }
    .report-container[data-units="mi"] .u-km { display: none; }
    .report-container[data-units="mi"] .u-mi { display: inline; }

    .report-unit-toggle {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 3px 5px;
      gap: 3px;
      width: 63px;
      height: 32px;
      border: 1px solid var(--gray-300);
      border-radius: 6px;
      background: #fff;
      flex: none;
    }
    .ru-opt {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 20px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 3px;
      background: transparent;
      color: var(--gray-800);
      font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
      cursor: pointer;
    }
    .ru-opt:hover { background: var(--gray-100); }
    .report-container:not([data-units="mi"]) .ru-opt[data-unit="km"],
    .report-container[data-units="mi"] .ru-opt[data-unit="mi"] {
      background: var(--blue);
      border-color: var(--blue-dark);
      color: #fff;
      cursor: default;
    }
    /* Desktop: Download, Print, then the two display toggles (units, language). */
    @media (min-width: 769px) { .metadata-right .report-unit-toggle { order: 2; } }

    /* Full year on desktop, ’26 on a phone (see formatDateResponsive). */
    .yr-s { display: none; }

    /* ========== Print Styles ========== */
    .print-logo {
      display: none;
    }

    @media print {
      /* A printed page is narrow enough to trip the mobile query, but a PDF is
         a document that outlives the year it was made in: always the full year.
         !important because the mobile block comes later in the sheet. */
      .yr-l { display: inline !important; }
      .yr-s { display: none !important; }

      /* Force colors and backgrounds to print */
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }

      .report-metadata {
        display: none;
      }
      .btn-download,
      .btn-print {
        display: none !important;
      }
      .cv-dec-root {
        background: white;
      }
      .print-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 0;
        margin-bottom: 16px;
        gap: 12px;
      }
      .print-logo img {
        height: 40px;
        width: auto;
      }
      .print-logo a {
        text-decoration: none;
      }
      .print-date {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
      }
      .print-date svg {
        width: 16px;
        height: 16px;
      }

      /* Hide chevrons */
      .chevron-icon {
        display: none !important;
      }

      /* A printed report is the archival copy, so it carries every key reading
         whether or not the reader unfolded them on screen. A closed <details>
         hides its children, hence the override on everything but the summary —
         which is itself dropped, being a control. */
      .kr-group { display: block !important; }
      .kr-group > .kr-row { display: none !important; }
      .kr-group > .entry-wrapper { display: flex !important; animation: none !important; }

      /* Force all entries to be expanded */
      .entry-card {
        display: block !important;
      }
      .entry-head {
        cursor: default;
      }
      .entry-content {
        display: block !important;
      }
    }

    /* ========== Technical Campaigns Table ========== */
    .table { width: 100%; border-radius: 0; overflow: hidden; }
    .table__head, .tr { display: grid;  grid-template-columns: 17% 64.5% 19%; }
    .th, .td {
      padding: 8px 10px;
      font-size: 12px;
      border-top: 1px solid var(--gray-300);
      border-right: 1px solid var(--gray-300);
    }
    .table__head .th {
      font-weight: 400;
      color: var(--gray-400);
      font-size: 10px;
      border-top: none;
      padding: 6px 10px;
    }
    .tr { background: white; }
    .tr:first-child { border-top: none; }
    .tr-warning { background: rgba(231, 172, 65, 0.05); }
    .tr-warning .td { font-weight: 600; color: var(--yellow); }
    .tr-danger { background: rgba(227, 80, 83, 0.05); }
    .tr-danger .td { font-weight: 600; color: var(--red); }
    .mentions { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; }
    .mention {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    .mention.danger { color: var(--red); }
    .campaign-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    .campaign-status.solved { color: var(--green); }
    .campaign-status.open { color: var(--yellow); }
    .campaign-status img.alert-icon { width: 14px; height: 14px; }

    /* ========== Restrictions Table (3 columns) ========== */
    .table.restrictions-table .table__head,
    .table.restrictions-table .tr {
      grid-template-columns: 55.5% 20% 25%;
    }

    /* ========== Warranty Contracts Table (4 columns) ========== */
    .table.warranty-contracts-table .table__head,
    .table.warranty-contracts-table .tr {
      grid-template-columns: 40% 20% 20% 20%;
    }

    /* ========== Equipment Tables (Optionals & Retrofits) ========== */
    .equipment-section {
      position: relative;
    }
    .equipment-section .table__head,
    .equipment-section .tr {
      grid-template-columns: 10% 91%;
    }
    .equipment-header {
      cursor: pointer;
      list-style: none;
    }
    .equipment-header::-webkit-details-marker {
      display: none;
    }
    .equipment-content {
      overflow: hidden;
    }
    /* Chevron behavior for equipment sections */
    .equipment-section:not([open]) .chevron-down {
      display: inline-flex;
    }
    .equipment-section[open] .chevron-up {
      display: inline-flex;
    }
    /* Remove border-bottom when equipment section is collapsed */
    .equipment-section:not([open]) .equipment-header {
      border-bottom: 0px solid var(--gray-300);
    }
    .mono {
      font-family: 'Courier New', monospace;
    }

    /* ========== Factory Equipment V2 (image cards) ========== */
    .optionals-v2 .equipment-content {
      padding: 0;
    }
    .optionals-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .optional-card {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 8px;
      min-height: 68px;
      border-right: 1px solid var(--gray-300);
      border-bottom: 1px solid var(--gray-300);
    }
    /* Alternating row tint (desktop 2-col): rows 2,4,… => children 3,4,7,8,… */
    .optional-card:nth-child(4n+3),
    .optional-card:nth-child(4n) {
      background: rgba(100, 116, 121, 0.03);
    }
    /* No trailing right border on the right-hand column */
    .optional-card:nth-child(even) {
      border-right: 0;
    }
    .optional-thumb {
      flex: none;
      width: 92.04px;
      height: 52px;
      border-radius: 6px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      mix-blend-mode: multiply;
    }
    .optional-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 6px 12px;
      min-width: 0;
      flex: 1;
    }
    .optional-code {
      font-family: 'Parkinsans', sans-serif;
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      color: #0190CA;
    }
    .optional-desc {
      font-family: 'Parkinsans', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #27292A;
      overflow-wrap: anywhere;
    }

    /* ========== Section Headers ========== */
    .top-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--gray-300);
      padding: 12px 16px;
      margin-bottom: 0;
    }
    /* Section titles are <h2> so search and AI crawlers can segment the report;
       the reset keeps them looking exactly as they did as <div>s. */
    .top-left, .section-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }
    .top-right {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      flex-wrap: wrap;
    }

    /* ========== Vehicle Details Section ========== */
    .vehicle-details-content {
      display: flex;
      gap: 16px;
      padding: 16px;
      border-bottom: 1px solid var(--gray-300);
    }
    .vehicle-image-container {
      flex-shrink: 0;
    }
    /* The photo 250px wide in AnyKee's own proportions (its pictures are 298 x 180),
       shown whole rather than cropped, the brand logo on its corner (Alin, 2026-10-26,
       from the decoder card). Top-aligned and a block, so nothing moves when it loads. */
    .vehicle-photo {
      position: relative;
      display: inline-block;
      vertical-align: top;
      max-width: 100%;
      line-height: 0;
    }
    .vehicle-logo {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 1;
      width: auto;
      height: 36px;
      max-width: 80px;
      object-fit: contain;
    }
    .vehicle-image {
      display: block;
      width: 250px;
      max-width: 100%;
      height: auto;
      aspect-ratio: 298 / 180;
      object-fit: contain;
      border-radius: 6px;
    }
    .vehicle-info-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: center;
    }
    .vehicle-heading {
      font-size: 30px;
      font-weight: 600;
      color: var(--blue);
      line-height: 1.2;
    }
    /* As large as the old decoder's car name on desktop (Alin, 2026-10-26): 40px from
       1200px, 30 on tablets, 24 on phones (below). */
    @media (min-width: 1200px) { .vehicle-heading { font-size: 40px; } }
    .vehicle-specs-top {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px;
    }
    /* Every cell hugs its value and the row packs to the left, 16px apart.
       They used to be flex:1, which made each one a third of the row, so a
       short value like "4 Series" sat in the middle of a column of dead space
       while "Touring (5 doors)" wrapped in the next one. Nothing grows now, so
       the slack collects at the right edge instead of between the values.
       Same rule as the decoder card on /decode. */
    .vehicle-specs-top .spec {
      flex: 0 1 auto;
      min-width: 0;
    }
    .vehicle-details-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      padding: 16px;
    }
    .spec {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .spec-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    /* Manufacturer and market: the country's flag in the icon's place, 20px. */
    .spec-flag-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .spec-flag { display: block; width: 20px; height: 20px; }
    .spec-content {
      flex: 1;
      min-width: 0;
    }
    .spec-title {
      font-size: 10px;
      color: var(--gray-400);
    }
    .spec-value {
      font-size: 14px;
      color: var(--gray-800);
      font-weight: 400;
      word-wrap: break-word;
    }

    /* ========== Vehicle History Entries ========== */
    .entries { padding: 16px 16px 0px 16px; display: flex; flex-direction: column; gap: 0; }
    .entry-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 0px 8px 0px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      list-style: none;
    }
    .entry-head::-webkit-details-marker {
      display: none;
    }
    .entry-head__left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 16px;
    }
    .entry-head__right {
      display: flex;
      align-items: center;
      gap: 2px;
      color: var(--blue);
      font-weight: 600;
      font-size: 16px;
      white-space: nowrap;
    }
    .entry-distance {
      color: var(--blue);
    }
    .entry-distance.rollback {
      color: var(--red);
    }
    .entry-distance.mileage-error {
      color: var(--gray-400);
    }
    .chevron-icon {
      display: inline-flex;
      align-items: center;
    }
    .chevron-icon svg {
      width: 18px;
      height: 18px;
    }
    .chevron-down, .chevron-up {
      display: none;
    }
    /* When details is closed, show chevron-down */
    .entry-card:not([open]) .chevron-down {
      display: inline-flex;
    }
    /* When details is open, show chevron-up */
    .entry-card[open] .chevron-up {
      display: inline-flex;
    }

    /* Static (non-expandable) all-green key entries — nothing to expand */
    .entry-static .entry-head { cursor: default; }
    /* Reserve the missing chevron's space so the km stays aligned */
    .entry-static .entry-head__right { padding-right: 20px; }

    /* Technician data-entry error info icon + tooltip on the distance cell */
    .typo-info {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-right: 4px;
      cursor: pointer;
    }
    .typo-info svg { width: 14px; height: 14px; }
    .typo-info::before {
      content: attr(data-tooltip);
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      width: 220px;
      background: white;
      padding: 8px 10px;
      border-radius: 6px;
      box-shadow: 0px 0px 15px rgba(18, 54, 68, 0.15);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
      z-index: 1000;
      white-space: normal;
      font-size: 12px;
      font-weight: 400;
      color: var(--gray-800);
      line-height: 1.5;
      text-align: left;
    }
    .typo-info:hover::before {
      opacity: 1;
      visibility: visible;
    }

    .type { font-weight: 400; }
    .repair-alert { color: var(--red); font-weight: 600; }
    .jobs-count { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
    .done-count { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
    .done-count svg { width: 14px; height: 14px; }
    .entry-location {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 0px 12px 0px;
      font-size: 12px;
      color: var(--gray-800);
      font-weight: 400;
    }
    /* Round country flag. The artwork lives in a single hidden <defs> block per
       document (.flag-defs) and every row points at it with <use>, so a report
       carries one copy per country rather than one per entry. */
    .flag-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
    .loc-flag {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      border-radius: 50%;
      display: block;
    }
    /* Trailing the country name rather than leading the line. */
    .loc-flag--suffix { display: inline-block; vertical-align: -3px; margin-left: 5px; }
    .entry-location .location-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .entry-location .location-text {
      color: var(--gray-800);
    }

    /* ========== Positions Table ========== */
    .entry-content-container {
      border: 1px solid var(--gray-300);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 0;
    }
    .entry-content-container + .jobs-container { margin-top: 10px; }
    .positions { border-radius: 0; overflow: hidden; }
    /* Single source of truth for the grid. It used to be written inline on every
       head and row as well as here, which meant the mobile media query could not
       override it without !important. minmax(0,…) is load-bearing: without it a
       grid cell refuses to shrink below its content and the table overflows in
       exactly the languages with the longest words (de, pl). */
    .positions__head, .pos-row { display: grid; }
    /* The Done column has to fit its own HEADER, not just the 18px tick — at
       40px "Done" broke across two lines, and the translations are longer
       still ("Erledigt", "Wykonane"). */
    .positions--service .positions__head, .positions--service .pos-row {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 68px;
    }
    .positions--key .positions__head, .positions--key .pos-row {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
    .positions__head .ph:last-child, .pos-row .done { padding-left: 6px; padding-right: 6px; }
    .ph, .pc {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 6px 10px;
      font-size: 12px;
      border-top: 1px solid var(--gray-300);
      border-right: 1px solid var(--gray-300);
      min-width: 0;
      overflow-wrap: anywhere;
    }
    /* The table already has an outer border; the last cell's own right edge
       doubled it into a two-pixel line down the Done column. */
    .positions__head .ph:last-child, .pos-row .pc:last-child { border-right: none; }
    .positions__head .ph {
      font-weight: 400;
      color: var(--gray-400);
      font-size: 10px;
      border-top: none;
      padding: 6px 10px;
    }
    .pos-row { background: white; }
    .pos-row:first-child { border-top: none; }
    /* Checklist item: icon, then the (translated) name. The icon is matched on
       the untranslated description, so it survives every language. */
    .pos-item { gap: 6px; }
    .pos-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: var(--gray-400);
      display: block;
    }
    /* Status cell: coloured state word over the humanised remaining life.
       align-items is the CROSS axis in a column flexbox, so it has to be reset
       here — inherited from .pc it centred both lines horizontally. */
    .pos-status { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; }
    .pos-state { display: inline-flex; align-items: center; gap: 4px; }
    .pos-detail { font-size: 10px; line-height: 1.35; }
    .state { display: inline-flex; align-items: center; gap: 4px; }
    .done { display: flex; align-items: center; justify-content: center; }
    /* Spells out what the green tick in the Done column means. Without it a red
       "Due" row carrying a tick reads as a contradiction. */
    .positions-note {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 10px;
      font-size: 10px;
      color: var(--gray-400);
      border-top: 1px solid var(--gray-300);
      background: white;
    }
    .positions-note__ic { width: 12px; height: 12px; flex-shrink: 0; }

    /* ========== Jobs Section ========== */
    .job-section {
      overflow: hidden;
      margin-bottom: 8px;
      border: 1px solid var(--gray-300);
      border-top: none;
      border-radius: 6px;
    }
    .job-section:last-child { margin-bottom: 0; }
    .job-section:has(.job-title) {
      border: 1px solid var(--gray-300);
      border-radius: 6px;
    }
    .job-title {
      padding: 8px;
      font-weight: 600;
      font-size: 16px;
      color: var(--gray-800);
      border-bottom: none;
      background: white;
    }
    .job-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 96px;
      background: white;
      font-size: 12px;
    }
    .job-section:has(.job-title) .job-row:first-child { border-top: 1px solid var(--gray-300); }
    .job-section:not(:has(.job-title)) .job-row:first-child { border-top: none; }
    .jc { display: flex; align-items: center; 
    padding: 8px; 
    border-top: 1px solid var(--gray-300);
    border-right: 1px solid var(--gray-300);
    }
    .job-section--no-qty .job-row { grid-template-columns: minmax(0, 1fr); }
    .jc:last-child { border-right: none; }
    .job-defects {
      padding: 8px;
      border-top: 1px solid var(--gray-300);
      background: white;
      font-size: 12px;
      color: var(--gray-800);
    }
    .job-defect + .job-defect { margin-top: 4px; }
    .job-defect__label { color: var(--gray-400); }
    .job-bullet {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      border: 1px solid var(--blue);
      display: inline-block;
      margin-right: 6px;
      flex-shrink: 0;
    }
    .job-title-text {
      font-size: 12px;
      font-weight: 400;
    }
    .quantity { display: flex; align-items: center; justify-content: flex-start; }
    .qty {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
    }
    .empty {
      padding: 16px;
      color: var(--gray-400);
      font-size: 14px;
      text-align: center;
    }
    /* Empty states with their illustration (emptyStateArt.js): the picture and the
       text in one row at the section's left edge; on phones the text keeps a narrow
       column next to it. */
    .empty--art {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      text-align: left;
    }
    .empty__art { flex: none; width: 56px; height: 56px; display: block; }
    @media (max-width: 768px) {
      .empty--art { gap: 8px; padding: 12px 16px; }
      .empty__text { max-width: 200px; line-height: 20px; }
    }

    /* ========== Mileage Chart ========== */
    .mileage-chart {
      padding: 16px;
      width: 100%;
      max-width: 1000px;
      position: relative;
    }
    .mileage-chart svg {
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none;
    }
    .chart-overlay-container {
      position: absolute;
      top: 16px;
      left: 16px;
      right: 16px;
      bottom: 16px;
      pointer-events: none;
    }

    /* Hover lives here, not in the SVG: this overlay sits on top of the chart,
       so it is what the pointer actually reaches. The wrapper spans the plot
       area and carries the drop line; the small hit box inside it sits on the
       marker and carries the tooltip. The wrapper itself takes no pointer
       events, but still matches :hover when its hit box is the target. */
    .bullet-wrapper {
      position: absolute;
      width: 0;
      z-index: 10;
      pointer-events: none;
    }
    /* Dashed drop line, from the reading down to the axis. A gradient rather
       than a dashed border so the dashes match the SVG's stroke-dasharray. */
    .bullet-wrapper::after {
      content: "";
      position: absolute;
      left: -0.5px;
      top: var(--y);
      bottom: 0;
      width: 1px;
      background-image: repeating-linear-gradient(
        to bottom, #0190CA 0 8px, transparent 8px 16px
      );
      opacity: 0;
      transition: opacity 0.2s;
    }
    .bullet-wrapper:hover::after {
      opacity: 1;
    }
    /* A rollback already has a permanent red line drawn in the SVG. */
    .bullet-wrapper--rollback::after {
      display: none;
    }
    .bullet-hit {
      position: absolute;
      top: var(--y);
      left: 0;
      width: var(--hit, 12px);
      height: var(--hit, 12px);
      transform: translate(-50%, -50%);
      cursor: pointer;
      pointer-events: all;
    }
    /* Enlarged dot on hover, over the SVG bullet (which cannot react itself). */
    .bullet-hit::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 12px;
      margin: -6px 0 0 -6px;
      border-radius: 50%;
      background: #0190CA;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .bullet-hit:hover::after {
      opacity: 1;
    }
    /* The rollback marker is a 26px icon; a blue dot over it would be wrong. */
    .bullet-wrapper--rollback .bullet-hit::after {
      display: none;
    }
    /* One tooltip component for both the entry bullets and the gap markers.
       Two real spans rather than a generated content string, because the two
       lines carry different weight: the lead is the finding, the sub is its
       context. */
    .chart-tip {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      background: white;
      padding: 6px 10px;
      border-radius: 6px;
      box-shadow: 0px 0px 15px rgba(18, 54, 68, 0.15);
      white-space: nowrap;
      text-align: center;
      line-height: 1.4;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
      z-index: 1000;
    }
    .chart-tip__lead {
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-800);
    }
    .chart-tip__sub {
      font-size: 12px;
      font-weight: 400;
      color: var(--gray-400);
    }
    /* A rollback's headline number is the tampered reading, so it carries the
       alert colour; the date stays secondary. */
    .bullet-wrapper--rollback .chart-tip__lead {
      color: #E35053;
    }
    .bullet-hit:hover .chart-tip,
    .gap-wrapper:hover .chart-tip {
      opacity: 1;
      visibility: visible;
    }

    /* Hover target over a service-gap marker, sized to the icon it covers. */
    .gap-wrapper {
      position: absolute;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 10;
      pointer-events: all;
    }

    /* Mileage info section */
    .mileage-info {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      border-top: 1px solid var(--gray-300);
    }
    .info-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14px;
      color: var(--gray-800);
    }
    .info-item svg {
      margin-top: 2px;
    }
    .info-item img.info-icon {
      width: 18px;
      height: 18px;
      margin-top: 2px;
      flex-shrink: 0;
    }
    .info-content {
      flex: 1;
    }
    .info-content p {
      margin: 0;
      line-height: 1.5;
    }
    .info-content p:last-child {
      margin-bottom: 0;
    }
    .info-bullets {
      margin: 8px 0;
      display: flex;
      flex-direction: column;
    }
    .info-bullet-item {
      display: flex;
      gap: 2px;
      align-items: flex-start;
    }
    .info-bullet-item .bullet {
      color: var(--gray-400);
      flex-shrink: 0;
    }

    /* ========== Entry Timeline (Bullets & Lines) ========== */
    .entry-wrapper {
      display: flex;
      gap: 8px;
      position: relative;
    }
    /* Folded-away key readings. One <details> per stretch, so each unfolds on
       its own. The summary is built to match an entry row: same bullet column,
       same static card, so the note sits where an entry's own sub-lines sit
       rather than at an indent of its own. */
    .kr-group > summary::-webkit-details-marker { display: none; }
    .kr-group > summary::marker { content: ""; }
    .kr-row { cursor: pointer; list-style: none; user-select: none; }
    .kr-row__rail {
      align-self: stretch;
      /* .entry-card carries a 10px bottom margin and the timeline stops at the
         wrapper's content edge, so without this the dashes would start 10px
         below where the solid line left off. */
      margin-top: -10px;
    }
    /* The dashes belong to the timeline itself, not to a separate rule beside
       it: same 1px axis, same colour, just broken while the stretch is folded.
       8px dashes 8px apart, like a gap's (in blue), from the bullet of the visit
       above (entry-wrapper--before-fold) to the bullet of the visit below. */
    .kr-row__rail .entry-line,
    .entry-wrapper--before-fold:has(+ .kr-group:not([open])) > .entry-bullet-container > .entry-line {
      width: 1px;
      background: repeating-linear-gradient(to bottom, var(--blue) 0 8px, transparent 8px 16px);
    }
    /* 20px under the note, like a gap card: the note then sits halfway between
       the two visits' bullets (Alin, 2026-10-19: same space above and below). */
    .kr-row .kr-card { margin-bottom: 20px; display: flex; align-items: center; min-height: 26px; }
    .kr-note {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 0 20px 0 0;
      color: var(--gray-400);
      font-size: 10px;
    }
    .kr-note__ic { display: inline-flex; flex-shrink: 0; }
    .kr-note__ic svg { width: 13px; height: 13px; display: block; }
    .kr-note__cta {
      margin-left: auto;
      color: var(--gray-800);
      font-weight: 600;
      text-decoration: underline;
    }
    /* Unfolded, the readings ARE the timeline again and the row has nothing
       left to say, so it goes entirely — dashes, count and all. */
    .kr-group[open] > .kr-row { display: none; }
    /* Revealed rows slide down into place, lightly staggered so the stretch
       reads as one movement rather than a jump. The cap keeps a long run from
       finishing a second after it started. */
    @keyframes kr-reveal {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: none; }
    }
    .kr-group[open] > .entry-wrapper { animation: kr-reveal 220ms ease-out both; }
    .kr-group[open] > .entry-wrapper:nth-child(2) { animation-delay: 0ms; }
    .kr-group[open] > .entry-wrapper:nth-child(3) { animation-delay: 30ms; }
    .kr-group[open] > .entry-wrapper:nth-child(4) { animation-delay: 60ms; }
    .kr-group[open] > .entry-wrapper:nth-child(5) { animation-delay: 90ms; }
    .kr-group[open] > .entry-wrapper:nth-child(n+6) { animation-delay: 120ms; }
    @media (prefers-reduced-motion: reduce) {
      .kr-group[open] > .entry-wrapper { animation: none; }
    }
    .entry-bullet-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .entry-bullet {
      flex-shrink: 0;
    }
    .entry-bullet-container { width: 18px; }
    .entry-bullet-outer {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      position: relative;
      z-index: 1;
    }
    .entry-bullet-inner {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--blue);
    }
    .entry-line {
      width: 1px;
      flex: 1;
      background: var(--blue);
    }
    .entry-card {
      flex: 1;
      margin-bottom: 10px;
    }
    .production-entry {
      flex: 1;
      padding: 0 0 16px 0;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: var(--gray-800);
      flex-wrap: wrap;
    }
    .production-entry .semibold {
      font-size: 16px;
    }

    /* ========== Disclaimer ========== */
    .disclaimer {
      font-size: 10px;
      color: var(--gray-400);
      line-height: 1.2;
      padding: 0 0px 16px 0px;
      text-align: center;
    }

    /* AI overview disclaimer — subtle note under the Report Summary card */
    .summary-disclaimer {
      font-size: 10px;
      color: var(--gray-400);
      line-height: 1.2;
      text-align: center;
      padding: 0px 0px 16px 0px;
    }

    /* ========== Report Summary (redesign) ========== */
    .summary-card { border-radius: 12px; overflow: visible; }

    /* Header (reuses the shared .top-header component) */
    .summary-top-left { display: inline-flex; align-items: center; gap: 8px; }
    .summary-stars { display: inline-flex; }
    .summary-stars img { width: 24px; height: 24px; }
    .summary-beta {
      display: inline-flex; align-items: center;
      background: var(--blue); border: 1px solid var(--blue-dark); color: #fff;
      font-size: 10px; font-weight: 400; line-height: 1; padding: 3px 6px; border-radius: 4px;
    }

    /* Score hero */
    .summary-hero { display: flex; align-items: stretch; border-bottom: 1px solid var(--gray-300); }
    .summary-hero__score {
      flex-shrink: 0; width: 275px; padding: 16px 36px 16px 16px;
      border-right: 1px solid var(--gray-300);
      display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    }
    .summary-score__label { font-size: 12px; color: var(--gray-800); }
    .summary-score__value { display: flex; align-items: baseline; gap: 4px; font-size: 56px; font-weight: 600; line-height: 1; }
    .summary-score__max { font-size: 20px; color: var(--gray-400); font-weight: 400; }
    .summary-score__built {
      position: relative; display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; color: var(--gray-800); cursor: pointer;
      text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px;
    }
    .summary-score__ic { display: inline-flex; text-decoration: none; }
    .summary-score__ic svg { width: 18px; height: 18px; }
    .summary-score__panel {
      position: absolute; left: 0; top: calc(100% + 8px);
      width: max-content; max-width: min(480px, 88vw);
      background: #fff; padding: 12px 14px; border-radius: 8px; box-shadow: 0 0 15px rgba(18,54,68,0.15);
      opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 1000; text-decoration: none;
    }
    .summary-score__built:hover .summary-score__panel { opacity: 1; visibility: visible; }
    .summary-score__paneltitle { font-size: 12px; font-weight: 600; color: var(--gray-800); margin-bottom: 8px; }
    /* The label wraps, the points never do. With nowrap on the whole row the
       longest label set the row's min-content width, which max-width cannot
       shrink — so on a phone the panel ran off the screen and took the points
       column with it. */
    .summary-score__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 12px; color: var(--gray-800); padding: 3px 0; }
    .summary-score__row > span:first-child { flex: 1 1 auto; min-width: 0; }
    .summary-score__row > span:last-child { flex: 0 0 auto; white-space: nowrap; }
    .summary-score__delta { color: var(--red); font-weight: 600; }

    .summary-hero__verdict { flex: 1; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
    .summary-verdict__title { font-size: 18px; font-weight: 600; }
    .summary-verdict__text { font-size: 14px; line-height: 1.45; color: var(--gray-800); }

    /* Status grid (bordered 2×3) */
    .summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
    .summary-stat {
      padding: 16px; display: flex; flex-direction: column; gap: 8px;
      border-right: 1px solid var(--gray-300); border-bottom: 1px solid var(--gray-300);
    }
    .summary-stat:nth-child(3n) { border-right: none; }
    .summary-stat:nth-child(n+4) { border-bottom: none; }
    .summary-stat__label { font-size: 12px; color: var(--gray-400); }
    .summary-stat__row { display: flex; align-items: center; gap: 6px; }
    .summary-stat__icon { display: inline-flex; align-items: center; flex-shrink: 0; }
    .summary-stat__icon img, .summary-stat__icon svg { width: 22px; height: 22px; }
    .summary-stat__status { font-size: 18px; font-weight: 600; }
    .summary-stat__sub { font-size: 12px; color: var(--gray-800); }

    /* What we found */
    .summary-found-row { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--gray-300); }
    .summary-found { padding: 16px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--gray-300); }
    .summary-found:last-child { border-right: none; }
    .summary-found__head { display: flex; align-items: center; gap: 8px; }
    .summary-found__ic { display: inline-flex; align-items: center; color: var(--gray-800); }
    .summary-found__ic img, .summary-found__ic svg { width: 22px; height: 22px; }
    .summary-found__title { font-size: 18px; font-weight: 600; color: var(--gray-800); }
    .summary-found__ok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-800); }
    .summary-found__okic { width: 18px; height: 18px; flex-shrink: 0; }
    .summary-found__text { font-size: 12px; line-height: 1.5; color: var(--gray-800); }
    .summary-found__lines { display: flex; flex-direction: column; gap: 6px; }
    .summary-found__line { font-size: 12px; line-height: 1.45; color: var(--gray-800); }

    /* Negotiation / takeaway (blue gradient) */
    .summary-leverage { padding: 16px; background: linear-gradient(90deg, rgba(1,144,202,0.1) 0%, rgba(1,144,202,0) 100%); }
    .summary-leverage__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .summary-leverage__ic { display: inline-flex; align-items: center; color: var(--blue); }
    .summary-leverage__ic img, .summary-leverage__ic svg { width: 24px; height: 24px; }
    .summary-leverage__title { font-size: 18px; font-weight: 600; color: var(--blue); }
    .summary-leverage__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gray-800); }

    /* Per-entry repair summary: the design system's light grey card (surface to white,
       the line colour), no "Summary:" label, the sparkle in grey (Alin, 2026-10-23). */
    .entry-summary { box-sizing: border-box; display: flex; align-items: flex-start; padding: 12px; gap: 8px;
      margin: 0px 0 8px 0; background: linear-gradient(90deg, #F7F9FA 0%, #FFFFFF 100%);
      border: 1px solid #E2EAED; border-radius: 6px; }
    .entry-summary__ic { display: flex; align-items: center; padding-top: 1px; flex-shrink: 0; }
    .entry-summary__img { width: 18px; height: 18px; filter: grayscale(1) brightness(.85); }
    .entry-summary__text { font-family: 'Parkinsans'; font-weight: 400; font-size: 14px; line-height: 20px;
      color: var(--gray-800); flex-grow: 1; }
    .entry-summary__text strong { font-weight: 600; color: #0190CA; }
    /* Only the "Summary:" label is blue. Figures emphasised inside the sentence
       stay body-coloured — bold is the whole formatting budget here. */
    .entry-summary__text .entry-summary__body strong { color: inherit; }

    /* Rollback at the visit where it was detected: the entry-summary card in red. */
    .entry-rollback { box-sizing: border-box; display: flex; align-items: flex-start; padding: 12px; gap: 8px;
      margin: 0 0 8px 0; background: linear-gradient(90deg, rgba(227,80,83,0.12) 0%, rgba(227,80,83,0) 100%);
      border: 1px solid rgba(227,80,83,0.25); border-radius: 6px; }
    .entry-rollback__ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
    .entry-rollback__text { font-family: 'Parkinsans'; font-size: 14px; line-height: 20px; color: var(--gray-800); }
    .entry-rollback__text strong { font-weight: 600; color: #E35053; }

    /* A service gap in the entry list: the timeline turns to yellow dashes and the
       card is hatched like the gap band on the mileage chart. */
    .gap-row__rail { align-self: stretch; margin-top: -10px; }
    .entries > .gap-row:first-child .gap-row__rail { margin-top: 0; }
    /* 8px dashes, 8px apart: the chart's hover line, in the gap colour. */
    .gap-row__rail .entry-line,
    .entry-wrapper--before-gap > .entry-bullet-container > .entry-line {
      width: 1px; background: repeating-linear-gradient(to bottom, #E7AC41 0 8px, transparent 8px 16px);
    }
    /* 20px below, the same as above it (the visit's 8px head padding plus its 10px margin, to the bullet). */
    .gap-card { box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 20px;
      border: 1px solid rgba(231,172,65,0.35); border-radius: 6px;
      /* The chart's gap band itself (pattern gapHatch, drawn at 30% opacity), as an
         SVG background, so lines, spacing, direction and their soft edges match;
         a CSS gradient with hard 1px stops aliased into stripes of uneven weight. */
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='h' patternUnits='userSpaceOnUse' width='8' height='8' patternTransform='rotate(45)'%3E%3Cline x1='0' y1='0' x2='0' y2='8' stroke='%23E7AC41' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23h)' opacity='0.3'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
    /* A touch taller than an entry row on desktop, so the hole reads as a stretch of time. */
    @media (min-width: 769px) { .gap-card { min-height: 100px; justify-content: center; } }
    .today-bullet { border-color: #E7AC41; }
    .today-bullet .entry-bullet-inner { background: #E7AC41; }
    .entry-distance.unknown { color: #E7AC41; }
    /* The alert sits where an entry's chevron would. */
    .today-row .entry-head__right { padding-right: 0; }
    .today-alert { display: inline-flex; align-items: center; justify-content: center; width: 18px; }
    .gap-card__ic { width: 18px; height: 18px; flex-shrink: 0; }
    .gap-card__text { font-size: 14px; line-height: 20px; color: var(--gray-800); display: flex; flex-wrap: wrap; align-items: center; }
    .gap-card__text .bullet { margin: 0 6px; }
    /* On a phone the two halves stack: a bullet left dangling at a line end reads as a typo. */
    @media (max-width: 768px) {
      .gap-card__text { display: block; }
      .gap-card__text .bullet { display: none; }
      .gap-card__text > span:last-child { display: block; }
    }

    /* ========== Responsive Design (Mobile) ========== */
    @media (max-width: 768px) {
      .yr-l { display: none; }
      .yr-s { display: inline; }

      /* Report Summary — stack hero, status grid to 2 cols, findings to 1 col */
      .summary-hero { flex-direction: column; }
      .summary-stars img { width: 18px; height: 18px; }
      .summary-hero__score { width: 100%; border-right: none; border-bottom: 1px solid var(--gray-300); }
      .summary-stats { grid-template-columns: repeat(2, 1fr); }
      .summary-stat:nth-child(3n) { border-right: 1px solid var(--gray-300); }
      .summary-stat:nth-child(2n) { border-right: none; }
      .summary-stat:nth-child(n+4) { border-bottom: 1px solid var(--gray-300); }
      .summary-stat:nth-child(5), .summary-stat:nth-child(6) { border-bottom: none; }
      .summary-found-row { grid-template-columns: 1fr; }
      .summary-found { border-right: none; border-bottom: 1px solid var(--gray-300); }
      .summary-found:last-child { border-bottom: none; }
      .summary-score__value { font-size: 44px; }
      .cv-dec-root { padding: 0px; font-size: 12px; }
      .page { max-width: 100%; }

      /* Report metadata — one row: the dates stacked on the left, Km | Mi and
         the two buttons on the right. */
      .metadata-left {
        flex-direction: column;
        gap: 2px;
        align-items: start;
      }
      .metadata-left .bullet {
        display: none;
      }
      /* With the language toggle as well, that row held the two dates, two
         toggles and both buttons, and the dates ended up pressed against the
         controls. So it stacks: row 1 is information (both dates side by side,
         spaced rather than dotted, so nothing dangles when they wrap on the
         narrowest phones), row 2 the controls: language, then Km | Mi on the
         left — the language toggle on the outer edge, as on desktop — and the
         two buttons pushed right. */
      .report-metadata--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .report-metadata--stacked .metadata-left {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 14px;
      }
      .report-metadata--stacked .metadata-right .btn-download { margin-left: auto; }
      .metadata-row {
        font-size: 12px;
      }
      .metadata-row svg {
        width: 14px;
        height: 14px;
      }
      .metadata-right {
        gap: 6px;
      }
      .metadata-right .report-unit-toggle { order: 1; }
      .metadata-right .btn-download { order: 2; }
      .metadata-right .btn-print { order: 3; }
      .btn-download,
      .btn-print {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
      }
      .btn-text {
        display: none;
      }

      /* Top header */
      .top-header { flex-direction: column; align-items: flex-start; padding: 10px 12px; }
      /* Short status-badge headers stay title-left / state-right even on mobile. */
      .top-header.top-header--inline { flex-direction: row; align-items: center; justify-content: space-between; }
      .top-header.top-header--inline .top-right { margin-top: 0; }
      .top-left { font-size: 18px; }
      .top-right { font-size: 12px; flex-wrap: wrap; margin-top: 4px; }

      /* Technical Campaigns table */
      .table__head, .tr { grid-template-columns: 25% 47.5% 28%; font-size: 12px; }
      .th, .td { padding: 6px 8px; font-size: 12px; }
      .table__head .th { font-size: 8px; }
      .mentions { flex-direction: column; align-items: flex-start; gap: 2px; }
      .mention { font-size: 10px; }

      /* Entries */
      .entries { padding: 12px 12px 0px 12px; }

      /* Vehicle Details on mobile */
      .vehicle-details-content {
        flex-direction: column;
        padding: 12px;
      }
      /* The photo on the left, as the text under it (Alin, 2026-10-26). */
      .vehicle-image-container {
        display: flex;
        justify-content: flex-start;
      }
      .vehicle-heading {
        font-size: 24px;
      }
      /* VIN, Model line and Body in one row that wraps where it runs out (Alin,
         2026-10-26, from the decoder card), instead of a two-column grid with the
         VIN alone on its line. */
      .vehicle-specs-top {
        width: 100%;
        gap: 8px 16px;
      }
      .vehicle-specs-top .spec {
        flex: none;
      }
      .vehicle-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
      }
      .spec-icon {
        width: 20px;
        height: 20px;
      }
      .spec-flag-box { width: 20px; height: 20px; }
      .spec-title {
        font-size: 8px;
      }
      .spec-value {
        font-size: 12px;
      }

      /* Entry bullets smaller on mobile */
      .entry-bullet-container { width: 18px; }
    .entry-bullet-outer {
        width: 18px !important;
        height: 18px !important;
      }
      .entry-bullet-inner {
        width: 8px !important;
        height: 8px !important;
      }

      /* Entry header */
      .entry-head { align-items: flex-start; gap: 6px; font-size: 14px; }
      .entry-head__left { font-size: 14px; }
      .entry-head__right { font-size: 14px; align-self: flex-start; }

      /* Positions table. Only three columns now, so the headers no longer need
         the 8px squeeze — and "Status" is short in every language, which is why
         the old ::before hack that hardcoded the English "Service Life" for all
         11 languages could be deleted outright rather than translated. */
      .ph, .pc { padding: 5px 6px; font-size: 10px; }
      .positions__head .ph { font-size: 9px; padding: 4px 6px; }
      .positions--service .positions__head, .positions--service .pos-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 52px;
      }
      .positions--key .positions__head, .positions--key .pos-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      }
      .positions-note { padding: 5px 6px; }
      .pos-item { gap: 4px; }
      .pos-icon { width: 14px; height: 14px; }

      /* Jobs */
      .job-title { font-size: 14px; padding: 6px; }
      .job-row { grid-template-columns: minmax(0, 1fr) 76px; font-size: 12px; }
      .job-bullet { width: 5px; height: 5px; margin-right: 5px; }
      .qty { font-size: 12px; gap: 3px; }

      .production-entry { font-size: 14px;}
      .production-entry .semibold { font-size: 14px;}

      /* Icons */
      .icon-10 { width: 10px; height: 10px; }
      .icon-12 { width: 12px; height: 12px; }
      .icon-14 { width: 14px; height: 14px; }
      .icon-18 { width: 18px; height: 18px; }
      .state svg { width: 12px; height: 12px; }

      /* Hide jobs label on mobile */
      .jobs-label { display: none; }

      /* Pin the panel to the card rather than to the link that opens it, so it
         keeps an even 12px gutter on both sides at any width. Anchored to the
         link it inherited that element's 17px indent, and the gap on the right
         was whatever "100vw minus a guess" happened to leave over. */
      .summary-hero__score { position: relative; }
      .summary-score__built { position: static; }
      .summary-score__panel {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        padding: 10px 12px;
      }
      .summary-score__row { gap: 12px; }

      /* Tighter tooltip on small screens. */
      .chart-tip {
        padding: 4px 8px;
        line-height: 1.25;
      }
      .chart-tip__lead { font-size: 13px; }
      .chart-tip__sub { font-size: 11px; }

      /* Equipment tables on mobile */
      .equipment-section .table__head,
      .equipment-section .tr {
        grid-template-columns: 20% 81%;
      }

      /* Factory Equipment V2: single column on mobile, alternate per card */
      .optionals-grid {
        grid-template-columns: 1fr;
      }
      .optional-card:nth-child(4n+3),
      .optional-card:nth-child(4n) {
        background: transparent;
      }
      .optional-card:nth-child(even) {
        background: rgba(100, 116, 121, 0.03);
        border-right: 0;
      }
      .optional-card {
        border-right: 0;
      }

    } /* closes the last @media block, left open before (the browser closed it at the end of the style element) */

    /* 560 to 768px (Alin, 2026-10-26, from the decoder card): the photo beside the name
       and the three facts, as on desktop, 180px wide; the details in three columns. */
    @media (min-width: 560px) and (max-width: 768px) {
      .vehicle-details-content { flex-direction: row; align-items: center; gap: 16px; }
      .vehicle-image-container { flex: none; }
      .vehicle-image { width: 180px; }
      .vehicle-info-container { min-width: 0; }
      .vehicle-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }