/* samplereport.css - load AFTER report.css */
.rp-hero .hero-content{gap:1.25rem}
.rp-meta{display:grid;gap:.5rem;width:100%;max-width:34rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1rem 1.25rem}
.rp-meta div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;border-bottom:1px dashed var(--border);padding-bottom:.4rem}
.rp-meta div:last-child{border:0;padding-bottom:0}
.rp-meta b{color:var(--muted-foreground);font-weight:600}.rp-meta span{font-weight:600;text-align:end}
.rp-val{font-size:1.02rem!important;font-weight:600;color:var(--foreground)!important}
.rp-gap{height:1.5rem}
.rp-fig{margin:0}.rp-fig figcaption{margin-top:.5rem;text-align:center;font-size:.85rem;font-style:italic;color:var(--muted-foreground)}
.rp-photo img{display:block}
.rp-area{margin-bottom:3.5rem}.rp-area:last-child{margin-bottom:0}
.rp-area>.rp-sub-head{padding:1rem 1.25rem;background:var(--card);border:1px solid var(--border);border-left:6px solid var(--primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:1.25rem}
.rp-area .rp-sub-head h3{font-size:1.25rem}
.rp-gh{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.75rem 0 .75rem}
.rp-gh h4{font-size:1.05rem;font-weight:700;color:var(--primary)}
.rp-t{min-width:30rem}.rp-t .n,.rp-t th.n{text-align:end;font-variant-numeric:tabular-nums}
.rp-t tbody tr:nth-child(even){background:var(--muted)}
.rp-sum{list-style:none;padding:0;display:grid;gap:.7rem}
.rp-sum li{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;align-items:start;font-size:.92rem;line-height:1.45;color:var(--muted-foreground)}
.rp-sum strong{color:var(--foreground)}
@media(max-width:420px){.rp-sum li{grid-template-columns:1fr}}
.rp-sev dl+dl{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--border)}
.rp-none{color:var(--g-excellent)!important;font-weight:600;margin:0!important}
.rp-chart text.val{font-size:12px;font-weight:700;fill:var(--foreground)}
.rp-hero .hero-badge-big{font-size:1.9rem}
/* ---------- Hover on a section picture: scale up + show the full image ---------- */
.rp-photo,
.rp-img-wrap {
  transition: scale .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, background-color .35s;
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  /* lift the hovered picture above its neighbours */
  .rp-fig:hover,
  .rp-media:hover { position: relative; z-index: 30; }

  .rp-photo:hover,
  .rp-img-wrap:hover {
    scale: 1.6;                 /* how much it grows: change 1.6 to taste */
    background: #0f1722;        /* dark bars around the full image */
    box-shadow: var(--shadow-xl);
    cursor: zoom-in;
  }

  /* crop (cover) becomes full image (contain) */
  .rp-photo:hover img,
  .rp-img-wrap:hover img { object-fit: contain; }

  /* keep the edge pictures inside the screen while they grow */
  .rp-photos .rp-fig:first-child .rp-photo { transform-origin: left center; }
  .rp-photos .rp-fig:last-child  .rp-photo { transform-origin: right center; }
  .rp-photos .rp-fig:only-child  .rp-photo { transform-origin: center; }
}

/* ============================================================
   RESPONSIVE ADDITIONS — phones & tablets
   (added during reorganization; layout safety only)
   ============================================================ */
@media (max-width: 640px) {
  .rp-meta { padding: .85rem 1rem; }
  .rp-t { min-width: 28rem; }
  .rp-hero .hero-badge-big { font-size: 1.4rem; }
}

/* ============================================================
   FULLSCREEN LIGHTBOX - click a picture to view it fullscreen,
   X button / dark background / Esc to close
   ============================================================ */
