/* Car Check page chrome: Precision identity around the protected navy blueprint.
   Only presentation around the drawings. Loaded after precision.css. */

/* ---------- hero: carbon/graphite, silver type, one red mark, fades into the blueprint grid ---------- */
.ns-root.tool-page .bp-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--hdr-h, 72px);
  background: linear-gradient(180deg, var(--p-carbon) 0%, var(--p-graphite) 58%, #162033 100%) !important;
  color: var(--p-on-dark);
  border-bottom: 1px solid var(--p-rule-dark);
}
.ns-root.tool-page .bp-hero::before { /* blueprint grid emerging toward the canvas */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(207, 232, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 232, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, transparent 15%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 15%, #000 100%);
}
.ns-root.tool-page .bp-hero::after { /* short red rule on the lower edge */
  content: ""; position: absolute; left: 0; bottom: 0; width: min(120px, 30vw); height: 3px; background: var(--p-red);
}
.ns-root.tool-page .bp-hero > div {
  position: relative; z-index: 1;
  max-width: var(--p-wrap); padding: clamp(32px, 5vw, 64px) var(--p-pad) clamp(40px, 5.5vw, 72px);
}
.ns-root.tool-page .bp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: none; padding: 0; border-radius: 0; margin-bottom: 1.1rem;
  color: var(--p-on-dark-2);
  font-family: var(--p-f-mono); font-size: var(--p-t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.ns-root.tool-page .bp-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--p-red-on-dark); flex: none; }
.ns-root.tool-page .bp-h1 {
  font-family: var(--p-f-display); font-weight: 700; text-transform: none;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem); line-height: 1.06; letter-spacing: -0.025em;
  color: #fff; max-width: 16ch; text-wrap: balance;
}
.ns-root.tool-page .bp-lead {
  font-family: var(--p-f-body); font-size: var(--p-t-body); line-height: 1.65;
  color: var(--p-on-dark-2); max-width: 46rem; margin-top: 1.1rem;
}

/* ---------- canvas edge, spacing ---------- */
.bp-tool { box-shadow: 0 1.25rem 0 var(--p-steel); } /* fills the gap above the closing band */
.bp-tool-inner { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1024px) { .bp-tool-inner { padding-left: var(--p-pad); padding-right: var(--p-pad); } }
.bp-label { font-size: var(--p-t-label); letter-spacing: 0.16em; color: var(--p-on-dark-2); }

