/* Sample client report: the monthly pack Sumlino will build from a client's
   QuickBooks figures. One print layout (US Letter, 48px margins, 720px inner
   width) that also reads on screen. Fictional figures for Summit Air & Heat,
   prepared by Waterford Business Solutions. One accent (blue); green and red
   mean favourable and unfavourable only. Small uppercase labels over large
   figures, thin rules, no boxes where a rule will do. Text never under 11px.
   Page 1 is open; pages 2 to 7 preview what Pro adds (faded, inert, labelled). */
.sr-body { margin: 0; background: #e9eef5; color: #13233b; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.sr-wrap { max-width: 816px; margin: 0 auto; padding: 28px 12px 48px; }
.sr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 8px; color: #3e5272; font-size: 13px; }
.sr-top a { color: #075cff; font-weight: 600; text-decoration: none; } .sr-top a:focus-visible { outline: 2px solid #075cff; outline-offset: 3px; border-radius: 6px; }
.sr-top .sr-pill { padding: 3px 9px; border-radius: 999px; background: #fff6e2; color: #8a5a00; font-size: 11.5px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase; }
.sr-intro { margin: 0 0 16px; color: #536884; font-size: 12.5px; }
.sr-page { position: relative; box-sizing: border-box; width: 100%; max-width: 816px; min-height: 1056px; margin: 0 auto 24px; padding: 44px 48px 60px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px #1734540f, 0 24px 48px -28px #17345466; color: #13233b; }
.sr-page * { box-sizing: border-box; }
.sr-page.is-locked { min-height: 0; padding-bottom: 48px; }
.sr-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Header band on every page. */
.sr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #13233b; }
.sr-brand { display: flex; align-items: center; gap: 9px; color: #13233b; font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.sr-brand img, .sr-brand svg { display: block; width: 26px; height: 21px; }
.sr-by { display: grid; justify-items: end; gap: 1px; text-align: right; }
.sr-by b { font-size: 12px; font-weight: 650; } .sr-by small { color: #5e7390; font-size: 11px; }
/* Title block with the on-track score beside it. */
.sr-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 18px 0 0; }
.sr-title > div { display: grid; gap: 3px; }
.sr-title small { color: #5e7390; font-size: 11px; font-weight: 650; letter-spacing: .7px; text-transform: uppercase; }
.sr-title h1, .sr-title .sr-h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.6px; line-height: 1.12; }
.sr-title p { margin: 2px 0 0; color: #5e7390; font-size: 12.5px; }
.sr-score { display: grid; gap: 2px; min-width: 150px; padding: 8px 12px; border: 1px solid #e3e8ef; border-radius: 8px; font-variant-numeric: tabular-nums; }
.sr-score b { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1; } .sr-score b i { margin-left: 4px; color: #5e7390; font-size: 11.5px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.sr-score small { color: #5e7390; font-size: 11px; }
.sr-scorebar { position: relative; display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: #e3e8ef; overflow: hidden; } .sr-scorebar u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #18663b; }
/* Section headings: small caps over a hairline. */
.sr-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #c9d4e3; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.sr-h2 small { color: #5e7390; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: right; }
.sr-lead { margin: 0 0 6px; font-size: 12.5px; } .sr-lead b { font-weight: 650; }
/* Three-up stat row: label, big figure, one line of context. */
.sr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 4px 0 6px; }
.sr-stat { display: grid; gap: 4px; align-content: start; padding-top: 8px; border-top: 1px solid #c9d4e3; font-variant-numeric: tabular-nums; }
.sr-stat small { color: #5e7390; font-size: 11px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; }
.sr-stat b { font-size: 24px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.sr-stat span { color: #5e7390; font-size: 11.5px; line-height: 1.4; }
/* At a glance: six scores, each against last month and a target. */
.sr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px; }
.sr-kpi { display: grid; gap: 2px; padding: 7px 0 6px; border-top: 1px solid #c9d4e3; }
.sr-kpi small { color: #5e7390; font-size: 11px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; }
.sr-kpi b { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sr-kpi b i { margin-left: 3px; color: #5e7390; font-size: 12px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.sr-kpi em { color: #3e5272; font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.sr-kpi em.is-up { color: #18663b; } .sr-kpi em.is-down { color: #b42331; }
.sr-kpi .sr-mark { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #e3e8ef; color: #5e7390; font-size: 11px; }
.sr-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.sr-tag.is-ok { background: #ecfdf3; color: #18663b; } .sr-tag.is-watch { background: #fff6e2; color: #8a5a00; } .sr-tag.is-high { background: #fff5f5; color: #b42331; } .sr-tag.is-neutral { background: #eef1f5; color: #4a5d79; }
/* Two columns where the page splits. */
.sr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Lists: what changed, risks, alerts, strategies, next steps. */
.sr-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sr-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 8px; align-items: start; }
.sr-list li b { font-size: 12.5px; font-weight: 650; } .sr-list li small { color: #5e7390; font-size: 11.5px; }
.sr-list li > span { display: grid; gap: 1px; }
.sr-dot { width: 8px; height: 8px; margin: 5px 0 0 3px; border-radius: 50%; background: #c9d4e3; } .sr-dot.is-up { background: #18663b; } .sr-dot.is-down { background: #b42331; } .sr-dot.is-flat { background: #5e7390; }
.sr-list.sr-risks li { padding: 8px 10px; border-radius: 6px; } .sr-list.sr-risks li.is-high { background: #fff5f5; } .sr-list.sr-risks li.is-watch { background: #fff9eb; }
.sr-flag { grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .is-high .sr-flag { color: #b42331; } .is-watch .sr-flag { color: #8a5a00; }
.sr-box { grid-row: 1 / span 2; width: 12px; height: 12px; margin: 3px 0 0 1px; border: 1.5px solid #c6d8fd; border-radius: 3px; }
.sr-who { margin-right: 6px; padding: 0 5px; border-radius: 4px; background: #edf3ff; color: #0a52e0; font-size: 11px; font-style: normal; font-weight: 650; letter-spacing: .3px; text-transform: uppercase; }
/* Value: the range, the goal, the gap. */
.sr-value { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding: 10px 14px; border: 1px solid #d8e3f3; border-radius: 8px; }
.sr-value small { color: #5e7390; font-size: 11px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; }
.sr-value .sr-big { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; } .sr-value .sr-big b { font-size: 28px; font-weight: 700; letter-spacing: -.8px; line-height: 1; font-variant-numeric: tabular-nums; } .sr-value .sr-big span { color: #3e5272; font-size: 12px; font-variant-numeric: tabular-nums; }
.sr-range { position: relative; display: block; height: 8px; margin: 10px 0 6px; border-radius: 4px; background: #e3e8ef; }
.sr-range u { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: #075cff; transform-origin: 0 50%; }
.sr-range i { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 1px; background: #13233b; }
.sr-range-ends { display: flex; justify-content: space-between; color: #5e7390; font-size: 11px; font-variant-numeric: tabular-nums; }
.sr-goal { display: grid; gap: 6px; align-content: start; }
.sr-goal .sr-gap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .sr-goal .sr-gap b { font-weight: 700; }
.sr-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: #e3e8ef; overflow: hidden; } .sr-bar u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #18663b; transform-origin: 0 50%; }
.sr-note { margin: 8px 0 0; color: #5e7390; font-size: 11px; line-height: 1.45; }
/* Tables: units in the header, numbers right, a rule above totals. */
.sr-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sr-table th, .sr-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid #edf1f7; vertical-align: top; }
.sr-table th { color: #5e7390; font-size: 11px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid #c9d4e3; }
.sr-table th:first-child, .sr-table td:first-child { text-align: left; padding-left: 0; }
.sr-table th:last-child, .sr-table td:last-child { padding-right: 0; }
.sr-table .is-group td { padding-top: 8px; color: #13233b; font-weight: 700; }
.sr-table .is-sub td:first-child { padding-left: 14px; color: #3e5272; }
.sr-table .is-total td { border-top: 1px solid #c9d4e3; border-bottom: 2px solid #13233b; font-weight: 700; }
.sr-table td.is-up { color: #18663b; } .sr-table td.is-down { color: #b42331; }
.sr-table td.sr-notes, .sr-table th.sr-notes { text-align: left; color: #3e5272; font-size: 11.5px; }
/* KPI results: grouped by perspective; result, target, on track, trend, importance. */
.sr-kpitable th:nth-child(4), .sr-kpitable td.sr-oncol { text-align: center; }
.sr-kpitable td.sr-imp { color: #5e7390; }
.sr-kpitable .is-group td { padding: 10px 0 4px; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid #c9d4e3; }
.sr-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 3px; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; vertical-align: -3px; background: #075cff; }
.sr-badge[data-p="b"] { background: #18663b; } .sr-badge[data-p="c"] { background: #8a5a00; } .sr-badge[data-p="d"] { background: #5e7390; }
.sr-ok, .sr-off { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; }
.sr-ok { background: #ecfdf3; color: #18663b; } .sr-off { background: #fff5f5; color: #b42331; }
.sr-ok svg, .sr-off svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Cash bridge: each line as a bar from a shared zero. */
.sr-bridge { display: grid; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.sr-bridge-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 90px; gap: 12px; align-items: center; }
.sr-bridge-row .sr-bl { color: #3e5272; } .sr-bridge-row b { text-align: right; font-weight: 600; }
.sr-bridge-row .sr-bt { position: relative; display: block; height: 10px; } .sr-bridge-row .sr-bt u { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: #18663b; }
.sr-bridge-row.is-neg .sr-bt u { background: #b42331; } .sr-bridge-row.is-neg b { color: #b42331; }
.sr-bridge-row.is-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid #c9d4e3; } .sr-bridge-row.is-total .sr-bl, .sr-bridge-row.is-total b { color: #13233b; font-weight: 700; } .sr-bridge-row.is-total .sr-bt u { background: #13233b; }
/* Charts: one hue, thin marks, labels where they help. */
.sr-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sr-chart text { fill: #5e7390; font-size: 11px; font-family: inherit; }
.sr-chart .sr-axis { stroke: #e3e8ef; stroke-width: 1; }
.sr-chart .sr-barfill { fill: #075cff; opacity: .85; } .sr-chart .sr-barfill.is-now { fill: #18663b; opacity: 1; }
.sr-chart .sr-line { fill: none; stroke: #13233b; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sr-chart .sr-pt { fill: #fff; stroke: #13233b; stroke-width: 2; }
.sr-chart .sr-area { fill: #075cff14; } .sr-chart .sr-reserve { stroke: #b42331; stroke-width: 1.5; stroke-dasharray: 4 4; }
.sr-chart .sr-label { fill: #13233b; font-weight: 600; }
.sr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; color: #5e7390; font-size: 11px; }
.sr-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: #075cff; } .sr-legend i.is-line { height: 2px; border-radius: 1px; background: #13233b; vertical-align: 3px; } .sr-legend i.is-now { background: #18663b; } .sr-legend i.is-reserve { height: 0; border-top: 2px dashed #b42331; background: none; vertical-align: 3px; }
/* Aging strips. */
.sr-aging { display: grid; gap: 6px; } .sr-aging-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 66px; gap: 10px; align-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sr-aging-row small { color: #5e7390; font-size: 11px; } .sr-aging-row b { text-align: right; font-weight: 600; }
.sr-aging-row span { display: block; height: 10px; border-radius: 3px; background: #e3e8ef; overflow: hidden; } .sr-aging-row span u { display: block; height: 100%; border-radius: 3px; background: #075cff; transform-origin: 0 50%; } .sr-aging-row.is-late span u { background: #b42331; }
/* Methods on one scale. */
.sr-methods { display: grid; gap: 8px; } .sr-method { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px; gap: 10px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.sr-method small { display: block; color: #5e7390; font-size: 11px; } .sr-mlabel b { font-weight: 600; } .sr-track { position: relative; display: block; height: 10px; border-radius: 3px; background: #e3e8ef; } .sr-track u { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: #075cff; } .sr-track u.is-soft { background: #9cbaf5; } .sr-track u.is-floor { background: #94a3b8; } .sr-method > b { text-align: right; font-weight: 600; }
.sr-scale { display: flex; justify-content: space-between; margin: 2px 0 0 160px; color: #5e7390; font-size: 11px; width: calc(100% - 300px); }
/* Checks, sign-off, basis, definitions, footer. */
.sr-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .sr-checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; } .sr-checks li small { color: #5e7390; font-size: 11px; text-align: right; }
.sr-check { width: 14px; height: 14px; color: #18663b; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sr-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 8px; }
.sr-sign small { display: block; color: #5e7390; font-size: 11px; } .sr-sign b { display: block; margin-top: 2px; font-size: 13px; font-weight: 650; }
.sr-basis { margin: 10px 0 0; color: #5e7390; font-size: 11px; line-height: 1.5; } .sr-basis b { color: #3e5272; font-weight: 600; }
.sr-defs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 0; } .sr-defs > div { display: grid; gap: 1px; padding: 4px 0; border-bottom: 1px solid #edf1f7; } .sr-defs dt { font-size: 12px; font-weight: 650; } .sr-defs dd { margin: 0; color: #5e7390; font-size: 11px; }
.sr-foot { position: absolute; left: 48px; right: 48px; bottom: 24px; display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid #e3e8ef; color: #5e7390; font-size: 11px; }
.sr-foot b { color: #3e5272; font-weight: 600; } .sr-foot span:last-child { white-space: nowrap; }
.is-locked .sr-foot { position: static; margin-top: 22px; }
/* The Pro preview: headings and first rows show, then the page fades. The
   faded body is inert (no focus, no reading order); the lock card is live. */
.sr-locked { position: relative; max-height: 300px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 30%, #0000 96%); mask-image: linear-gradient(180deg, #000 30%, #0000 96%); }
.sr-lock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: -8px; padding: 12px 14px; border: 1px solid #d8e3f3; border-radius: 8px; background: #f5f8fe; }
.sr-lockbadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #075cff; color: #fff; font-size: 11px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.sr-lockicon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sr-lock p { margin: 0; color: #3e5272; font-size: 12px; line-height: 1.45; } .sr-lock p b { color: #13233b; font-weight: 650; }
.sr-lockcta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid #c6d8fd; color: #075cff; font-size: 12.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.sr-lockcta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-lockcta:focus-visible { outline: 2px solid #075cff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sr-lockcta:hover { background: #edf3ff; } }
/* Screen only: smaller screens stack the columns; the page keeps its paper. */
@media (max-width: 760px) {
  .sr-page { min-height: 0; padding: 24px 14px 56px; } .sr-table th, .sr-table td { padding: 4px 3px; white-space: normal; }
  .sr-kpis, .sr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .sr-cols, .sr-value, .sr-sign, .sr-defs { grid-template-columns: 1fr; }
  .sr-title { flex-direction: column; align-items: stretch; gap: 10px; } .sr-title h1, .sr-title .sr-h1 { font-size: 22px; }
  .sr-h2 { flex-wrap: wrap; } .sr-h2 small { flex-basis: 100%; text-align: left; }
  .sr-method { grid-template-columns: 110px minmax(0, 1fr) 100px; } .sr-scale { margin-left: 120px; width: calc(100% - 220px); }
  .sr-bridge-row { grid-template-columns: 130px minmax(0, 1fr) 76px; gap: 8px; } .sr-kpitable th:last-child, .sr-kpitable td.sr-imp { display: none; }
  .sr-foot { position: static; margin-top: 24px; flex-wrap: wrap; } .sr-table { font-size: 11px; }
  .sr-lock { grid-template-columns: 1fr; gap: 10px; } .sr-lockbadge { justify-self: start; } .sr-lockcta { justify-self: start; }
}
@media (max-width: 400px) { .sr-kpis, .sr-stats { grid-template-columns: 1fr; } .sr-head { flex-direction: column; align-items: flex-start; } .sr-by { justify-items: start; text-align: left; } }
/* Narrow phones: the faded previews drop columns they cannot fit, so no figure is cut mid-number. */
@media (max-width: 400px) { .sr-locked .sr-kpitable :is(th, td):nth-child(5), #page-3 .sr-locked .sr-table :is(th, td):nth-child(n + 4) { display: none; } .sr-locked .sr-notes { overflow-wrap: anywhere; } }
@media print {
  @page { size: Letter; margin: 0; }
  .sr-body { background: #fff; } .sr-wrap { max-width: none; padding: 0; } .sr-top, .sr-intro { display: none; }
  .sr-page { width: 8.5in; min-height: 11in; margin: 0; border-radius: 0; box-shadow: none; break-after: page; }
  .sr-page:last-child { break-after: auto; }
}