.rp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 34, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.rp-lightbox.open { opacity: 1; visibility: visible; }
.rp-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  cursor: default;
}
.rp-lightbox-x {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;   /* right in LTR, left in RTL */
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background-color .2s, transform .2s;
}
.rp-lightbox-x:hover { background: var(--primary-hover); transform: scale(1.08); }
/* ============================================================
   APPEND THIS TO THE END OF css/samplereport.css
   Styles for the 3-part layout: Vehicle Assessment / Recorded History / Scan
   ============================================================ */

/* Jump links land below the sticky header (taller on phones where the nav wraps) */
#vehicle-assessment, #recorded-history, #scan { scroll-margin-top: 6.5rem; }
@media (min-width: 1024px) {
  #vehicle-assessment, #recorded-history, #scan { scroll-margin-top: 5rem; }
}

/* Standalone headings between blocks */
.rp-gh h3 { font-size: 1.35rem; font-weight: 700; color: var(--foreground); }
.rp-split + .rp-gh { margin-top: 2.5rem; }
.rp-foot-top { margin: -.25rem 0 .5rem; }

/* Issues grid: the three severity cards stretch to equal height */
.rp-sevs { align-items: stretch; }

/* Market panel */
.rp-panel .rp-price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.rp-market .rp-note { margin-top: 1.25rem; }

/* Flagged photo (the OBD fault) */
.rp-fig.rp-flag figcaption { color: var(--primary); font-style: normal; font-weight: 700; }
.rp-fig.rp-flag .rp-photo { box-shadow: 0 0 0 3px var(--primary); }

/* Photos: keep captions readable and let touch devices tap to open the lightbox */
.rp-photo img { cursor: zoom-in; }
@media (max-width: 640px) {
  .rp-photos { gap: .75rem; }
  .rp-fig figcaption { font-size: .8rem; }
  .rp-panel .rp-price { font-size: 1.6rem; }
}
/* ============================================================
   Single photo gallery (rows of 3) + request section
   ============================================================ */
#report-index, #photos, #request { scroll-margin-top: 6.5rem; }
@media (min-width: 1024px) {
  #report-index, #photos, #request { scroll-margin-top: 5rem; }
}

/* spacing between the photo rows (each row keeps first/last-child hover logic) */
.rp-photos + .rp-photos { margin-top: 1.5rem; }

/* Request section */
.rp-req {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 6px solid var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.75rem 2rem;
}
.rp-req-text { flex: 1 1 22rem; min-width: 0; }
.rp-req-text h2 { font-size: 1.5rem; font-weight: 700; color: var(--foreground); margin: 0 0 .35rem; }
.rp-req-text p { margin: 0; color: var(--muted-foreground); }
.rp-req-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 640px) {
  .rp-req { padding: 1.25rem; }
  .rp-req-text h2 { font-size: 1.25rem; }
  .rp-req-actions { width: 100%; }
  .rp-req-actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* ============================================================
   Part 1 layout: Overall score + Score by section + Issues list
   ============================================================ */
.rs-cols { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rs-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  min-width: 0;
}
.rs-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}
.rs-title::before {
  content: "";
  width: .4rem;
  height: .4rem;
  background: var(--primary);
  flex: 0 0 auto;
}

/* Overall score card */
.rs-score {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}
.rs-score .rs-title { margin: 0; }
.rs-big {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--g-excellent);   /* was var(--primary) */
  font-variant-numeric: tabular-nums;
}
.rs-big small { font-size: 1.6rem; font-weight: 500; color: var(--muted-foreground); }
.rs-sub { margin: 0; color: var(--muted-foreground); }

/* Pills */
.rs-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border: 1px solid currentColor;
  border-radius: .35rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.rs-good  { color: var(--g-excellent); background: color-mix(in srgb, var(--g-excellent) 10%, transparent); }
.rs-mod   { color: var(--g-bad);       background: color-mix(in srgb, var(--g-bad) 10%, transparent); }
.rs-minor { color: var(--muted-foreground); background: var(--muted); }

