/* ============================================================
   VIN DECODER — page-specific styles
   Extracted from vin-decoder.html inline <style> block
   to use the immutable 1-year cache on returning visits.
   ============================================================ */

html { scroll-behavior: smooth; }

    /* DECODER LAYOUT */
    .decoder-section { padding: var(--sp-7) 0 var(--sp-8); }
    .decoder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); max-width: 1000px; margin: 0 auto; }

    /* INPUT CARD */
    .decoder-card { background: var(--white); border-radius: var(--radius-xl); padding: 36px var(--sp-6); box-shadow: var(--shadow-card); border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    .decoder-card h2 { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--slate); margin-bottom: var(--sp-1half); }
    .decoder-card .decoder-desc { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--card-pad-lg); }

    /* field-group base → tools.css */

    input[type="text"] {
      width: 100%; padding: 14px var(--sp-4); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: var(--fs-md); color: var(--slate); background: var(--white);
      letter-spacing: 0.15em; text-transform: uppercase;
      transition: border-color var(--duration-fast), box-shadow var(--duration-fast); -webkit-appearance: none; appearance: none;
    }
    /* input focus/error → tools.css */

    .vin-char-count { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--sp-1); text-align: right; }
    .vin-char-count.valid { color: var(--success); font-weight: 600; }
    .vin-char-count.invalid { color: var(--danger-deep); }

    /* DECODE BUTTON */
    .btn-decode { width: 100%; background: var(--orange); color: var(--slate); border: none; border-radius: var(--radius-sm); padding: var(--sp-4) 28px; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; cursor: pointer; transition: var(--transition); margin-top: var(--sp-2); }
    .btn-decode:hover { background: var(--orange-dark); transform: translateY(-1px); }
    .btn-decode:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    /* ERROR MESSAGE */
    .decode-error { display: none; background: var(--danger-alpha-10); color: var(--danger-deep); font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-top: var(--sp-3); border-left: 3px solid var(--danger-deep); }
    .decode-error.visible { display: block; }

    /* WHERE TO FIND VIN */
    .vin-locations { margin-top: var(--card-pad-lg); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
    .vin-locations h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--slate); margin-bottom: 14px; }
    .vin-location-list { list-style: none; padding: 0; margin: 0; }
    .vin-location-list li { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); padding-left: var(--sp-5); position: relative; margin-bottom: var(--sp-1half); }
    .vin-location-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--orange-text); font-weight: 700; }

    /* RESULTS PANEL */
    .results-panel { background: var(--white); border-radius: var(--radius-xl); padding: 36px var(--sp-6); box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid var(--border); /* round 9 — safety hairline so card stays visible on white sections */ }
    /* results-placeholder base → tools.css */
    .results-placeholder { padding: 80px 20px; }

    /* VEHICLE HERO */
    .vehicle-hero { text-align: center; margin-bottom: var(--card-pad-lg); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
    .vehicle-year { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-text); margin-bottom: var(--sp-1); }
    .vehicle-name { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2rem); color: var(--slate); line-height: var(--lh-tight); margin-bottom: var(--sp-1); }
    .vehicle-trim { font-size: var(--fs-sm-plus); color: var(--ink-2); }
    .vehicle-type-badge { display: inline-block; background: var(--cream); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin-top: 10px; }

    /* SPECS GRID */
    .specs-section { margin-bottom: var(--sp-5); }
    .specs-section-title { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
    .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .spec-item { background: var(--cream); border-radius: var(--radius-sm); padding: var(--sp-3) 14px; }
    .spec-label { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 2px; }
    .spec-value { font-family: var(--font-heading); font-size: var(--fs-base); color: var(--slate); }
    .spec-value.highlight { color: var(--orange-text); }

    /* SAFETY FEATURES */
    .safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
    .safety-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--slate); padding: var(--sp-2) 10px; border-radius: var(--radius-sm); }
    .safety-item .check { color: var(--success); font-weight: 700; flex-shrink: 0; }
    .safety-item .missing { color: var(--border); flex-shrink: 0; }

    /* RECALLS */
    .recalls-section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
    .recalls-title { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-3); }
    .recalls-title.clear { color: var(--success); }
    .recalls-title.alert { color: var(--danger-deep); }
    .recall-item { background: var(--danger-alpha-10); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); padding: 14px var(--sp-4); margin-bottom: 10px; }
    .recall-item h4 { font-size: var(--fs-sm); font-weight: 700; color: var(--slate); margin-bottom: var(--sp-1); }
    .recall-item p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; margin: 0; }
    .recall-item .recall-date { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--sp-1half); }
    .recalls-clear { display: flex; align-items: center; gap: 10px; padding: 14px var(--sp-4); background: var(--ok-alpha-10); border-left: 3px solid var(--success); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--slate); }
    .recalls-clear .check-icon { color: var(--success); font-size: var(--fs-md); font-weight: 700; }

    /* MANUFACTURING */
    .mfg-note { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; background: var(--cream); border-radius: var(--radius-sm); padding: var(--sp-3) 14px; margin-top: var(--sp-4); }
    .mfg-note strong { color: var(--slate); }

    /* INSIGHT BOX */
    .insight-box { background: var(--slate); border-radius: var(--radius-lg); padding: var(--sp-5) 28px; border-left: 3px solid var(--orange); margin-top: var(--sp-5); }
    .insight-box-label { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); margin-bottom: 10px; }
    .insight-box p { margin: 0; font-size: var(--fs-sm); color: var(--on-dark-default); line-height: var(--lh-relaxed); }
    .insight-box strong { color: var(--white); }

    /* LOADING STATE */
    .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: var(--white); border-radius: var(--radius-circle); animation: spin 0.6s linear infinite; margin-right: var(--sp-2); vertical-align: middle; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* RISK SCORE BADGE (inline next to recalls heading) */
    .risk-badge { display: inline-flex; align-items: center; gap: var(--sp-1half); font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; margin-left: var(--sp-2); }
    .risk-badge-low { background: var(--ok-alpha-10); color: var(--success); }
    .risk-badge-medium { background: var(--warn-tint); color: var(--warn-ink); }
    .risk-badge-high { background: var(--danger-alpha-10); color: var(--danger-deep); }
    .risk-badge-score { font-family: var(--font-heading); font-size: var(--fs-sm); }

    /* RECALL STATS ROW */
    .recall-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0; }
    .recall-stat { text-align: center; padding: var(--sp-3) var(--sp-1half); background: var(--cream); border-radius: var(--radius-sm); }
    .recall-stat-num { font-family: var(--font-heading); font-size: var(--fs-lg); line-height: 1; color: var(--slate); }
    .recall-stat-label { font-size: var(--fs-2xs); color: var(--ink-2); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

    /* SEVERITY BARS */
    .severity-section { margin: var(--sp-4) 0; }
    .severity-section h4 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 10px; }
    .severity-bar-container { margin-bottom: var(--sp-2); }
    .severity-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
    .severity-bar-label { font-size: var(--fs-xs); font-weight: 600; }
    .severity-bar-count { font-size: var(--fs-xs); color: var(--ink-2); }
    .severity-bar-track { height: 7px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; }
    .severity-bar-fill { height: 100%; border-radius: var(--radius-xs); transition: width 0.6s ease; }
    .sev-critical .severity-bar-fill { background: var(--danger); }
    .sev-serious .severity-bar-fill { background: var(--warn); }
    .sev-minor .severity-bar-fill { background: var(--success); }
    .sev-critical .severity-bar-label { color: var(--danger-deep); }
    .sev-serious .severity-bar-label { color: var(--warn); }
    .sev-minor .severity-bar-label { color: var(--success); }

    /* RECALL TIMELINE ITEMS */
    .recall-timeline-item { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3) 14px; margin-bottom: var(--sp-2); }
    .recall-timeline-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-1); }
    .recall-timeline-component { font-size: var(--fs-sm); font-weight: 700; color: var(--slate); }
    .recall-timeline-badge { font-size: var(--fs-2xs); font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; }
    .badge-critical { background: var(--danger-alpha-10); color: var(--danger-deep); }
    .badge-serious { background: var(--warn-tint); color: var(--warn-ink); }
    .badge-minor { background: var(--ok-alpha-10); color: var(--success); }
    .recall-timeline-meta { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--sp-1); }
    .recall-source-tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); margin-right: var(--sp-1half); text-transform: uppercase; letter-spacing: 0.04em; }
    /* Source-of-recall labels — both must stay in the warm palette.
       CA recall = system danger red. US recall = brand orange (still
       distinct from CA, still warm). The previous US color was
       Tailwind blue-700 #1D4ED8 — a cool-palette intrusion. */
    .source-ca { background: var(--danger-alpha-10); color: var(--danger-deep); }
    .source-us { background: var(--accent-alpha-10); color: var(--orange-text); }
    .recall-timeline-desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: var(--lh-base); }

    /* SEVERITY FILTER BUTTONS */
    .recall-filter-bar { display: flex; gap: var(--sp-1half); margin: var(--sp-3) 0 10px; flex-wrap: wrap; }
    .recall-filter-btn { font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--white); color: var(--ink-2); cursor: pointer; transition: var(--transition); font-family: var(--font-body); }
    .recall-filter-btn.active { background: var(--slate); color: var(--white); border-color: var(--slate); }
    .recall-filter-btn:hover:not(.active) { border-color: var(--ink-2); }

    /* SHOW MORE BUTTON */
    .recall-show-more { background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); cursor: pointer; width: 100%; margin-top: var(--sp-1); font-family: var(--font-body); }

    /* CTA trust badges → tools.css */

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .decoder-grid { grid-template-columns: 1fr; }
      .decoder-card, .results-panel { padding: var(--sp-5) var(--sp-4); }
      .specs-grid { grid-template-columns: 1fr; }
      .safety-grid { grid-template-columns: 1fr; }
      .recall-stats { gap: var(--sp-1half); }
      .recall-stat-num { font-size: var(--fs-md); }
      .recall-timeline-header { flex-direction: column; gap: var(--sp-1); }
      .recall-filter-bar { gap: var(--sp-1); }
    }

    /* Nav active state */
    /* Print styles */
    @media print {
      .nav, .mobile-nav, .mobile-cta-bar, .footer, .cta-section, .faq-section,
      #btnDecode, #btnReset, #btnCopyResults, #vinCopied,
      .vin-locations, .btn-primary, .btn,
      .recall-filter-bar, .recall-show-more { display: none !important; }
      body { background: white !important; color: black !important; font-size: 11pt; }
      header { background: white !important; padding: var(--sp-4) 0 !important; }
      header h1 { color: black !important; font-size: 16pt; }
      header p, header .section-label { display: none !important; }
      .results-panel { background: white !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
      .results-content { display: block !important; }
      .vehicle-hero { background: white !important; color: black !important; padding: var(--sp-3) 0 !important; border-bottom: 2px solid var(--orange); }
      .vehicle-year, .vehicle-name, .vehicle-trim { color: black !important; }
      .vehicle-type-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .specs-section { padding: var(--sp-3) 0 !important; }
      .specs-section-title { color: black !important; }
      .spec-item { border-color: #ddd !important; }
      .spec-label { color: #666 !important; }
      .spec-value { color: black !important; }
      .safety-item .check { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .recalls-section { border-color: #ddd !important; }
      .recalls-title { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .recall-item, .recall-timeline-item { break-inside: avoid; }
      .recall-timeline-item { border-color: #ddd !important; }
      .recall-stats { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .severity-bar-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .risk-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .recall-source-tag { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .recall-timeline-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .insight-box { background: #f5f5f5 !important; color: black !important; border-left-color: var(--orange) !important; break-inside: avoid; }
      .insight-box p, .insight-box strong { color: black !important; }
      /* Ontario checklist print */
      div[style*="background:var(--slate)"] { background: #f5f5f5 !important; color: black !important; break-inside: avoid; }
      div[style*="background:var(--slate)"] strong { color: black !important; }
      div[style*="background:var(--slate)"] p { color: #333 !important; }
      div[style*="background:var(--slate)"] a { color: black !important; text-decoration: underline !important; }
      /* Print header */
      .results-panel::before { content: 'Holdback VIN Decoder Report'; display: block; font-family: Georgia, serif; font-size: 14pt; font-weight: 700; text-align: center; padding-bottom: var(--sp-2); border-bottom: 2px solid var(--orange); margin-bottom: var(--sp-4); }
      .results-panel::after { content: 'holdback.ca \2022  Independent automotive advisory \2022  Toronto, Ontario'; display: block; font-size: 9pt; color: #888; text-align: center; padding-top: var(--sp-3); border-top: 1px solid #ddd; margin-top: var(--sp-4); }
    }