body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}
input {
  margin-bottom: 10px;
}

#reportContent {
  border: 1px solid #862222;
  padding: 10px;
  margin-bottom: 10px;
  width: 600px;
  min-height: 200px;
  background: white;
  box-sizing: border-box;  /* include padding and border in height/width calculations */
  overflow: visible !important;
  height: auto !important;
  line-height: 1.3;
  font-size: 10pt !important;
}

.page-break-before {
  /* for modern browsers/html2canvas: */
  break-before: page !important;
  /* for legacy support: */
  page-break-before: always !important;
}


/* ensure banner is the positioning context */
.banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 4px solid #000080;
  border-bottom: 4px solid #000080;
  padding: 10px 15px;
  background: #f9f9f9;
}

/* keep your existing title styling */
.banner-title {
  color: #000080;
  font-size: 20px;
  margin: 0;
  font-weight: bold;
  line-height: 1;
}

/* container for title+link (flex just to stack them) */
.banner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* absolutely position the small link at the bottom‑left */
.banner-link {
  position: absolute;
  left: 15px;        /* match the banner’s horizontal padding */
  bottom: 10px;      /* match the banner’s vertical padding */
  font-size: 10px;   /* small font */
  color: #000080;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
/* Logo in banner */
.banner-logo {
  height: auto;                    /* scale to fit the banner */
  /* width: auto;  let aspect ratio stay intact */
}

#reportContent {
  font-family: Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.35;
  color: #222;
  background: white;
  padding: 14px;
  margin: 0 auto 12px;
  max-width: 740px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

#reportContent h2,
#reportContent h3,
#reportContent h4 {
  color: #000080;
  font-weight: bold;
  line-height: 1.2;
  font-size: 13pt;
  margin: 8px 0 4px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1px;
}

#reportContent h2 { font-size: 14pt; }
#reportContent h3 { font-size: 13pt; }
#reportContent h4 { font-size: 12pt; }

#reportContent p,
#reportContent li {
  font-size: 10.5pt;
  margin: 2px 0;
  padding: 0;
}

#reportContent ul {
  padding-left: 18px;
  margin: 4px 0 6px;
}

#reportContent pre {
  background: #f4f4f4;
  padding: 6px 8px;
  font-size: 10pt;
  line-height: 1.3;
  border-left: 3px solid #aaa;
  white-space: pre-wrap;
  margin: 4px 0;
}

/* Page break logic */
.page-break-before {
  break-before: page !important;
  page-break-before: always !important;
}

/* Override any print-specific layout rules */
@media print {
  #reportContent {
    height: auto !important;
    overflow: visible !important;
    font-size: 6pt !important; 
    line-height: 1.3 !important; 
  }
  #reportContent h3 { font-size: 10pt !important; }
  #reportContent h4 { font-size: 8pt !important; }
  #reportContent p,
  #reportContent li { font-size: 6pt !important; }
}

.results-box {
  background: #fff;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 12px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #222;
  max-width: 100%;
}

.results-box h2,
.results-box h3 {
  color: #000080;
  font-size: 19px;
  margin: 10px 0 4px;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

.results-box ul,
.results-box ol {
  padding-left: 18px;
  margin: 4px 0 8px;
}

.results-box li {
  margin: 2px 0;
  padding-left: 0;
}

.results-box p {
  margin: 3px 0 6px;
  padding: 0;
}

.results-box pre {
  font-size: 15px;
  line-height: 1.3;
  margin: 6px 0;
  padding: 8px;
  background: #f9f9f9;
  border-left: 3px solid #999;
  white-space: pre-wrap;
}
.mode-btn {
  font-size: 19px;
  margin: 0 10px;
  padding: 12px 20px;
  border: 2px solid #000080;
  background-color: #f0f4ff;
  color: #000080;
  border-radius: 6px;
  cursor: pointer;
}
.mode-btn.active {
  background-color: #000080;
  color: white;
}