/* ============================================================
   Sobremesa buying report — standalone stylesheet (Option C)
   Modern ledger in the Sobremesa brand palette.

   This file is intentionally self-contained. It does NOT depend
   on, import, or extend the main application's CSS, design tokens,
   or component library. Everything the report needs lives here.
   All selectors are scoped under .sbm-report and prefixed `sbm-`
   so report styles can't leak out and app styles can't leak in.
   ============================================================ */

.sbm-report {
  /* ---- palette (Option C) ---- */
  --sbm-bg: #F4EBDD;            /* warm cream page */
  --sbm-surface: #FBF6EC;       /* raised panel */
  --sbm-ink: #2E241C;           /* primary text + strong rule */
  --sbm-ink-soft: #6B5446;      /* secondary text */
  --sbm-muted: #6E5E48;         /* labels / tertiary (AA on cream) */
  --sbm-terracotta: #C25A36;    /* accent — figures, large only */
  --sbm-terracotta-deep: #9B3F22; /* accent text at small sizes (AA) */
  --sbm-terracotta-tint: #EAD7C9; /* pill background */
  --sbm-olive: #5F5F33;         /* secondary accent (positive deltas) */
  --sbm-rule: #DBCBB4;          /* hairline */

  /* ---- type ---- */
  --sbm-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sbm-font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sbm-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sbm-caption: 0.6875rem; /* 11px */
  --sbm-micro: 0.75rem;     /* 12px */
  --sbm-label: 0.8125rem;   /* 13px */
  --sbm-body: 0.9375rem;    /* 15px */
  --sbm-h: 1.25rem;         /* 20px */
  --sbm-figure: clamp(2.5rem, 7vw, 3.5rem);  /* hero figure */
  --sbm-figure-sm: 1.5rem;  /* stat-cell figure */

  /* ---- layout ---- */
  --sbm-measure: 46rem;
  --sbm-radius: 12px;
  --sbm-radius-sm: 8px;

  background: var(--sbm-bg);
  color: var(--sbm-ink);
  font-family: var(--sbm-font-text);
  font-size: var(--sbm-body);
  line-height: 1.6;
  color-scheme: only light; /* never auto-invert this customer-facing artifact */
  -webkit-font-smoothing: antialiased;
  /* keep brand fills (bars, pills, sparkline) when printing to PDF */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* lining + tabular figures everywhere a number is displayed */
.sbm-report,
.sbm-hero__figure,
.sbm-stat__num,
.sbm-table {
  font-variant-numeric: tabular-nums lining-nums;
}

.sbm-report__inner {
  max-width: var(--sbm-measure);
  margin: 0 auto;
  padding: 2rem 1.75rem 2.5rem;
}

/* ---- masthead ---- */
.sbm-masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.sbm-wordmark {
  font-family: var(--sbm-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.sbm-masthead__logo { height: 30px; width: auto; display: block; }
.sbm-eyebrow {
  font-size: var(--sbm-micro);
  color: var(--sbm-muted);
  margin: 0.25rem 0 0;
}
.sbm-account {
  text-align: right;
  font-size: var(--sbm-label);
  color: var(--sbm-ink-soft);
}
.sbm-account strong { font-weight: 500; color: var(--sbm-ink); }

/* ---- rules ---- */
.sbm-rule { border: 0; border-top: 1px solid var(--sbm-rule); margin: 1.1rem 0; }
.sbm-rule--strong { border-top: 2px solid var(--sbm-ink); }

/* ---- hero figure ---- */
.sbm-hero { margin-top: 1.5rem; }
.sbm-hero__figure {
  font-family: var(--sbm-font-display);
  font-weight: 500;
  font-size: var(--sbm-figure);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}
.sbm-hero__label { font-size: var(--sbm-label); color: var(--sbm-ink-soft); margin: 0.5rem 0 0; }

/* ---- stat grid ---- */
.sbm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.sbm-stat__num {
  font-family: var(--sbm-font-display);
  font-weight: 500;
  font-size: var(--sbm-figure-sm);
  line-height: 1;
  margin: 0;
}
.sbm-stat__num--accent { color: var(--sbm-terracotta); }
.sbm-stat__label { font-size: var(--sbm-micro); color: var(--sbm-muted); margin: 0.35rem 0 0; }

/* ---- sections ---- */
.sbm-section { margin-top: 1.85rem; padding-top: 1.5rem; border-top: 1px solid var(--sbm-rule); }
.sbm-section__eyebrow {
  font-size: var(--sbm-micro);
  letter-spacing: 0.08em;
  color: var(--sbm-terracotta-deep);
  margin: 0 0 0.4rem;
}
.sbm-section__title {
  font-family: var(--sbm-font-display);
  font-weight: 500;
  font-size: var(--sbm-h);
  margin: 0 0 0.85rem;
}

/* ---- recommendation / insight rows ---- */
.sbm-rec { border-top: 1px solid var(--sbm-rule); }
.sbm-rec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
}
.sbm-rec__name { font-weight: 500; }
.sbm-rec__sub { font-size: var(--sbm-micro); color: var(--sbm-muted); margin-top: 0.15rem; }
.sbm-rec__metric {
  font-family: var(--sbm-font-display);
  font-weight: 500;
  white-space: nowrap;
}
.sbm-rec__metric--accent { color: var(--sbm-terracotta-deep); }
.sbm-rec__body { flex: 1; min-width: 0; }

/* ---- product thumbnails ---- */
.sbm-thumb {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--sbm-radius-sm);
  object-fit: cover;
  border: 1px solid var(--sbm-rule);
  background: var(--sbm-surface);
  align-self: center;
}
.sbm-thumb--empty { background: var(--sbm-surface); }
.sbm-rec__row { align-items: center; }

/* ---- order-rhythm timeline (one dot per order) ---- */
.sbm-tl { position: relative; height: 30px; }
.sbm-tl__line {
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--sbm-rule);
}
.sbm-tl__dot {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sbm-terracotta);
  opacity: 0.75;
  border: 1px solid var(--sbm-terracotta-deep);
}

