/* ============================================================ PRINT
   Adapts the live screen UI for paper output.

   Notes:
   - The original `_handoff_tmp/v3-print.html` is a separate print-only HTML
     structure with its own selectors (`.ftile`, `.mbox`, `.gpill`, `.kpi-box`,
     `.grid-2/3/4`). That layout is reproduced as-is below for any future
     print-only template; the screen layout (`.forecast-tile`, `.metric-box`,
     etc.) is also tightened so a one-off Ctrl+P prints sensibly.
   ============================================================ */

@page { size: A4 landscape; margin: 12mm 14mm; }

@media print {
  /* Force browsers to honour brand colours in print */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body { background: white; padding: 0; font-size: 11pt; }

  /* Hide chrome that doesn't belong on paper */
  .tabnav,
  .toolbar,
  .row-delete,
  .internals-toggle,
  .ci-toggle-pill,
  .tmpl-clear-btn,
  .tmpl-row,
  .or-subnav,
  .scenario-row,
  .risk-scenario-row,
  .partners-strip { display: none !important; }

  /* Show every pane regardless of `.active` (so a single Ctrl+P prints
     the whole report, one tab per page). Comment this rule out if you
     prefer to print only the visible tab. */
  .pane           { display: block !important; page-break-after: always; break-after: page; }
  .pane:last-of-type { page-break-after: avoid;   break-after: avoid; }
  .or-pane        { display: block !important; }

  .internals-body { display: block !important; }

  /* Tighten layout for paper */
  .page         { padding: 0; max-width: 100%; }
  .single-grid  { gap: 10px; }
  .card         { break-inside: avoid; padding: 10px 12px; }
  .card + .card { margin-top: 8px; }
  .summary-bar  { gap: 8px; margin-bottom: 10px; }
  .chart-grid   { gap: 8px; margin-top: 10px; }
  .or-grid-2,
  .or-grid-3,
  .or-kpi-row   { gap: 8px; margin-bottom: 10px; }

  /* Tile typography at print sizes */
  .forecast-tile .val { font-size: 24pt; }
  .metric-box .val    { font-size: 16pt; }
  .sum-tile .val      { font-size: 18pt; }

  /* Tables */
  .concerts        { font-size: 8.5pt; min-width: 0; break-inside: auto; }
  .concerts thead th { padding: 6px; font-size: 7.5pt; }
  .concerts tbody td { padding: 4px 6px; }
  .coef-table      { font-size: 9pt; }
  .or-table        { font-size: 9pt; }

  /* Charts: keep SVG but cap height so they don't dominate the page */
  .chart-canvas { min-height: 0; max-height: 200px; }
  .or-svg       { max-height: 200px; }

  /* Recommendations don't need icons in print */
  .rec .icon { display: none; }
  .rec       { grid-template-columns: 1fr; padding: 6px 8px; font-size: 9.5pt; }

  /* Footer rainbow bars are decorative — hide for print */
  .audio-bars,
  .model-footer-bars { display: none !important; }
}

/* ============================================================
   Below: print-only structure adapted from _handoff_tmp/v3-print.html.
   These selectors (.ftile, .mbox, .gpill, .rpill, .kpi-box, .grid-N,
   .page-header, .ph-eyebrow, .print-footer, .genre-bars*) are not
   used by the live screen UI. They're kept here for any future
   print-only template that wants to render the formal multi-page
   report exactly as v3-print.html lays it out.
   ============================================================ */

.page {
  width: 100%;
  page-break-after: always;
  break-after: page;
  padding: 0;
  position: relative;
}
.page:last-child { page-break-after: avoid; break-after: avoid; }

.masthead-left { display: flex; align-items: center; gap: 14px; }
.mpo-logo { height: 42px; width: auto; display: block; }
.brand-sub { font-size: 9pt; color: rgba(255,255,255,0.5); }
.masthead-right { text-align: right; font-size: 8.5pt; color: rgba(255,255,255,0.45); line-height: 1.6; }
.masthead-right strong { color: rgba(255,255,255,0.75); font-weight: 600; }

.page-header {
  background: #1B2A4A; color: white;
  padding: 8px 20px; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.page-header .ph-title { font-size: 10pt; font-weight: 700; letter-spacing: 0.04em; color: white; }
.page-header .ph-meta  { font-size: 8pt;  color: rgba(255,255,255,0.5); }
.ph-eyebrow            { font-size: 8pt;  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-right: 10px; }

.section-label { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 10px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.col-span-2 { grid-column: span 2; }

.ftile { border-radius: 6px; padding: 14px 16px; break-inside: avoid; }
.ftile.navy { background: #1B2A4A; }
.ftile.teal { background: #1A8A7D; }
.ftile .lbl { font-size: 8pt; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.ftile .val { font-size: 24pt; font-weight: 800; color: white; line-height: 1.05; letter-spacing: -0.02em; }
.ftile .sub { font-size: 8.5pt; color: rgba(255,255,255,0.7); margin-top: 4px; }

.mbox { background: #F4F5F7; border: 1px solid #E4E7ED; border-radius: 4px; padding: 10px 12px; }
.mbox .lbl { font-size: 8pt; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6B7280; margin-bottom: 3px; }
.mbox .val { font-size: 16pt; font-weight: 700; color: #1B2A4A; font-family: 'DM Mono', monospace; line-height: 1.1; }
.mbox .sub { font-size: 8.5pt; color: #6B7280; margin-top: 2px; }

.gpill { display: inline-block; font-size: 7pt; font-weight: 700; letter-spacing: 0.07em; padding: 1px 6px; border-radius: 8px; color: white; text-transform: uppercase; }
.rpill { display: inline-block; font-size: 7pt; font-weight: 700; letter-spacing: 0.08em; padding: 1px 7px; border-radius: 8px; color: white; text-transform: uppercase; }

.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi-box { background: white; border: 1px solid #E4E7ED; border-radius: 5px; padding: 10px 12px; }
.kpi-box .label { font-size: 8pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7280; margin-bottom: 3px; }
.kpi-box .val   { font-size: 16pt; font-weight: 800; color: #1B2A4A; font-family: 'DM Mono', monospace; line-height: 1.1; }
.kpi-box .val.teal { color: #1A8A7D; }
.kpi-box .val.blue { color: #2867D6; }
.kpi-box .sub   { font-size: 8pt; color: #9CA3AF; }

.print-footer {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid #E4E7ED;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 8pt; color: #9CA3AF;
}
.print-footer .ref { color: #C20F8C; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; font-size: 7.5pt; }

.genre-bars { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.genre-bar-row { display: flex; align-items: center; gap: 10px; }
.genre-bar-label { width: 80px; font-size: 9pt; font-weight: 600; color: #1B2A4A; flex-shrink: 0; }
.genre-bar-track { flex: 1; background: #F4F5F7; border-radius: 3px; height: 18px; overflow: hidden; }
.genre-bar-fill  { height: 100%; border-radius: 3px; display: flex; align-items: center; padding-left: 6px; }
.genre-bar-val   { font-size: 8.5pt; font-weight: 700; color: white; }
.genre-bar-meta  { width: 80px; font-size: 8.5pt; color: #6B7280; flex-shrink: 0; text-align: right; }

.mt8  { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mb12 { margin-bottom: 12px; }