/*
  Estimate Explainer V2 (Visual) — Premium restyle.

  Self-contained document that renders inside:
  - authenticated app pages (dark shell)
  - public share pages (light shell)
  - print / PDF

  Typography: Georgia serif (headings) + DM Sans (body)
  Palette:    garnet / gold / cream / charcoal
*/

/* ── Design tokens ──────────────────────────────────── */

.ee2-doc {
  --garnet: #8B2332;
  --garnet-light: #A8384A;
  --garnet-glow: rgba(139, 35, 50, 0.08);
  --gold: #C4A265;
  --gold-light: #D4B87A;
  --gold-muted: rgba(196, 162, 101, 0.15);
  --charcoal: #1C1C1E;
  --slate: #3A3A3C;
  --warm-gray: #636366;
  --light-gray: #8E8E93;
  --cream: #FAF8F5;
  --warm-white: #FDFCFA;
  --section-alt: #F5F3F0;
  --border: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --radius: 10px;
  --radius-lg: 16px;
}

/* ── Document root ──────────────────────────────────── */

.ee2-doc {
  max-width: 780px;
  margin: 0 auto;
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.72;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.ee2-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Hero header ────────────────────────────────────── */

.ee2-hero {
  background: linear-gradient(168deg, #1C1C1E 0%, #2C1520 40%, #3D1A28 100%);
  color: white;
  padding: 60px 0 50px;
  position: relative;
  overflow: hidden;
}

.ee2-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 35, 50, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.ee2-hero .ee2-container {
  position: relative;
  z-index: 1;
}

.ee2-hero-shop {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.ee2-hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}

.ee2-hero-subtitle {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 36px;
}

.ee2-hero-vehicle-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
}

.ee2-hero-vehicle-card dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.ee2-hero-vehicle-card dd {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px 0;
}

/* ── Sections ───────────────────────────────────────── */

.ee2-section {
  padding: 56px 0;
}

.ee2-section--white {
  background: var(--warm-white);
}

.ee2-section--alt {
  background: var(--section-alt);
}

.ee2-section h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}

.ee2-section h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 12px 0;
}

.ee2-divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 0 0 28px 0;
  border-radius: 1px;
}

.ee2-section p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--slate);
  margin: 0 0 14px 0;
}

.ee2-section p:last-child {
  margin-bottom: 0;
}

/* ── Estimate total card ────────────────────────────── */

.ee2-total-card {
  background: linear-gradient(135deg, #1C1C1E, #2C1520);
  color: white;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  margin: 12px 0 8px;
}

.ee2-total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.ee2-total-amount {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.ee2-total-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Executive Summary ──────────────────────────────── */

.ee2-exec-narrative {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 0;
  padding-bottom: 20px;
}

.ee2-exec-categories {
  counter-reset: repair-cat;
  margin: 0 0 28px;
  padding: 20px 0 0;
}

.ee2-exec-category {
  counter-increment: repair-cat;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(184, 134, 11, 0.18);
}

.ee2-exec-category:first-child {
  padding-top: 0;
}

.ee2-exec-category:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ee2-exec-category::before {
  content: counter(repair-cat, decimal-leading-zero);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  grid-row: 1 / -1;
  line-height: 1;
  padding-top: 1px;
  opacity: 0.8;
}

.ee2-exec-category dt {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--dark);
  line-height: 1.3;
  letter-spacing: -0.01em;
  grid-column: 2;
}

.ee2-exec-category dt::after {
  content: none;
}

.ee2-exec-category dd {
  font-size: 14.5px;
  color: var(--slate);
  line-height: 1.55;
  margin: 3px 0 0;
  grid-column: 2;
}

.ee2-exec-transition {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark, #8B6914);
  margin: 0;
  padding-top: 4px;
}

/* ── Summary bullets ────────────────────────────────── */

.ee2-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.ee2-summary-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--gold);
  font-size: 15.5px;
  color: var(--slate);
  line-height: 1.55;
}

.ee2-bullet-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--gold-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.ee2-bullet-icon::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

/* ── Repair sections ────────────────────────────────── */

.ee2-repair-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