/* ---- was-vs-now micro bars (Section B stats) ---- */
.sbm-mini { margin: 0.25rem 0 0.1rem; max-width: 120px; }
.sbm-mini__row { height: 5px; margin-top: 2px; }
.sbm-mini__bar { display: block; height: 100%; border-radius: 2px; background: var(--sbm-terracotta); }
.sbm-mini__bar--was { background: var(--sbm-rule); }

/* ---- category mix-shift dumbbell ---- */
.sbm-mix { border-top: 1px solid var(--sbm-rule); padding-top: 0.5rem; }
.sbm-mix__legend { font-size: var(--sbm-micro); color: var(--sbm-muted); margin-bottom: 0.4rem; }
.sbm-mix__row { display: flex; align-items: center; gap: 0.9rem; padding: 0.4rem 0; }
.sbm-mix__row .sbm-bar__label { flex: none; width: 8.5rem; }
.sbm-mix__track { position: relative; flex: 1; height: 14px; }
.sbm-mix__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--sbm-rule);
}
.sbm-mix__link { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; }
.sbm-mix__link--up { background: var(--sbm-olive); }
.sbm-mix__link--down { background: var(--sbm-terracotta); }
.sbm-mix__dot {
  position: absolute; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%); border-radius: 50%;
}
.sbm-mix__legend .sbm-mix__dot { position: static; display: inline-block; transform: none; vertical-align: middle; }
.sbm-mix__dot--was { background: var(--sbm-surface); border: 1.5px solid var(--sbm-muted); }
.sbm-mix__dot--up { background: var(--sbm-olive); }
.sbm-mix__dot--down { background: var(--sbm-terracotta-deep); }
.sbm-mix__val { flex: none; width: 7.5rem; text-align: right; font-family: var(--sbm-font-display); font-size: var(--sbm-label); white-space: nowrap; }

/* ---- due-to-reorder cycle meters ---- */
.sbm-due { border-top: 1px solid var(--sbm-rule); }
.sbm-due__row { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; }
.sbm-due__main { flex: 1; min-width: 0; }
.sbm-due__track {
  position: relative; height: 8px; margin: 0.35rem 0 0.1rem;
  background: var(--sbm-surface); border: 1px solid var(--sbm-rule);
  border-radius: 4px; overflow: visible;
}
.sbm-due__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sbm-rule); border-radius: 4px 0 0 4px; }
.sbm-due__over { position: absolute; top: 0; bottom: 0; background: var(--sbm-terracotta); }
.sbm-due__mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  transform: translateX(-50%); background: var(--sbm-ink);
}
.sbm-due__cyclbl { font-size: var(--sbm-caption); color: var(--sbm-muted); font-family: var(--sbm-font-text); text-align: right; }

/* ---- curated card imagery ---- */
.sbm-curated__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--sbm-radius-sm); border: 1px solid var(--sbm-rule);
  margin-bottom: 0.6rem;
}

