/* The shareable report: a preview on screen, and a printed page.
 *
 * Two audiences, one document. On screen it belongs to the Sim - same dark
 * ground, same gold, same category colours kept clear of the green/amber/red
 * that carry judgements. On paper it has to survive a printer and a
 * counsellor's desk, so the print block below rebuilds it in dark ink on
 * white rather than asking anyone to print a black page.
 *
 * Kept out of sim.css deliberately: nothing here should reach the app.
 */

.report-overlay {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(5, 6, 10, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.report-overlay[hidden] { display: none; }

.report-shell {
  width: 100%; max-width: 860px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .7);
  overflow: hidden;
}

/* The bar of controls. Printed output never includes it. */
.report-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 2;
}
.report-bar-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.report-bar .btn-report {
  min-height: 40px; padding: 9px 14px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--rule); color: var(--white);
}
.report-bar .btn-report.primary { background: var(--gold-dim); border-color: rgba(255, 215, 80, .45); color: var(--gold); }
.report-bar .btn-report:hover { border-color: var(--ink-dim); }
.report-include {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--ink-muted); cursor: pointer;
}
.report-include input { width: auto; margin: 0; }
.report-include-note { font-size: .72rem; color: var(--ink-dim); flex-basis: 100%; margin: 0; }

.report-doc { padding: 22px 26px 28px; }