.ee2-repair-section:last-child {
  border-bottom: none;
}

.ee2-repair-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.ee2-repair-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--garnet);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.ee2-repair-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
}

.ee2-repair-image {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin: 20px 0 8px;
  display: block;
}

.ee2-repair-caption {
  font-size: 13px;
  color: var(--light-gray);
  font-style: italic;
  margin-bottom: 20px;
  padding-left: 4px;
}

.ee2-repair-text p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--slate);
  margin: 0 0 14px 0;
}

.ee2-repair-text p:last-child {
  margin-bottom: 0;
}

/* Text-only repair cards (no image) */

.ee2-text-only-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 48px 0 12px;
}

.ee2-text-only-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold) 30%,
    var(--gold) 70%,
    transparent
  );
  opacity: 0.45;
}

.ee2-text-only-divider-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}


.ee2-text-only-grid {
  display: grid;
  gap: 16px;
}

.ee2-text-only-card {
  background: white;
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--garnet-light);
}

.ee2-text-only-card h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 6px 0;
}

.ee2-text-only-card p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 8px 0;
  color: var(--slate);
}

.ee2-text-only-card p:last-child {
  margin-bottom: 0;
}

/* ── OEM badges ─────────────────────────────────────── */

.ee2-oem-badge-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ee2-oem-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  box-shadow: var(--shadow-sm);
}

.ee2-oem-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Steps / timeline ───────────────────────────────── */

.ee2-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.ee2-steps-list li {
  counter-increment: step;
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.ee2-steps-list li:last-child {
  border-bottom: none;
}

.ee2-steps-list li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--garnet);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.ee2-step-content strong {
  display: block;
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 2px;
}

.ee2-step-content span {
  font-size: 14.5px;
  color: var(--warm-gray);
  line-height: 1.55;
}

/* ── Commitment / arrow list ────────────────────────── */

.ee2-commitment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ee2-commitment-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  color: var(--slate);
  line-height: 1.55;
}

.ee2-commitment-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--gold-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}

/* ── Script / callout block ─────────────────────────── */

.ee2-script-block {
  background: var(--garnet-glow);
  border-left: 4px solid var(--garnet);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 28px;
  margin: 20px 0;
}

.ee2-script-block p {
  font-style: italic;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 10px 0;
}

.ee2-script-block p:last-child {
  margin-bottom: 0;
}

.ee2-script-intro {
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 12px;
  font-style: normal !important;
}

/* ── Rights / check list ────────────────────────────── */

.ee2-rights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.ee2-rights-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  color: var(--slate);
  line-height: 1.6;
}

.ee2-rights-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--gold-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}

/* ── Pushback / disputed list ───────────────────────── */

.ee2-pushback-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.ee2-pushback-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--garnet);
  font-size: 15px;
  color: var(--slate);
  line-height: 1.55;
}

/* ── Zoomable images (click to open modal) ──────────── */

.ee2-zoomable {
  cursor: zoom-in;
  transition: box-shadow 0.15s ease;
}

.ee2-zoomable:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Image skeleton loader ──────────────────────────── */

.ee2-img-skeleton {
  position: relative;
  min-height: 200px;
  background: #f1f5f9;
  overflow: hidden;
}

.ee2-visual-edit-shell,
.ee2-inline-infographic,
.ee2-infographic-item {
  position: relative;
}

.ee2-hide-image-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  /* Visible from the first look, not on hover.
     These controls were hover-reveal, which on a document a shop scrolls through
     once meant a shop person had to sweep a picture with the mouse to learn the
     controls existed at all - and never did (one report across 3,733 documents).
     Half-opacity keeps them quiet enough not to read as part of the customer's
     document while still announcing themselves; hover and keyboard focus bring
     them to full.

     Neither can reach a customer, but by DIFFERENT guards, and a future change
     must not assume they are the same one: the flag control renders only for a
     reader the app recognises as shop staff (`renderer.moderator?`), while this
     button is gated on `renderer.editable?` - a SURFACE test, true only on the
     in-app document preview and never on the public share page, the emailed copy
     or the print render. */
  opacity: 0.55;
  padding: 8px 10px;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ee2-hide-image-button:hover,