/* ---- product links (-> the product's page on faire.com) ---- */
.sbm-prod-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sbm-rule);
  text-underline-offset: 2px;
}
.sbm-prod-link::after { content: " \2197"; font-size: 0.85em; }
.sbm-prod-link:hover, .sbm-prod-link:focus-visible {
  color: var(--sbm-terracotta-deep);
  text-decoration-color: var(--sbm-terracotta-deep);
}
a.sbm-pill.sbm-prod-link { cursor: pointer; }

/* ---- pill / tag ---- */
.sbm-pill {
  display: inline-block;
  font-size: var(--sbm-caption);
  letter-spacing: 0.04em;
  color: var(--sbm-terracotta-deep);
  background: var(--sbm-terracotta-tint);
  border-radius: var(--sbm-radius-sm);
  padding: 0.2rem 0.55rem;
}

/* ---- ledger table ---- */
.sbm-table { width: 100%; border-collapse: collapse; font-size: var(--sbm-label); }
.sbm-table th {
  text-align: left;
  font-weight: 400;
  font-size: var(--sbm-micro);
  color: var(--sbm-muted);
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--sbm-rule);
}
.sbm-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--sbm-rule); }
.sbm-table .sbm-num { text-align: right; font-family: var(--sbm-font-display); font-weight: 500; }
.sbm-delta--up { color: var(--sbm-olive); }
.sbm-delta--down { color: var(--sbm-muted); }

/* ---- category-spend bar chart ---- */
.sbm-bars { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.sbm-bar { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 0.75rem; }
.sbm-bar__label { font-size: var(--sbm-label); }
.sbm-bar__sub { color: var(--sbm-muted); font-size: var(--sbm-caption); }
.sbm-bar__track { height: 8px; background: var(--sbm-terracotta-tint); border-radius: 999px; overflow: hidden; }
.sbm-bar__fill { height: 100%; background: var(--sbm-terracotta); border-radius: 999px; min-width: 2px; }
.sbm-bar__val { font-family: var(--sbm-font-display); font-weight: 500; font-size: var(--sbm-label); white-space: nowrap; }

/* ---- spend-over-time sparkline ---- */
.sbm-spark { display: flex; align-items: flex-end; gap: 2px; height: 60px; margin-top: 0.25rem; }
.sbm-spark__bar { flex: 1 1 0; min-width: 2px; background: var(--sbm-olive); border-radius: 2px 2px 0 0; opacity: 0.85; }
.sbm-spark__axis { display: flex; justify-content: space-between; font-size: var(--sbm-caption); color: var(--sbm-muted); margin-top: 0.3rem; }

/* ---- inline adoption bar on a recommendation row ---- */
.sbm-recbar { height: 5px; max-width: 12rem; margin-top: 0.4rem; background: var(--sbm-terracotta-tint); border-radius: 999px; overflow: hidden; }
.sbm-recbar__fill { height: 100%; background: var(--sbm-terracotta); border-radius: 999px; min-width: 2px; }

/* ---- empty / first-order state ---- */
.sbm-empty {
  background: var(--sbm-surface);
  border-radius: var(--sbm-radius);
  padding: 1.25rem 1.5rem;
  font-size: var(--sbm-label);
  color: var(--sbm-ink-soft);
}

/* ---- curated-for-your-shop edit (dossier-curated) ---- */
.sbm-curated { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sbm-curated__card { border: 1px solid var(--sbm-rule); border-radius: var(--sbm-radius); padding: 12px; background: var(--sbm-surface); }
.sbm-curated__sku {
  height: 64px; border-radius: var(--sbm-radius-sm); background: var(--sbm-terracotta-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--sbm-terracotta-deep); font-family: var(--sbm-font-display); margin-bottom: 10px;
}
.sbm-curated__name { font-size: var(--sbm-label); font-weight: 500; }
.sbm-curated__note { font-size: var(--sbm-caption); color: var(--sbm-muted); margin-top: 2px; }
@media (max-width: 32rem) { .sbm-curated { grid-template-columns: 1fr; } }

/* ---- footer note (confidentiality / aggregate) ---- */
.sbm-note { margin-top: 1.5rem; font-size: var(--sbm-caption); color: var(--sbm-muted); line-height: 1.6; }

/* ---- closing "thank you" page (last page of the PDF) ---- */
.sbm-closing {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--sbm-rule);
  text-align: center;
}
.sbm-closing__inner { max-width: 30rem; margin: 0 auto; }
.sbm-closing__logo { width: 300px; max-width: 80%; height: auto; margin: 0 auto 1.5rem; display: block; }
.sbm-closing__eyebrow {
  font-size: var(--sbm-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sbm-terracotta-deep); margin: 0 0 0.4rem;
}
.sbm-closing__title {
  font-family: var(--sbm-font-display); font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 2.6rem); letter-spacing: -0.02em;
  color: var(--sbm-ink); margin: 0 0 0.85rem;
}
.sbm-closing__msg { font-size: var(--sbm-body); color: var(--sbm-ink-soft); margin: 0 auto; max-width: 25rem; }
.sbm-closing__divider { width: 200px; height: 16px; margin: 1.5rem auto; display: block; }
.sbm-closing__contact {
  background: var(--sbm-surface); border: 1px solid var(--sbm-rule);
  border-radius: var(--sbm-radius); padding: 1.1rem 1.5rem; display: inline-block;
}
.sbm-closing__who { font-family: var(--sbm-font-display); font-weight: 500; font-size: 1.15rem; margin: 0; color: var(--sbm-ink); }
.sbm-closing__role { font-size: var(--sbm-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sbm-muted); margin: 0.15rem 0 0.5rem; }
.sbm-closing__lines { font-size: var(--sbm-label); margin: 0; }
.sbm-closing__lines a { text-decoration: none; }
.sbm-closing__sign {
  font-family: var(--sbm-font-display); font-size: var(--sbm-micro);
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--sbm-muted); margin: 2rem 0 0;
}