/* Score by section card */
.rs-cats { flex: 999 1 28rem; }
.rs-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.rs-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 5.5rem;
  gap: 1rem;
  align-items: center;
}
.rs-lbl { font-size: .95rem; color: var(--foreground); }
.rs-track { height: .6rem; background: var(--muted); border-radius: 999px; overflow: hidden; }
.rs-track i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.rs-val { text-align: end; font-size: .9rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Issues card */
.rs-issues-panel { margin-top: 1.25rem; }
.rs-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rs-issue {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.rs-issue:last-child { border-bottom: 0; padding-bottom: 0; }
.rs-issue .rs-pill { flex: 0 0 auto; min-width: 5.5rem; justify-content: center; }
.rs-issue div { flex: 1 1 18rem; min-width: 0; }
.rs-issue strong { display: block; font-weight: 600; color: var(--foreground); }
.rs-issue span:not(.rs-pill) { font-size: .92rem; color: var(--muted-foreground); }

@media (max-width: 560px) {
  .rs-panel { padding: 1.25rem; }
  .rs-big { font-size: 3.2rem; }
  .rs-row { grid-template-columns: minmax(0, 1fr) 5rem; }
  .rs-row .rs-track { grid-column: 1 / -1; grid-row: 2; }
}
/* ============================================================
   Recorded history + Market in Lebanon cards
   ============================================================ */
.rs-history { margin-top: 1.25rem; }
.rs-facts-panel  { flex: 1 1 24rem; }
.rs-market-panel { flex: 1 1 20rem; display: flex; flex-direction: column; gap: .75rem; }
.rs-market-panel .rs-title { margin-bottom: .5rem; }

/* Label left, value right, divider between rows */
.rs-facts { margin: 0; display: flex; flex-direction: column; }
.rs-facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.rs-facts div:first-child { padding-top: 0; }
.rs-facts div:last-child  { border-bottom: 0; padding-bottom: 0; }
.rs-facts dt { color: var(--muted-foreground); font-size: .95rem; }
.rs-facts dd { margin: 0; font-weight: 700; color: var(--foreground); text-align: end; }
.rs-facts dd.rs-ok { color: var(--g-excellent); }

/* Market card */
.rs-price {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.rs-proj { margin: 0; color: var(--foreground); }
.rs-note {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--muted-foreground);
}

@media (max-width: 560px) {
  .rs-price { font-size: 1.8rem; }
  .rs-facts div { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .rs-facts dd { text-align: start; }
}
/* One shared width for every report section (not hero, nav or footer) */
:root { --rp-width: 62rem; }   /* change this one number: smaller = narrower */

#report-index .section-inner,
#vehicle-assessment .section-inner,
#recorded-history .section-inner,
#scan .section-inner,
#request .section-inner {
  max-width: var(--rp-width);
  margin-inline: auto;
}
/* Top row: title + intro on the left, vehicle card on the right */
.rp-hist-top { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.rp-hist-top .rp-head { margin-bottom: 0; }
.rp-hist-top .rp-meta { max-width: none; }
@media (min-width: 1024px) {
  .rp-hist-top { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: end; }
}

/* Verdict / warning band */
.rp-hist .rp-warn {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  background: var(--primary-soft);
  border-inline-start-color: var(--primary);
}
.rp-hist .rp-warn svg { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--primary); }
.rp-hist .rp-warn h3 { margin-bottom: .25rem; font-size: 1.15rem; font-weight: 700; color: var(--primary-hover); }
.rp-hist .rp-warn p { color: #3d4a5c; }

/* Four figures */
.rp-hist .rp-stats { max-width: none; margin-bottom: 1.5rem; }
.rp-stat .rp-stat-num {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rp-stat .rp-stat-num.bad { color: var(--g-critical); }
.rp-stat-num em { font-style: normal; }
.rp-stat-num .ok { color: var(--g-excellent); }
.rp-stat-num .of { font-size: 1.4rem; color: var(--muted-foreground); }

/* Timeline + coverage */
.rp-hist .rp-split { margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .rp-hist .rp-split { grid-template-columns: 1.9fr 1fr; } }
.rp-ev-list { margin: 0; padding: 0; list-style: none; }
.rp-ev { display: flex; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.rp-ev:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-ev time { flex: 0 0 6.5rem; font-size: .9rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rp-ev span { color: var(--foreground); }
.rp-ev-flag span { color: var(--primary); font-weight: 700; }
.rp-src { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; }
@media (max-width: 420px) { .rp-ev time { flex-basis: 5.6rem; } }

/* Photos: two per row, large */
.rp-hist-photos { margin-bottom: 1.5rem; }
.rp-hist-photos > p { margin-bottom: 1.25rem; }
.rp-photos.rp-photos-2 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.rp-photos-2 + .rp-photos-2 { margin-top: 1.25rem; }
@media (max-width: 640px) {
  .rp-photos.rp-photos-2 { grid-template-columns: 1fr; gap: 1rem; }
  .rp-photos-2 + .rp-photos-2 { margin-top: 1rem; }
  .rp-stat .rp-stat-num { font-size: 1.6rem; }
}

/* Order band */
.rp-order { align-items: center; margin-top: 0; }
.rp-order h3 { font-size: 1.25rem; }
.rp-order p { margin-top: .15rem; font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .78); }
@media (max-width: 640px) { .rp-order .btn { width: 100%; } }
/* Fixed to the viewport: stays in the middle of the right edge while you scroll */
.rp-fab{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:55;
  display:flex;
  flex-direction:row-reverse;   /* button on the edge, menu opens to its left */
  align-items:center;
  gap:.6rem;
  margin:0;
}
.rp-fab-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:.9rem .6rem;
  border:0;
  border-radius:12px 0 0 12px;
  background:var(--primary,#e8590c);
  color:#fff;
  font:700 .85rem/1 inherit;
  font-family:inherit;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 25px -5px rgba(16,24,40,.3);
  transition:background-color .2s;
}
.rp-fab-btn:hover{background:var(--primary-hover,#d9480f)}
.rp-fab-btn:focus-visible{outline:3px solid rgba(232,89,12,.35);outline-offset:2px}
.rp-fab-btn svg{width:1.25rem;height:1.25rem;display:block}
.rp-fab-btn span{writing-mode:vertical-rl}
 
.rp-fab-menu{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:.5rem;
  background:#fff;
  border:1px solid var(--border,#e3e8ef);
  border-radius:.75rem;
  box-shadow:0 10px 25px -5px rgba(16,24,40,.25);
  opacity:0;
  visibility:hidden;
  transform:scale(.94);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.rp-fab.open .rp-fab-menu{opacity:1;visibility:visible;transform:none}
 
.rp-fab-tab{
  display:block;
  padding:.6rem 1rem;
  background:var(--primary-soft,#fff4ec);
  color:var(--primary,#e8590c);
  border-radius:999px;
  font-size:.88rem;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .2s, color .2s;
}
.rp-fab-tab:hover,
.rp-fab-tab.active{background:var(--primary,#e8590c);color:#fff}
 
/* jump targets land below the sticky header */
#vehicle-assessment,#recorded-history{scroll-margin-top:6.5rem}
@media (min-width:1024px){#vehicle-assessment,#recorded-history{scroll-margin-top:5rem}}
/* star on the left of the "Vehicle Assessment" badge */
.rp-letter .rp-star {
  margin-inline-end: .45rem;
  font-size: .95em;
  line-height: 1;
}

/* orange line under the heading text, exactly as wide as the words */
#vehicle-assessment .rp-head h2 > span:last-child {
  position: relative;
  display: inline-block;
}
#vehicle-assessment .rp-head h2 > span:last-child::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -.35rem;
  height: 4px;
  border-radius: 999px;
  background: var(--primary);
}
/* orange line under the heading text, exactly as wide as the words */
#recorded-history .rp-head h2 > span:last-child {
  position: relative;
  display: inline-block;
}
#recorded-history .rp-head h2 > span:last-child::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -.35rem;
  height: 4px;
  border-radius: 999px;
  background: var(--primary);
}