/* ============ Sample Report frame ============
 * docs/marketing-v2-design.md §5.6. The marketing bar and the Next-steps CTA on
 * /sample-report, on top of the UNCHANGED interactiveReport.css. Scoped under
 * body.ireport.is-sample so it can never reach a borrower's /r/ page.
 * Literal hex only (the --m2-ink palette, CLAUDE.md §4.13); longhands, never
 * `inset:`; nothing hover-only.
 */
body.ireport.is-sample { --sr-bar-h: 56px; }

.is-sample .sr-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--sr-bar-h);
  padding: 0 20px;
  background: #0d0e12;
  border-bottom: 1px solid #2a2c37;
  color: #ecedf2;
  font-family: "Public Sans", system-ui, sans-serif;
}
.is-sample .sr-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ecedf2;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.is-sample .sr-bar-label {
  margin: 0;
  min-width: 0;
  color: #a9acba;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-sample .sr-bar-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid #8b8ff7;
  border-radius: 999px;
  color: #8b8ff7;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.is-sample .sr-bar-badge:hover,
.is-sample .sr-bar-badge:focus-visible { background: #1e2029; color: #ecedf2; }
.is-sample .sr-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.is-sample .sr-bar-actions .mkt-cta-fineprint {
  order: -1;
  max-width: 22ch;
  margin: 0;
  color: #a9acba;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: right;
}
.is-sample .sr-bar a:focus-visible,
.is-sample .sr-next-cta a:focus-visible {
  outline: 2px solid #8b8ff7;
  outline-offset: 2px;
}

/* Buttons from _marketing_cta.html (the report page loads no components.css). */
.is-sample .sr-bar-cta,
.is-sample .sr-next-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.is-sample .sr-next-cta-row { flex-wrap: wrap; gap: 10px; }
.is-sample .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.is-sample .sr-next-cta .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.is-sample .btn-accent,
.is-sample .ir-footer-cta a.btn-accent { background: #5b5fe0; color: #ffffff; }
.is-sample .btn-accent:hover,
.is-sample .btn-accent:focus-visible,
.is-sample .ir-footer-cta a.btn-accent:hover,
.is-sample .ir-footer-cta a.btn-accent:focus-visible { background: #4c50cf; text-decoration: none; }
.is-sample .sr-btn-ghost,
.is-sample .sr-btn-outline,
.is-sample .ir-footer-cta a.sr-btn-outline { border-color: #2a2c37; color: #ecedf2; }
.is-sample .sr-btn-outline,
.is-sample .ir-footer-cta a.sr-btn-outline { border-color: #6f6c65; }
/* Indigo, not the report's green: on this page green means a saving. */
.is-sample .sr-next-cta p a { color: #8b8ff7; }
.is-sample .sr-btn-ghost:hover,
.is-sample .sr-btn-ghost:focus-visible,
.is-sample .sr-btn-outline:hover,
.is-sample .sr-btn-outline:focus-visible { background: #1e2029; text-decoration: none; }
.is-sample .sr-next-cta .mkt-cta-fineprint { margin: 10px 0 0; color: #c9c7c0; font-size: 13px; }
.is-sample .sr-next-actions { flex: 0 0 auto; }

/* The report's sticky sidebar sits under the bar. */
body.ireport.is-sample .ir-side {
  top: var(--sr-bar-h);
  height: calc(100vh - var(--sr-bar-h));
  max-height: calc(100vh - var(--sr-bar-h));
}
body.ireport.is-sample .ir-summary-panel { top: calc(var(--sr-bar-h) + 22px); }

@media (max-width: 1100px) {
  .is-sample .sr-bar-actions .mkt-cta-fineprint { display: none; }
}
@media (max-width: 1000px) {
  body.ireport.is-sample .ir-side { top: auto; height: auto; max-height: none; }
  .is-sample .sr-next-actions { margin-top: 16px; }
}
/* Phones: the bar keeps the logo, the label and the primary button only. */
@media (max-width: 640px) {
  .is-sample .sr-bar { gap: 10px; padding: 0 12px; }
  .is-sample .sr-bar-brand span,
  .is-sample .sr-bar-badge { display: none; }
  .is-sample .sr-bar-label { flex: 1 1 auto; font-size: 12.5px; }
  .is-sample .sr-bar-cta .sr-btn-ghost { display: none; }
  .is-sample .sr-bar .btn { height: 34px; padding: 0 12px; font-size: 13.5px; }
}