/* ---- accessibility ---- */
.sbm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sbm-report a { color: var(--sbm-terracotta-deep); }
.sbm-report :focus-visible { outline: 2px solid var(--sbm-terracotta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sbm-report * { animation: none !important; transition: none !important; }
}

@media (max-width: 32rem) {
  .sbm-report__inner { padding: 2rem 1.25rem 2.5rem; }
  .sbm-account { text-align: left; }
}

/* ============================================================
   PRINT / PDF — a deliberately denser profile than the web view.
   Shrinks the type + spacing tokens and tightens every component so
   the report packs onto fewer pages. Web view is untouched.
   ============================================================ */
@media print {
  .sbm-report {
    background: #fff;
    line-height: 1.4;
    /* denser type scale */
    --sbm-caption: 0.58rem;
    --sbm-micro: 0.64rem;
    --sbm-label: 0.7rem;
    --sbm-body: 0.78rem;
    --sbm-h: 1rem;
    --sbm-figure: 2rem;
    --sbm-figure-sm: 1.1rem;
  }
  .sbm-report__inner { padding: 0; max-width: none; }

  .sbm-rule { margin: 0.7rem 0; }
  .sbm-hero { margin-top: 0.85rem; }
  .sbm-hero__figure { line-height: 0.9; }
  .sbm-hero__label { margin-top: 0.3rem; }
  .sbm-stats { gap: 0.55rem 0.9rem; margin-top: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }

  .sbm-section { margin-top: 1rem; padding-top: 0.75rem; }
  .sbm-section__title { margin-bottom: 0.5rem; }
  .sbm-section__eyebrow { margin-bottom: 0.25rem; }

  .sbm-rec__row { padding: 0.3rem 0; }
  .sbm-recbar { margin-top: 0.25rem; height: 4px; }

  .sbm-table th { padding: 0 0 0.35rem; }
  .sbm-table td { padding: 0.28rem 0; }

  .sbm-bars { gap: 0.3rem; }
  .sbm-bar { grid-template-columns: 7rem 1fr auto; }
  .sbm-bar__track { height: 7px; }
  .sbm-masthead__logo { height: 26px; }
  .sbm-closing__logo { width: 240px; margin-bottom: 1rem; }
  .sbm-spark { height: 40px; }
  .sbm-spark__axis { margin-top: 0.2rem; }
  .sbm-note { margin-top: 0.9rem; }

  /* keep atomic units from splitting across pages, but let sections flow */
  .sbm-rec__row, .sbm-bar, .sbm-table tr, .sbm-spark, .sbm-stats,
  .sbm-tl, .sbm-mix__row, .sbm-due__row, .sbm-curated__card { break-inside: avoid; }
  .sbm-section__title, .sbm-section__eyebrow { break-after: avoid; }

  /* closing thank-you gets its own, vertically-centered last page */
  .sbm-closing {
    break-before: page; border-top: 0;
    margin-top: 0; padding-top: 0;
    min-height: 90vh; display: flex; align-items: center; justify-content: center;
    break-inside: avoid;
  }
}