.ee2-hide-image-button:focus-visible {
  background: rgba(234, 88, 12, 0.95);
  outline: none;
  opacity: 1;
  transform: translateY(-1px);
}

.ee2-img-skeleton:hover > .ee2-hide-image-button,
.ee2-inline-infographic:hover > .ee2-hide-image-button,
.ee2-infographic-item:hover > .ee2-hide-image-button,
.ee2-hide-image-button:focus-visible {
  opacity: 1;
}

/* Shimmer sweep */
.ee2-img-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  animation: ee2-shimmer 1.5s infinite;
  z-index: 1;
}

/* Centered icon + label */
.ee2-img-skeleton::after {
  content: "Loading image\2026";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #94a3b8;
  animation: ee2-pulse 2s ease-in-out infinite;
}

.ee2-img-skeleton.ee2-img-loaded {
  min-height: 0;
  background: none;
}

.ee2-img-skeleton.ee2-img-loaded::before,
.ee2-img-skeleton.ee2-img-loaded::after {
  display: none;
}

.ee2-img-skeleton > img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ee2-img-skeleton.ee2-img-loaded > img {
  opacity: 1;
}

@keyframes ee2-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes ee2-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.ee2-img-skeleton--repair {
  border-radius: var(--radius);
  margin: 20px 0 8px;
}

.ee2-img-skeleton--repair > img {
  margin: 0;
}

/* ── Inline infographic (within a section) ──────────── */

.ee2-inline-infographic {
  margin: 28px 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: white;
}

.ee2-inline-infographic img {
  width: 100%;
  display: block;
}

.ee2-inline-infographic figcaption {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* ── Infographic grid ───────────────────────────────── */

.ee2-infographic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.ee2-infographic-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: white;
}

.ee2-infographic-item img {
  width: 100%;
  display: block;
}

.ee2-infographic-item figcaption {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ── Footer ─────────────────────────────────────────── */

.ee2-footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 40px 24px;
  font-size: 14px;
  line-height: 1.7;
}

.ee2-footer strong {
  color: white;
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.ee2-footer-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 16px;
}

/* ── Legal colophon (footer fine print) ─────────────── */

/* Legal copy the customer is expected to actually read: kept above the WCAG AA
   contrast floor (4.5:1 for text under 18.66px) against the charcoal footer —
   deliberately more legible than the surrounding footer meta. */
.ee2-legal {
  max-width: 560px;
  margin: 22px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.68);
  text-align: left;
}

.ee2-legal p {
  margin: 0 0 11px;
}

.ee2-legal p:last-child {
  margin: 0;
}

/* Spacing intentionally omitted: the policy row is a plain `.ee2-legal p`, so it
   inherits the colophon's paragraph rhythm (11px from the preceding paragraph's
   margin-bottom, and `p:last-child` zeroes its own trailing margin). A margin
   declared here would be dead — `.ee2-legal p:last-child` outranks it. */

/* Links must clear the same 4.5:1 contrast floor as the colophon body text and
   stay visibly link-like against the charcoal footer. */
.ee2-legal-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ee2-legal-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

/* ── Included-with list (conclusion) ────────────────── */

.ee2-included-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: grid;
  gap: 8px;
}

.ee2-included-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--slate);
}

.ee2-included-list li::before {
  content: '\2713';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--gold-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
}

/* ── Conclusion centered text ───────────────────────── */

.ee2-conclusion-text {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.ee2-conclusion-text p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--slate);
}

/* ── Footnote ───────────────────────────────────────── */

.ee2-footnote {
  font-size: 13px;
  color: var(--light-gray);
  line-height: 1.5;
  text-align: center;
  margin-top: 20px;
}

/* ── Responsive (mobile) ────────────────────────────── */