.report-head { border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: 18px; }
.report-brand { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.report-title { font-size: 1.32rem; font-weight: 700; margin: 5px 0 0; letter-spacing: -.01em; }
.report-sub { font-size: .86rem; color: var(--ink-muted); margin: 4px 0 0; }
.report-stamp { font-size: .74rem; color: var(--ink-dim); margin: 8px 0 0; }

.report-section { margin-bottom: 20px; }
.report-section-label {
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 700; margin-bottom: 10px;
}

.report-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
.report-fact { background: var(--bg-card); padding: 10px 12px; }
.report-fact dt { font-size: .68rem; color: var(--ink-dim); margin-bottom: 3px; }
.report-fact dd { margin: 0; font-size: .92rem; font-weight: 600; }
.report-fact dd.figure { font-family: 'DM Mono', monospace; color: var(--gold); }

.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.report-kpi { background: var(--bg-elevated); border-radius: 8px; padding: 11px 13px; border-left: 3px solid var(--rule); }
.report-kpi.green { border-left-color: var(--green); }
.report-kpi.amber { border-left-color: var(--amber); }
.report-kpi.red { border-left-color: var(--red); }
.report-kpi-label { font-size: .72rem; color: var(--ink-muted); }
.report-kpi-value { font-family: 'DM Mono', monospace; font-size: 1.12rem; margin: 4px 0 2px; }
.report-kpi-sub { font-size: .68rem; color: var(--ink-dim); line-height: 1.45; }
/* Retirement affordability is a standing, not a rating: it says whether the
   budget funds the contributions, which is a different question from whether
   the projected balance is good. It deliberately carries no green/amber/red. */
.report-kpi-standing {
  font-size: .68rem; font-weight: 700; margin-top: 5px;
  display: inline-block; color: var(--ink-muted);
}
.report-kpi-judge { font-size: .68rem; font-weight: 700; margin-top: 5px; display: inline-block; }
.report-kpi-judge.green { color: var(--green); }
.report-kpi-judge.amber { color: var(--amber); }
.report-kpi-judge.red { color: var(--red); }

.report-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.report-table th { text-align: left; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.report-table td { padding: 6px 0; border-bottom: 1px solid var(--rule-light); vertical-align: baseline; }
.report-table td.num { font-family: 'DM Mono', monospace; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table tr.group td { padding-top: 12px; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--rule); }
.report-table tr.group td.fixed { color: #aab1d0; }
.report-table tr.group td.essential { color: #6fd3d7; }
.report-table tr.group td.discr { color: #b9a3fb; }
.report-table tr.group td.savings { color: #8fdcc9; }
.report-table tr.group td.income { color: var(--gold); }
.report-table tr.total td { font-weight: 700; border-top: 1px solid var(--rule); border-bottom: none; padding-top: 9px; }

.report-note { font-size: .74rem; color: var(--ink-dim); line-height: 1.55; margin-top: 8px; }
.report-warn {
  background: var(--red-dim); border-left: 3px solid var(--red);
  padding: 8px 12px; font-size: .78rem; font-weight: 600; color: var(--red);
  line-height: 1.5; margin-top: 10px;
}
.report-flag {
  background: var(--amber-dim); border-left: 3px solid var(--amber);
  padding: 8px 12px; font-size: .78rem; color: var(--white);
  line-height: 1.5; margin-top: 10px;
}
.report-disclaimer { background: var(--bg-elevated); border-radius: 8px; padding: 11px 13px; font-size: .78rem; line-height: 1.6; margin-top: 12px; }
.report-disclosures { display: flex; flex-direction: column; gap: 7px; }
.report-disclosure { font-size: .76rem; color: var(--ink-muted); line-height: 1.55; }

.report-diff { width: 100%; border-collapse: collapse; font-size: .84rem; }
.report-diff th { text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--rule); color: var(--ink-dim); }
.report-diff th.a { color: #6fd3d7; }
.report-diff th.b { color: #b9a3fb; }
.report-diff td { padding: 8px 10px; border-bottom: 1px solid var(--rule-light); vertical-align: baseline; }
.report-diff td.num { font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.report-col-head { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 7px; border-bottom: 1px solid var(--rule); margin-bottom: 9px; }
.report-col-head.a { color: #6fd3d7; }
.report-col-head.b { color: #b9a3fb; }

.report-bars { display: flex; flex-direction: column; gap: 7px; }
.report-bar-row { display: grid; grid-template-columns: 54px 1fr 92px; align-items: center; gap: 10px; font-size: .78rem; }
.report-bar-age { color: var(--ink-dim); font-family: 'DM Mono', monospace; }
.report-bar-track { height: 7px; background: var(--rule-light); border-radius: 4px; overflow: hidden; }
.report-bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.report-bar-val { font-family: 'DM Mono', monospace; text-align: right; font-variant-numeric: tabular-nums; }

.report-unknown { font-size: .78rem; font-weight: 600; color: var(--ink-muted); }
.report-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 18px; }
.report-cta p { font-size: .8rem; color: var(--ink-muted); margin: 0; }
.report-cta a { color: var(--gold); font-weight: 700; font-size: .84rem; }

/* Detail a reader opens on screen. The export decides separately, so a
   collapsed section on screen still prints when it was selected. */
.report-details > summary {
  cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--gold);
  padding: 7px 0; list-style: none;
}
.report-details > summary::-webkit-details-marker { display: none; }
.report-details > summary::before { content: "▸ "; }
.report-details[open] > summary::before { content: "▾ "; }

@media (max-width: 620px) {
  .report-overlay { padding: 12px 8px; }
  .report-doc { padding: 16px 14px 20px; }
  .report-cols { grid-template-columns: 1fr; }
  .report-bar { position: static; }
  .report-bar-row { grid-template-columns: 44px 1fr 84px; }
  .report-diff-wrap { overflow-x: auto; }
}

/* ===================================================================
   PRINT
   Dark ink on white, because a report gets printed and handed over. The
   app's chrome is hidden outright rather than restyled: only the document
   prints. Every colour here is stated, not inherited, since the screen
   palette lives on variables the print sheet deliberately ignores.
   =================================================================== */
@media print {
  @page { size: auto; margin: 14mm 12mm; }

  html, body {
    background: #fff !important;
    color: #14161f !important;
    font-size: 11pt;
  }
  header, .shell, .mode-selector, .report-bar, .preview-banner,
  #pwGateOverlay, #aiTooltipBackdrop, #globalAITooltip { display: none !important; }

  .report-overlay {
    position: static !important; inset: auto !important;
    background: #fff !important; padding: 0 !important; overflow: visible !important;
    display: block !important;
  }
  .report-overlay[hidden] { display: none !important; }
  .report-shell {
    max-width: none !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; background: #fff !important;
  }
  .report-doc { padding: 0 !important; }

  .report-brand { color: #8a6d00 !important; }
  .report-title, .report-kpi-value, .report-fact dd { color: #14161f !important; }
  .report-fact dd.figure { color: #14161f !important; }
  .report-sub, .report-kpi-label { color: #3f4252 !important; }
  .report-stamp, .report-section-label, .report-kpi-sub, .report-note,
  .report-disclosure, .report-bar-age { color: #55596b !important; }

  .report-head, .report-table th, .report-table tr.total td,
  .report-diff th, .report-col-head, .report-cta { border-color: #b9bcc9 !important; }
  .report-table td, .report-diff td { border-color: #dcdee6 !important; }
  .report-facts { background: #dcdee6 !important; border-color: #dcdee6 !important; }
  .report-fact, .report-kpi, .report-disclaimer, .report-shell { background: #fff !important; }
  .report-kpi { border: 1px solid #dcdee6 !important; border-left-width: 3px !important; }
  .report-kpi.green { border-left-color: #1d7a34 !important; }
  .report-kpi.amber { border-left-color: #8a5a00 !important; }
  .report-kpi.red { border-left-color: #a32d2d !important; }
  .report-kpi-standing { color: #3f4252 !important; }
  .report-kpi-judge.green { color: #1d7a34 !important; }
  .report-kpi-judge.amber { color: #8a5a00 !important; }
  .report-kpi-judge.red { color: #a32d2d !important; }

  .report-table tr.group td.fixed { color: #4a4f68 !important; }
  .report-table tr.group td.essential { color: #14616b !important; }
  .report-table tr.group td.discr { color: #4b3b8f !important; }
  .report-table tr.group td.savings { color: #146b56 !important; }
  .report-table tr.group td.income { color: #8a6d00 !important; }
  .report-diff th.a, .report-col-head.a { color: #14616b !important; }
  .report-diff th.b, .report-col-head.b { color: #4b3b8f !important; }

  .report-warn { background: #fbeaea !important; color: #8f1f1f !important; border-left-color: #a32d2d !important; }
  .report-flag { background: #fdf3e2 !important; color: #5a3c00 !important; border-left-color: #8a5a00 !important; }
  .report-unknown { color: #55596b !important; }
  .report-bar-track { background: #e6e8ef !important; }
  .report-bar-fill { background: #8a6d00 !important; }
  .report-cta a { color: #14161f !important; }

  /* A table that runs over a page repeats its heading, and no row is split
     down the middle. */
  .report-table thead, .report-diff thead { display: table-header-group; }
  .report-table tr, .report-diff tr { break-inside: avoid; page-break-inside: avoid; }
  .report-section { break-inside: avoid-page; }
  .report-section-label { break-after: avoid; }
  .report-kpi, .report-warn, .report-flag, .report-disclaimer { break-inside: avoid; }
  .report-cols { display: block !important; }
  .report-cols > div + div { margin-top: 16px; }

  /* Detail chosen for the export prints in full, whatever the screen state. */
  .report-details > summary { display: none !important; }
  .report-details > *:not(summary) { display: block !important; }
  .report-diff-wrap { overflow: visible !important; }
}

body.report-open { overflow: hidden; }
.report-bar-fill { display: block; }
.report-text-value { text-align: right; overflow-wrap: anywhere; }
.report-cols > div { min-width: 0; }
.report-diff { table-layout: fixed; overflow-wrap: anywhere; }
.report-diff th:first-child { width: 27%; }

/* Both paths get the same internal geometry. Each path is its own table, and
   with automatic layout each sized its label column to its own content - so
   Path A's figures landed at a different x position from Path B's, and the
   side whose labels ran wider read as the heavier of the two. The report
   states no winner; its layout should not imply one either. Fixing the split
   settles it identically for both. The column can no longer stretch to fit an
   awkward value, so the two rules under it let long values wrap instead of
   spilling: without them "Enter borrowing amount to calculate" is clipped. */
.report-cols .report-table { table-layout: fixed; overflow-wrap: anywhere; }
.report-cols .report-table td:first-child { width: 46%; }
.report-cols .report-table td.num { white-space: normal; }
.report-sources p { margin: 8px 0; }
.report-sources a { color: var(--gold); }
.report-doc :focus-visible, .report-bar :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media print {
  body.report-open { overflow: visible; }
  body.report-open > :not(.report-overlay) { display: none !important; }
  .report-shell { overflow: visible; }
  .report-section { break-inside: auto; }
  .report-head, .report-facts, .report-bars { break-inside: avoid; }
  .report-details::details-content { content-visibility: visible; }
  .report-sources a, .report-cta p { color: #343744 !important; }
  .report-doc .custom-tag, .report-doc .hypo-tag { color: #453365; background: #f2eef8; border-color: #716080; white-space: normal; }
  .report-doc .awaiting { color: #55596b; }
  .report-details > summary { display: block !important; color: #343744; }
  .report-details > summary::before { content: ''; }
}

@media print {
  .report-doc { orphans: 3; widows: 3; }
  .report-note, .report-disclosure, .report-sources p { break-inside: avoid; }
  .report-col-head { break-after: avoid; }
  .report-section:has(> .report-table) { break-inside: avoid; }
  .report-table td { padding-top: 4px; padding-bottom: 4px; }
  .report-table tr.group { break-after: avoid; }
  .report-details[open] > summary::before { content: ''; }
}
/* Tags must wrap inside the narrow comparison columns. */
.report-doc .custom-tag, .report-doc .hypo-tag {
  white-space: normal; max-width: 100%; box-sizing: border-box;
  overflow-wrap: anywhere;
}
.report-diff .custom-tag, .report-diff .hypo-tag { display: block; margin: 4px 0 0; }

@media print { .report-sources { break-inside: auto; } }