/* ---------- symptom chips ---------- */
.bp-chips { gap: 0.5rem; }
.bp-chip {
  border-radius: var(--p-radius); padding: 0.5rem 0.95rem; font-size: 0.9rem; line-height: 1.25;
  border-color: rgba(207, 232, 255, 0.35); background: rgba(10, 35, 66, 0.75);
  transition: background-color 200ms var(--p-ease), border-color 200ms var(--p-ease), transform 200ms var(--p-ease);
}
@media (hover: hover) { .bp-chip:hover { border-color: #fff; background: rgba(207, 232, 255, 0.12); } }
.bp-chip[aria-pressed="true"] { background: var(--p-red); border-color: var(--p-red); }
@media (hover: hover) { .bp-chip[aria-pressed="true"]:hover { background: var(--p-red-hover); border-color: var(--p-red-hover); } }
.bp-chip-clear { border-radius: var(--p-radius); }

/* ---------- crumbs, tabs, mode and zoom ---------- */
.bp-crumbs ol { font-size: 0.78rem; }
.bp-crumbs button { min-width: 44px; }
.bp-mode { border-radius: var(--p-radius); padding: 3px; }
.bp-mode-btn { min-height: 44px; border-radius: 3px; }
.bp-mode-btn[aria-pressed="true"] { background: #fff; color: var(--bp-navy); }
.bp-zoom-btn { border-radius: var(--p-radius); min-height: 44px; min-width: 44px; }
.bp-tab { min-height: 44px; border-radius: var(--p-radius); transition: background-color 200ms var(--p-ease), color 200ms var(--p-ease); }
.bp-tab[aria-pressed="true"] { background: #fff; color: var(--bp-navy); border-color: #fff; }
@media (hover: hover) {
  .bp-mode-btn:not([aria-pressed="true"]):hover, .bp-tab:not([aria-pressed="true"]):hover, .bp-zoom-btn:not(:disabled):hover { background: rgba(207, 232, 255, 0.14); }
}
@media (max-width: 479px) {
  .bp-toolbar { gap: 0.6rem; }
  .bp-mode { flex: 1 1 100%; }
  .bp-mode-btn { flex: 1 1 50%; }
  .bp-zoomctl { flex: 1 1 100%; }
  .bp-zoom-btn { flex: 1 1 0; }
}
.bp-hint { font-size: 0.95rem; line-height: 1.55; color: var(--p-on-dark-2); }
.bp-illus-note { color: var(--p-on-dark-2); opacity: 1; }

/* ---------- buttons: match site .btn (small radius, sentence case) ---------- */
.bp-btn {
  border-radius: var(--p-radius); font-family: var(--p-f-body); font-size: 0.9rem; letter-spacing: 0.01em; text-transform: none;
  transition: background-color 250ms var(--p-ease), border-color 250ms var(--p-ease), color 250ms var(--p-ease), transform 200ms var(--p-ease);
}
.bp-btn-red:hover { background: var(--p-red-hover); border-color: var(--p-red-hover); }
.bp-btn-line:hover { background: #fff; border-color: #fff; color: var(--bp-navy); }
.bp-cause-btn { border-radius: var(--p-radius); border-color: rgba(207, 232, 255, 0.55); }
@media (hover: hover) { .bp-cause-btn:hover { background: rgba(207, 232, 255, 0.12); border-color: #fff; } }

/* ---------- panel readability ---------- */
.bp-panel {
  border-radius: var(--p-radius); padding: clamp(1.1rem, 2.5vw, 1.6rem);
  font-family: var(--p-f-body); font-size: 1rem; line-height: 1.65; color: #DCEBFA;
  border-color: rgba(207, 232, 255, 0.3); border-top: 3px solid var(--p-red);
}
.bp-panel p, .bp-panel li { max-width: 62ch; }
.bp-panel p { margin: 0.6rem 0; }
.bp-ptitle { font-family: var(--p-f-display); text-transform: none; font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); line-height: 1.15; }
.bp-sub { font-family: var(--p-f-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--p-on-dark-2); margin-top: 1.3rem; padding-top: 0.9rem; border-top: 1px solid rgba(207, 232, 255, 0.18); }
.bp-kicker { color: var(--p-on-dark-2); }
.bp-list li { margin: 0.25rem 0; }
.bp-note, .bp-check { font-size: 0.95rem; }

/* ---------- parts list ---------- */
/* "Parts list" is an h2 for a correct outline (h1 > h2); it keeps the small mono label look */
.bp-legend .bp-legend-h { text-transform: uppercase; margin: 0 0 0.5rem; line-height: 1.4; font-size: 0.78rem; font-stretch: 100%; font-family: var(--p-f-mono); letter-spacing: 0.16em; font-weight: 500; color: var(--p-on-dark-2); }
.bp-legend h3 { font-family: var(--p-f-mono); font-size: 0.78rem; letter-spacing: 0.16em; font-weight: 500; color: var(--p-on-dark-2); }
.bp-legend-btn { border-radius: var(--p-radius); font-size: 0.9rem; transition: background-color 200ms var(--p-ease), border-color 200ms var(--p-ease), transform 200ms var(--p-ease); }
@media (hover: hover) { .bp-legend-btn:hover { background: rgba(207, 232, 255, 0.12); border-color: rgba(207, 232, 255, 0.7); } }
@media (max-width: 479px) { .bp-legend ol { grid-template-columns: 1fr 1fr; } .bp-legend-btn { padding: 0.35rem 0.5rem; gap: 0.45rem; font-size: 0.85rem; } }

/* ---------- disclaimer ---------- */
.bp-disclaimer { border-radius: var(--p-radius); font-size: 0.9rem; line-height: 1.6; color: var(--p-on-dark-2); max-width: none; }

/* ---------- loading states (before blueprint.js fills these) ---------- */
.bp-chips:empty, #bp-panel:empty, #bp-legend:empty { position: relative; }
.bp-chips:empty { min-height: 44px; }
.bp-chips:empty::before, #bp-panel:empty::before, #bp-legend:empty::before {
  content: "Loading the drawing details"; display: block; padding: 0.7rem 0;
  font-family: var(--p-f-mono); font-size: var(--p-t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-on-dark-2);
  animation: cc-pulse 1.4s ease-in-out infinite;
}
#bp-panel:empty { min-height: 7rem; padding: 1rem 1.25rem; }
#bp-legend:empty::before { content: "Loading parts list"; }
.bp-titleblock:empty { min-height: 0; }
@keyframes cc-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .bp-chips:empty::before, #bp-panel:empty::before, #bp-legend:empty::before { animation: none; }
}

/* ---------- closing band ---------- */
.ns-root.tool-page .bp-cta {
  background: var(--p-carbon); color: var(--p-on-dark); border-top: 3px solid var(--p-red);
  padding: clamp(56px, 8vw, 104px) var(--p-pad);
}
.bp-cta p:first-child { font-family: var(--p-f-mono); letter-spacing: 0.18em !important; font-size: var(--p-t-label) !important; color: var(--p-red-on-dark); opacity: 1; }
.bp-cta h2 { font-family: var(--p-f-display); text-transform: none !important; font-weight: 700; letter-spacing: -0.025em !important; text-wrap: balance; }
.bp-cta p { color: var(--p-on-dark-2); }
.bp-cta a { border-radius: var(--p-radius) !important; min-height: 48px; text-transform: none !important; letter-spacing: 0.01em !important; font-size: 0.95rem !important; font-weight: 600 !important; }
.bp-cta a[href*="app.otokagarage"] { background: var(--p-red); border-color: var(--p-red); }
.bp-cta a[href*="app.otokagarage"]:hover { background: var(--p-red-hover); border-color: var(--p-red-hover); }
.bp-cta a[href*="whatsapp"]:hover { background: #fff; border-color: #fff; color: var(--p-carbon); }
@media (max-width: 479px) { .bp-cta a { flex: 1 1 100%; } }

/* ---------- phones: the 11 problem chips stacked one per row pushed the drawing ~450px down.
   Two rows that scroll sideways keep every chip one swipe away; the cut-off chip at the
   right edge shows there is more. Same buttons, same order, same 44px targets. ---------- */
@media (max-width: 639px) {
  .bp-chips {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start;
    gap: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: 2px 2px 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
    scrollbar-width: thin;
  }
  .bp-chips > * { scroll-snap-align: start; white-space: nowrap; width: auto; max-width: none; }
}