@media (max-width: 640px) {
  .ee2-doc {
    border-radius: 0;
    font-size: 16px;
  }

  .ee2-hero {
    padding: 40px 0 36px;
  }

  .ee2-hero-title {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }

  .ee2-hero-vehicle-card {
    grid-template-columns: 1fr;
    gap: 10px 0;
    padding: 18px 20px;
  }

  .ee2-section {
    padding: 40px 0;
  }

  .ee2-container {
    padding: 0 18px;
  }

  .ee2-repair-section {
    padding: 36px 0;
  }

  .ee2-repair-header {
    flex-wrap: wrap;
  }

  .ee2-total-card {
    padding: 28px 24px;
  }

  .ee2-infographic-grid {
    grid-template-columns: 1fr;
  }

  .ee2-summary-list li,
  .ee2-pushback-list li {
    padding: 12px 14px;
    font-size: 14.5px;
  }

  .ee2-exec-category {
    grid-template-columns: 36px 1fr;
    gap: 0 12px;
  }

  .ee2-exec-category::before {
    font-size: 22px;
  }

  .ee2-script-block {
    padding: 18px 20px;
  }

  .ee2-oem-badge-row {
    gap: 8px;
  }

  .ee2-oem-badge {
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* ── Print ──────────────────────────────────────────── */

@page {
  size: letter;
  margin: 0.5in 0.6in;

  @bottom-center {
    content: counter(page) " of " counter(pages);
    font-family: 'DM Sans', sans-serif;
    font-size: 8pt;
    color: #8E8E93;
  }
}

@media print {
  /* ── Skeleton loader: disable in print ───────────── */
  .ee2-img-skeleton { min-height: 0; background: none; }
  .ee2-img-skeleton::before, .ee2-img-skeleton::after { display: none; }
  .ee2-img-skeleton > img { opacity: 1; }

  /* ── Global print reset ──────────────────────────── */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .ee2-doc {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10pt;
    line-height: 1.6;
    background: white;
    overflow: visible;
  }

  .ee2-container {
    max-width: none;
    padding: 0;
  }

  /* ── Public share page wrapper — strip in print ──── */
  .ee2-public-wrapper {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Tailwind's space-y-4 adds margin between children */
  .ee2-public-wrapper > * + * {
    margin-top: 0 !important;
  }

  /* ── Orphans / widows — prevent lone lines ───────── */
  p, li, dd, dt {
    orphans: 3;
    widows: 3;
  }

  /* ── Hero — compact for print ────────────────────── */
  .ee2-hero {
    background: #1C1C1E !important;
    padding: 28px 0 24px;
  }

  .ee2-hero::after {
    display: none; /* remove decorative gradient orb */
  }

  .ee2-hero-shop {
    font-size: 9pt;
    letter-spacing: 2px;
    margin-bottom: 4px;
  }

  .ee2-hero-title {
    font-size: 22pt;
    margin-bottom: 4px;
  }

  .ee2-hero-subtitle {
    font-size: 10pt;
    margin-bottom: 20px;
  }

  .ee2-hero-vehicle-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 16px 20px;
    gap: 8px 28px;
  }

  .ee2-hero-vehicle-card dt {
    font-size: 7pt;
  }

  .ee2-hero-vehicle-card dd {
    font-size: 10pt;
  }

  /* ── Sections — tighter vertical rhythm ──────────── */
  .ee2-section {
    padding: 14px 0;
  }

  .ee2-section--alt {
    background: #F7F5F2 !important;
  }

  .ee2-section h2 {
    font-size: 15pt;
    margin-bottom: 4px;
    page-break-after: avoid;
    break-after: avoid;
  }

  .ee2-section h3 {
    font-size: 10.5pt;
    margin-bottom: 6px;
    page-break-after: avoid;
    break-after: avoid;
  }

  .ee2-divider {
    margin-bottom: 10px;
    page-break-after: avoid;
    break-after: avoid;
  }

  .ee2-section p {
    font-size: 10pt;
    line-height: 1.5;
    margin-bottom: 6px;
  }

  /* ── Executive Summary ───────────────────────────── */
  .ee2-exec-narrative {
    font-size: 10pt;
    line-height: 1.5;
    padding-bottom: 8px;
  }

  .ee2-exec-categories {
    margin-bottom: 10px;
    padding-top: 8px;
  }

  .ee2-exec-category {
    padding: 6px 0;
    grid-template-columns: 30px 1fr;
    gap: 0 10px;
    border-bottom-color: #ddd;
  }

  .ee2-exec-category::before {
    font-size: 17pt;
  }

  .ee2-exec-category dt {
    font-size: 10pt;
  }

  .ee2-exec-category dd {
    font-size: 9pt;
    line-height: 1.4;
  }

  .ee2-exec-transition {
    font-size: 9.5pt;
  }

  /* ── Estimate total card ─────────────────────────── */
  .ee2-total-card {
    padding: 18px 24px;
    margin: 6px 0 4px;
    border-radius: 10px;
  }

  .ee2-total-label {
    font-size: 8pt;
    margin-bottom: 3px;
  }

  .ee2-total-amount {
    font-size: 24pt;
    margin-bottom: 4px;
  }

  .ee2-total-note {
    font-size: 8.5pt;
    line-height: 1.4;
  }

  /* ── Repair sections — ALLOW page breaks inside ──── */
  .ee2-repair-section {
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
    page-break-inside: auto;
    break-inside: auto;
  }

  .ee2-repair-section:last-child {
    border-bottom: none;
  }

  /* Keep header + first paragraph together */
  .ee2-repair-header {
    margin-bottom: 8px;
    page-break-after: avoid;
    break-after: avoid;
  }

  .ee2-repair-number {
    width: 28px;
    height: 28px;
    font-size: 11pt;
    background: var(--garnet) !important;
  }

  .ee2-repair-title {
    font-size: 13pt;
  }

  .ee2-repair-image {
    box-shadow: none;
    border: 1px solid #ddd;
    margin: 8px 0 4px;
    max-height: 3.2in;
    width: auto;
    object-fit: contain;
  }

  .ee2-repair-caption {
    font-size: 8pt;
    margin-bottom: 8px;
  }

  .ee2-repair-text p {
    font-size: 10pt;
    line-height: 1.5;
    margin-bottom: 5px;
  }

  /* ── Text-only repair cards ──────────────────────── */
  .ee2-text-only-divider {
    margin: 14px 0 6px;
  }

  .ee2-text-only-divider-label {
    font-size: 9pt;
    letter-spacing: 1.5px;
  }

  .ee2-text-only-grid {
    gap: 6px;
  }

  .ee2-text-only-card {
    padding: 10px 14px;
    box-shadow: none;
    border: 1px solid #eee;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ee2-text-only-card h4 {
    font-size: 10pt;
    margin-bottom: 2px;
  }

  .ee2-text-only-card p {
    font-size: 9pt;
    line-height: 1.45;
    margin-bottom: 3px;
  }

  /* ── OEM badges ──────────────────────────────────── */
  .ee2-oem-badge-row {
    margin-bottom: 10px;
    gap: 5px;
  }

  .ee2-oem-badge {
    padding: 3px 10px;
    font-size: 8pt;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .ee2-oem-badge-dot {
    width: 6px;
    height: 6px;
  }

  /* ── Steps / timeline ────────────────────────────── */
  .ee2-steps-list li {
    padding: 8px 0;
    gap: 10px;
  }

  .ee2-steps-list li::before {
    width: 24px;
    height: 24px;
    font-size: 9pt;
    background: var(--garnet) !important;
  }

  .ee2-step-content strong {
    font-size: 10pt;
  }

  .ee2-step-content span {
    font-size: 9.5pt;
    line-height: 1.4;
  }

  /* ── Commitment list ─────────────────────────────── */
  .ee2-commitment-list {
    gap: 4px;
  }

  .ee2-commitment-list li {
    font-size: 9.5pt;
    gap: 8px;
  }

  .ee2-commitment-icon {
    width: 18px;
    height: 18px;
    font-size: 9pt;
  }

  /* ── Script / callout block ──────────────────────── */
  .ee2-script-block {
    padding: 12px 16px;
    margin: 10px 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ee2-script-block p {
    font-size: 9.5pt;
    line-height: 1.45;
  }

  .ee2-script-intro {
    font-size: 9.5pt;
    margin-bottom: 4px;
  }

  /* ── Rights list ─────────────────────────────────── */
  .ee2-rights-list {
    gap: 6px;
  }

  .ee2-rights-list li {
    font-size: 9.5pt;
    line-height: 1.45;
  }

  .ee2-rights-check {
    width: 18px;
    height: 18px;
    font-size: 9pt;
  }

  /* ── Pushback list ───────────────────────────────── */
  .ee2-pushback-list {
    gap: 4px;
  }

  .ee2-pushback-list li {
    padding: 8px 12px;
    font-size: 9.5pt;
    box-shadow: none;
    border: 1px solid #eee;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ── Summary bullets ─────────────────────────────── */
  .ee2-summary-list {
    gap: 5px;
  }

  .ee2-summary-list li {
    padding: 8px 12px;
    font-size: 9.5pt;
    box-shadow: none;
    border: 1px solid #eee;
  }

  /* ── Inline infographics ─────────────────────────── */
  /* KEY FIX: Cap infographic heights to prevent them
     from being too tall to fit on remaining page space,
     which causes massive blank gaps when they jump to
     the next page. */
  .ee2-inline-infographic {
    box-shadow: none;
    border: 1px solid #ddd;
    margin: 10px 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ee2-inline-infographic img {
    max-height: 3.5in;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .ee2-inline-infographic figcaption {
    font-size: 8pt;
    padding: 6px 12px;
  }

  /* ── Infographic grid ────────────────────────────── */
  .ee2-infographic-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .ee2-infographic-item {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ee2-infographic-item img {
    max-height: 3.2in;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .ee2-infographic-item figcaption {
    font-size: 7.5pt;
    padding: 6px 10px;
  }

  /* ── Conclusion ──────────────────────────────────── */
  .ee2-conclusion-text p {
    font-size: 10pt;
  }

  .ee2-footnote {
    font-size: 8pt;
    margin-top: 10px;
  }

  /* ── Included list ───────────────────────────────── */
  .ee2-included-list li {
    font-size: 9pt;
  }

  .ee2-included-list li::before {
    width: 16px;
    height: 16px;
    font-size: 8pt;
  }

  /* ── Footer ──────────────────────────────────────── */
  .ee2-footer {
    background: #1C1C1E !important;
    padding: 16px 20px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ee2-footer strong {
    font-size: 10pt;
  }

  .ee2-footer-meta {
    font-size: 8pt;
    margin-top: 6px;
  }

  /* ── Legal colophon ──────────────────────────────── */
  /* 8pt is the conventional floor for printed legal fine print — do not shrink
     this to buy vertical space. (The secure-link notice is dropped in print via
     the `no-print` utility below: paper has no link to forward.) */
  .ee2-legal {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 8pt;
    line-height: 1.5;
    break-inside: auto;
    page-break-inside: auto;
  }

  .ee2-legal p {
    margin: 0 0 6px;
  }

  .ee2-legal-label {
    font-size: 7pt;
    margin-bottom: 5px;
  }

  /* Paper cannot follow a hyperlink, so print the destination. Without this the
     policy row prints as four dead words and the reader has no way to reach the
     terms the document points at. */
  .ee2-legal-links a {
    text-decoration: none;
  }

  .ee2-legal-links a::after {
    content: " (" attr(href) ")";
    word-break: break-all;
  }

  /* The support link sits in the same row but is a mailto:, so the generic
     expansion above would print "(mailto:support@…)". Print the bare address
     instead. Higher specificity than the rule above (two classes), so it wins
     regardless of source order. */
  .ee2-legal-links a.ee2-legal-support::after {
    content: " (" attr(data-print-address) ")";
  }

  /* ── Utility ─────────────────────────────────────── */
  .no-print {
    display: none !important;
  }
}

/* ── Staff-only image flag control ──────────────────────────────────────────
   Shown only to a shop user whose browser has been recognised (see
   ExplainerModeration); a customer's copy of this document never contains it.

   Deliberately neutral slate with emerald/red active states rather than the app's
   brand orange: this is staff chrome sitting on top of a customer-facing
   document, and orange would read as part of the document's own design. Colours
   follow the app status palette — emerald for good, red for a problem.

   Same resting visibility as .ee2-hide-image-button so the two controls behave
   the same way on the same image; positioned bottom-right so they never
   collide. */
/* Spans the whole picture, and is only a positioning FRAME — it paints nothing
   and takes no clicks itself.

   It used to be a small box pinned at bottom-right, which made it the
   containing block for the reason panel below it. Every host that renders this
   control clips its overflow (`.ee2-img-skeleton`, `.ee2-inline-infographic`
   and `.ee2-infographic-item` all set `overflow: hidden` for the rounded image
   corners), so a panel hung underneath a control sitting 10px off the bottom
   edge had 4px of itself inside the picture and the rest cut off — measured at
   4px of 199px on all six render sites. Anchoring the frame to the picture
   instead lets the panel be positioned against the picture's own box, so it can
   be kept inside the clip at any image height.

   `pointer-events: none` matters: the frame now covers the image, and the image
   is click-to-zoom. Only the button and the panel take pointer events. */
.ee2-flag-control {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* Same resting visibility as .ee2-hide-image-button - see the note there. The
     two controls sit on the same picture and must not disagree about whether a
     shop can see them. */
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.ee2-img-skeleton:hover > .ee2-flag-control,
.ee2-inline-infographic:hover > .ee2-flag-control,
.ee2-infographic-item:hover > .ee2-flag-control,
.ee2-flag-control:focus-within,
.ee2-flag-control[data-ee2-flagged] {
  opacity: 1;
}

/* Bottom-right of the picture, exactly where it has always sat — the frame
   above changed, the button's place on screen did not. */
.ee2-flag-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  pointer-events: auto;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ee2-flag-button:hover,
.ee2-flag-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

/* Red only once it is actually reported, or on hover as a preview of what the
   press will do. Idle it stays neutral — a red button sitting on every picture
   would read as "something is wrong here" to a shop that has reported nothing. */
.ee2-flag-button:hover,
.ee2-flag-button[aria-pressed="true"] {
  background: rgba(220, 38, 38, 0.95);
}

/* A phone has no hover, so a hover-reveal control is invisible AND still
   clickable — a staff member would either never find it or trip it while tapping
   the image to zoom. Since this feature is explicitly seeded per browser (phones
   included), always show it where a fine pointer does not exist. */
@media (hover: none), (pointer: coarse) {
  .ee2-flag-control { opacity: 1; }
}

/* The dock holds the question AND the status line, and is the thing anchored to
   the picture. The panel inside it opens and closes; the dock does not, so a
   message written after a failed Send is still on screen when the question it
   belonged to has been taken away.

   It sits ON the picture, stacked upward from just above the report button, and
   is capped to the picture's own height. Every host clips its overflow
   (`.ee2-img-skeleton`, `.ee2-inline-infographic`, `.ee2-infographic-item` all
   set `overflow: hidden` for the rounded image corners), so anything hanging
   below the button is cut off and anything taller than the picture is cut off at
   the top. `max-height` plus `overflow-y: auto` means a short picture scrolls
   instead of truncating, at any image height, with no JavaScript. The reserved
   46px is the button (30px) plus its 10px offset plus a 6px gap. */
.ee2-flag-reason-dock {
  position: absolute;
  right: 10px;
  bottom: 46px;
  /* border-box, or `max-height` would cap only the CONTENT and the padding plus
     border would push the dock back out through the top of the picture. */
  box-sizing: border-box;
  max-height: calc(100% - 56px);
  pointer-events: auto;
  z-index: 6;
  width: 280px;
  max-width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The question itself. Positioning and containment belong to the dock above.

   THIS is the scroll container, not the dock, and it is anchored at its natural
   top — a scroll container whose content is justified to the end (`flex-end`)
   overflows out of its START edge, where `scrollTop` cannot reach it. On a 200px
   picture that left the panel's title and first chips permanently unreachable.
   Scrolling the panel instead also keeps the status line, which is the dock's
   other child, on screen at all times rather than pushed below the fold. */
.ee2-flag-reason {
  overflow-y: auto;
  /* A flex item will not shrink below its content height without this, so the
     panel would push the dock past its cap instead of scrolling. */
  min-height: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  font-family: 'DM Sans', system-ui, sans-serif;
  text-align: left;
}

.ee2-flag-reason[hidden] { display: none; }

.ee2-flag-reason-title {
  display: block;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ee2-flag-reason-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.ee2-flag-reason-code {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 6px 9px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ee2-flag-reason-code:hover { background: rgba(255, 255, 255, 0.14); }

/* Chosen, not "bad". Emerald because the shop answering us is a good outcome —
   red here would read as a second complaint. */
.ee2-flag-reason-code[aria-pressed="true"] {
  background: rgba(5, 150, 105, 0.92);
  border-color: rgba(5, 150, 105, 0.92);
}

.ee2-flag-reason-note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
}

.ee2-flag-reason-note::placeholder { color: rgba(255, 255, 255, 0.55); }

/* The deliberate submission. Sits under the note, full width, so it reads as
   the end of the little form rather than as another chip. Emerald to match the
   chosen-chip colour: the shop answering us is a good outcome, and orange here
   would compete with the report button it belongs to. */
.ee2-flag-reason-send {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(5, 150, 105, 0.92);
  border-radius: 6px;
  background: rgba(5, 150, 105, 0.92);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.ee2-flag-reason-send:hover:not(:disabled) { background: rgba(4, 120, 87, 0.95); }

/* In flight. Dimmed and unclickable, so a second press cannot start a second
   write while the first is still deciding what the answer is. */
.ee2-flag-reason-send:disabled {
  cursor: default;
  opacity: 0.6;
}

.ee2-flag-reason-state {
  /* Its own surface: it has to be readable sitting directly on the picture with
     the panel closed, not just inside the panel's dark box. Empty means silent —
     without this every reported picture would carry a blank pill. */
  display: block;
  box-sizing: border-box;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  padding: 6px 8px;
  text-align: left;
}

.ee2-flag-reason-state:empty { display: none; }

/* "Replace image" — sits beside Hide image, same resting visibility, so the two
   shop controls on one picture behave alike. Left of centre-top so it never
   collides with Hide (top-right) or the report control (bottom-right). */
.ee2-replace-image-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.55;
  padding: 8px 10px;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ee2-img-skeleton:hover > .ee2-replace-image-button,
.ee2-inline-infographic:hover > .ee2-replace-image-button,
.ee2-infographic-item:hover > .ee2-replace-image-button,
.ee2-replace-image-button:focus-visible {
  opacity: 1;
}

.ee2-replace-image-button:hover,
.ee2-replace-image-button:focus-visible {
  background: rgba(234, 88, 12, 0.95);
  outline: none;
  transform: translateY(-1px);
}

/* A picture the shop chose. Stays legible at rest so they can see at a glance
   which images are theirs and which are ours. */
.ee2-replace-image-button--on {
  background: rgba(5, 150, 105, 0.92);
  opacity: 0.9;
}

@media (hover: none), (pointer: coarse) {
  .ee2-replace-image-button { opacity: 1; }
}

/* Never print or PDF the shop controls, whatever surface renders this CSS.
   Both are listed: they used to be invisible at rest, so print inherited a
   hidden control for free. Now that they rest at half opacity, print has to say
   so itself or a PDF of the document would carry a Hide image button. */
@media print {
  .ee2-flag-control,
  .ee2-flag-reason-dock,
  .ee2-flag-reason,
  .ee2-replace-image-button,
  .ee2-hide-image-button { display: none !important; }
}

/* In flight: dimmed so a slow or failed save never reads as a recorded verdict.
   Dims the BUTTON, not the container, so the cue survives the container being at
   0.55 at rest and at 1 while hovered. 0.4 rather than the old 0.55 because the
   resting container is no longer transparent: at 0.55 a pending button would
   have composited to the same value an idle control shows, and the two states
   have to look different. Pressing requires hover or touch, so the state a
   reader actually sees this in is the container-at-1 one. */
.ee2-flag-control[data-ee2-flag-pending] .ee2-flag-button {
  opacity: 0.4;
  cursor: progress;
}