/* ==========================================================================
   A4 report layout.
   One `.sheet` = one printed A4 portrait page (210 x 297 mm, 8 mm margins,
   giving a 194 x 281 mm content box). The same rules drive the on-screen
   preview so what you see is what comes out of the printer.
   ========================================================================== */

#print-root {
  /* A4 is 210 x 297mm; 8mm margins leave this printable area. 8mm clears the
     unprintable edge of any common A4 printer while using more of the page. */
  --sheet-w: 194mm;
  --sheet-h: 281mm;
  /* A4 landscape: 297 x 210mm less the same 8mm margins */
  --sheet-w-land: 281mm;
  --sheet-h-land: 194mm;
  /* On screen the sheet fakes the printer's page margin with padding; in print
     @page owns the margin and this drops to 0. The rotated landscape block is
     positioned against the padding box, so it has to offset by the same value
     to land in the content box on both. */
  --sheet-pad: 8mm;
  /* BNI red carries the identity; charcoal carries the structure. Keeping the
     two jobs apart stops the page turning into a wall of red, and leaves the
     red free to mean "look here" on totals and the closing line. */
  --rpt-red: #cf2030;
  --rpt-red-dk: #97161f;
  --rpt-red-tint: #fdeef0;
  --rpt-head: var(--rpt-red);   /* legacy alias, still used by a few rules */
  --rpt-slate: #39404e;
  --rpt-slate-lt: #5b6373;
  /* Near-black rather than black, and hairlines rather than the heavy 4a4a4a
     borders — a grid that whispers reads as a report, not a spreadsheet. */
  --rpt-ink: #16181d;
  --rpt-ink-soft: #5c6373;
  --rpt-line: #aab1bd;
  --rpt-line-dk: #767e8d;
  --rpt-band: #eceff4;
  --rpt-zebra: #f6f8fb;
  --rpt-good: #14653f;
  --rpt-good-bg: #e6f4ec;
  --rpt-warn: #8a5d04;
  --rpt-warn-bg: #fdf5e4;
  --rpt-bad: #a3231c;
  --rpt-bad-bg: #fdecea;
  /* Every size below is em-relative to this, so one value scales the whole
     report for both screen and print. Overridden by the Text size control. */
  --rpt-base: 10pt;
  padding: 12mm 0 20mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10mm;
}

.sheet {
  width: var(--sheet-w);
  min-height: var(--sheet-h);
  background: #fff;
  color: var(--rpt-ink);
  padding: 0;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: var(--rpt-base, 10pt);
  line-height: 1.34;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  /* the page margin is applied by @page when printing; on screen we fake it
     with an outer white band so the preview matches the print */
  box-sizing: content-box;
  padding: var(--sheet-pad);
  position: relative;
  /* #print-root is a flex column with an explicit height while the preview is
     fitted to the pane. Without this the sheets would be squashed to fit it,
     which silently understates their real printed height. */
  flex-shrink: 0;
}

/* A wide table reads far better across the page than down it, but the sheet
   itself stays portrait so the document has a single page size. The content is
   laid out landscape and rotated a quarter turn onto the portrait sheet — the
   reader turns the page, and the printer never sees an oversized page.

   The rotated block MUST stay out of normal flow. `transform` only moves paint,
   never layout: in flow the block still occupies its full 281mm of layout
   width, which overflows the 194mm page box and makes the print pipeline shrink
   the entire document to fit the paper (measured at 0.69x — a third of every
   page left blank). Taking it out of flow, and clipping the sheet to the
   already-rotated geometry, leaves the document exactly one page wide. */
.sheet.landscape {
  /* an out-of-flow child contributes no height, so state the page's own */
  height: var(--sheet-h);
  /* clipping is applied to the rotated result, which fits exactly, so nothing
     is actually cut — it only stops the pre-rotation width escaping the sheet */
  overflow: hidden;
}
.sheet.landscape > .land-rotate {
  position: absolute;            /* offset from the sheet's padding box */
  top: var(--sheet-pad);
  left: var(--sheet-pad);
  width: var(--sheet-w-land);    /* becomes the vertical extent once rotated */
  height: var(--sheet-h-land);   /* becomes the horizontal extent */
  transform-origin: top left;
  /* rotate first, then slide back into the content box */
  transform: translateX(var(--sheet-w)) rotate(90deg);
}

/* ------------------------------------------------------------ page header -- */

/* The masthead repeats on every sheet, so it is kept tight: a red identity bar
   over a light strip holding the three things that change page to page. */
.rpt-head { margin-bottom: 2.4mm; line-height: 1.2; }

.rpt-head-bar {
  background: var(--rpt-red);
  color: #fff;
  text-align: center;
  padding: 1.5mm 22mm 1.4mm;
  position: relative;
  border-bottom: .9mm solid var(--rpt-red-dk);
}
.rpt-head-bar h1 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  text-transform: uppercase;
}
.rpt-head-bar h2 {
  margin: .3mm 0 0;
  font-size: .95em;
  font-weight: 400;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .02em;
}
.rpt-head-since {
  position: absolute; right: 2.6mm; top: 1.9mm;
  font-size: 0.8em; font-style: italic; color: rgba(255, 255, 255, .85);
}

.rpt-head-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3mm;
  background: var(--rpt-band);
  border-bottom: .75pt solid var(--rpt-line-dk);
  padding: .75mm 2.4mm;
}
.rpt-head-page { font-size: 0.8em; color: var(--rpt-ink-soft); white-space: nowrap; }
.rpt-head-term {
  font-size: .85em; font-style: italic; color: var(--rpt-slate);
  text-align: center; flex: 1 1 auto;
}
.rpt-head-month {
  font-size: 1.05em; font-weight: 700; letter-spacing: .06em;
  color: var(--rpt-red-dk); white-space: nowrap;
}

/* ---------------------------------------------------------- section titles -- */

.sec-title {
  background: var(--rpt-slate);
  color: #fff;
  border: none;
  border-left: 3pt solid var(--rpt-red);
  font-weight: 700;
  font-size: 1.059em;
  letter-spacing: .05em;
  padding: 1.05mm 2.2mm;
  margin: 3mm 0 1.4mm;
  text-transform: uppercase;
  break-after: avoid;
  page-break-after: avoid;
}
.sheet > .sec-title:first-of-type { margin-top: 0; }

.sub-title {
  font-weight: 700;
  font-size: 1.0em;
  margin: 2mm 0 1mm;
  color: var(--rpt-red-dk);
  letter-spacing: .02em;
  border-bottom: .75pt solid var(--rpt-red);
  padding-bottom: .4mm;
  break-after: avoid;
  page-break-after: avoid;
}

.inline-kv { font-size: 1.0em; margin: 0 0 1.2mm; }

/* ------------------------------------------------------------------ grids -- */

table.grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 1.5mm;
  /* a defined outer edge, hairlines within — the table reads as one object */
  border: .75pt solid var(--rpt-line-dk);
}
table.grid th,
table.grid td {
  border: .5pt solid var(--rpt-line);
  padding: .32em .5em;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
}
table.grid thead th {
  background: var(--rpt-band);
  color: var(--rpt-slate);
  font-weight: 700;
  font-size: 0.941em;
  text-align: left;
  letter-spacing: .02em;
  /* the red keel under every header ties each table back to the masthead */
  border-bottom: 1pt solid var(--rpt-red);
}

/* Banding carries the eye across wide rows. The traffic light and the tracker
   colour their own rows by status, so they opt out rather than fight it. */
table.grid.tight:not(.mtl):not(.tracker) tbody tr:nth-child(even) td {
  background: var(--rpt-zebra);
}
table.grid.tight th,
table.grid.tight td { padding: .24em .42em; font-size: 0.941em; }

/* Figures line up column-wise: equal-width digits and a right edge. */
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.ctr, table.grid th.ctr { text-align: center; }
table.grid td.strong { font-weight: 700; }

/* Single-line rows read better centred in the cell; blocks of prose stay
   top-aligned so wrapped lines start level with their label. */
table.grid.tight th, table.grid.tight td { vertical-align: middle; }
table.grid.kv th, table.grid.kv td { vertical-align: middle; }
table.grid.issues th, table.grid.issues td { vertical-align: middle; }
table.grid.sign th, table.grid.sign td { vertical-align: middle; }
table.grid tr.blank td { height: 4.2mm; }
/* The totals line is the row people look for first, so it is the one place on
   a data table that gets brand colour. */
table.grid tr.total td,
table.grid tr.total th {
  font-weight: 700;
  background: var(--rpt-red-tint);
  color: var(--rpt-red-dk);
  border-top: 1pt solid var(--rpt-red);
}
/* A figure below zero is a fact worth seeing at a glance. */
#print-root .neg { color: var(--rpt-bad); font-weight: 700; }

/* key/value blocks (business value, recognition, membership counts) */
table.grid.kv th {
  width: 62%;
  font-weight: 600;
  background: #f4f6fa;
  color: var(--rpt-slate);
  text-align: left;
}
table.grid.kv td { text-align: left; }
/* The figure is the payload of a key/value row: give it size and weight so it
   carries across the page from its label. */
table.grid.kv td.num,
table.grid.kv td.ctr {
  font-weight: 700;
  font-size: 1.06em;
  color: var(--rpt-slate);
  font-variant-numeric: tabular-nums;
  background: #fff;
}
table.grid.kv td.num { text-align: right; }
table.grid.kv td.ctr { text-align: center; }

/* membership-issue name grid */
table.grid.issues th.issue-label {
  width: 24%; background: #f4f6fa; color: var(--rpt-slate); font-weight: 700;
}
table.grid.issues td { width: 19%; }

/* action-plan blocks */
table.grid.plan th { background: #f4f6fa; color: var(--rpt-slate); font-weight: 700; text-align: left; }
table.grid.plan { margin-bottom: 2mm; break-inside: avoid; page-break-inside: avoid; }

.concern-list { margin: 0; padding-left: 4.5mm; }
.concern-list li { margin-bottom: .6mm; }

/* A callout, not a leftover: the amber keel marks it as a remark on the table
   above rather than more of the same data. */
.note-block {
  border: .5pt solid #e8dcbd;
  border-left: 2.5pt solid #d9a531;
  padding: 1mm 1.8mm;
  margin-bottom: 1.5mm;
  font-size: 0.941em;
  background: var(--rpt-warn-bg);
  color: #4a3c1c;
}

/* The last line of the report is the next commitment — it gets the red bar. */
.next-meeting {
  margin-top: 3mm;
  background: var(--rpt-red);
  color: #fff;
  border: none;
  padding: 1.2mm 2mm;
  font-weight: 700;
  font-size: 1.0em;
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- column layout -- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4mm;
  align-items: start;
}
.two-col.gap { gap: 0 4mm; margin-top: 1.5mm; }
.mentor-block { break-inside: avoid; page-break-inside: avoid; }

/* ---------------------------------------------------------- traffic light -- */

/* Colours follow the chapter's MTL workbook: green 70+, yellow 50-69,
   red 30-49, grey below 30. Tinted so 28 rows stay legible on one A4 page,
   with a saturated bar down the leading edge so a band can be picked out
   from across the table without reading a single number. */
.mtl tbody tr td:first-child { border-left-width: 2.5pt; border-left-style: solid; }
.mtl tr.tl-green  td { background: #dcefc6; }
.mtl tr.tl-green  td:first-child { border-left-color: #3f8f2f; }
.mtl tr.tl-yellow td { background: #fdf1bd; }
.mtl tr.tl-yellow td:first-child { border-left-color: #d9a531; }
.mtl tr.tl-red    td { background: #f9cdc9; }
.mtl tr.tl-red    td:first-child { border-left-color: var(--rpt-red); }
.mtl tr.tl-grey   td { background: #e0e2e6; }
.mtl tr.tl-grey   td:first-child { border-left-color: #7b8290; }

/* The score is what the whole table exists to produce. */
.mtl .total-col { background: rgba(0, 0, 0, .09); font-weight: 700; }
.mtl thead th.total-col { background: var(--rpt-slate); color: #fff; }

.mtl { font-size: 0.824em; }
.mtl td, .mtl th.num { font-variant-numeric: tabular-nums; }
.mtl th, .mtl td { vertical-align: middle; }
.mtl th, .mtl td { padding: .22em .38em; }
.mtl thead tr.sub th { font-size: .93em; font-weight: 600; }
.mtl .pt-col { background: rgba(0, 0, 0, .055); width: 5.4%; }
.mtl thead th.pt-col { background: var(--rpt-slate-lt); color: #fff; }
.mtl .pt { font-weight: 700; }
.mtl tbody td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Legend and the two band tables sit in one strip across the sheet, so the
   member table keeps the vertical space. */
.mtl-footer {
  display: flex;
  gap: 4mm;
  align-items: flex-start;
  margin-top: 2mm;
}
.mtl-footer .legend { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.mtl-footer .bands { flex: 1 1 0; margin-top: 0; }

.bands { font-size: 0.824em; margin-top: 1.5mm; }
.bands thead th { font-size: .93em; }
.bands th, .bands td { padding: .2em .35em; }

.legend { font-size: 0.882em; margin-top: 2mm; }
.legend .chip {
  display: inline-block;
  width: 3.5mm;
  height: 3.5mm;
  border: .5pt solid var(--rpt-line);
  vertical-align: -.5mm;
  margin-right: .5mm;
}
.legend .chip.tl-green  { background: #dcefc6; border-left: 1.5pt solid #3f8f2f; }
.legend .chip.tl-yellow { background: #fdf1bd; border-left: 1.5pt solid #d9a531; }
.legend .chip.tl-red    { background: #f9cdc9; border-left: 1.5pt solid var(--rpt-red); }
.legend .chip.tl-grey   { background: #e0e2e6; border-left: 1.5pt solid #7b8290; }

.gen-stamp { font-size: 0.765em; color: #666; margin-top: 1.5mm; font-style: italic; }

/* ------------------------------------------------------------ sign-off box -- */

/* Unsigned it is a form to fill in; signed it is a record. The two should not
   look alike at a glance. */
.grid.sign { margin-top: 3mm; border: .75pt solid var(--rpt-line-dk); }
.grid.sign th { background: #f4f6fa; color: var(--rpt-slate); font-weight: 700; text-align: left; }
.grid.sign td { height: 5mm; }
.grid.sign.approved { border: 1.5pt solid var(--rpt-good); }
.grid.sign.approved th { background: var(--rpt-good-bg); color: var(--rpt-good); }
.grid.sign.approved td { background: #f4fbf7; color: var(--rpt-good); }

/* ------------------------------------------------------ action plan tracker -- */

.tracker { font-size: 0.882em; }
.tracker th, .tracker td { padding: .26em .44em; vertical-align: top; }
/* Status reads down the leading edge, the same trick as the traffic light. */
.tracker tbody tr td:first-child { border-left-width: 2.5pt; border-left-style: solid; border-left-color: var(--rpt-line-dk); }
.tracker tr.ap-done td      { background: var(--rpt-good-bg); }
.tracker tr.ap-done td:first-child     { border-left-color: var(--rpt-good); }
.tracker tr.ap-dropped td   { background: #f0f1f3; color: #5c6373; }
.tracker tr.ap-dropped td:first-child  { border-left-color: #9aa1ae; }
.tracker tr.ap-progress td  { background: #e9f0fb; }
.tracker tr.ap-progress td:first-child { border-left-color: #2a5fa8; }
.tracker tr.ap-deferred td  { background: var(--rpt-warn-bg); }
.tracker tr.ap-deferred td:first-child { border-left-color: #d9a531; }
.tracker tr.ap-open td:first-child     { border-left-color: var(--rpt-red); }
.carried { font-size: .85em; color: #666; font-style: italic; }

/* the status tint also marks the plan blocks on page 4 */
.plan.ap-done th    { background: var(--rpt-good-bg); color: var(--rpt-good); }
.plan.ap-dropped th { background: #f0f1f3; color: #5c6373; }

/* ------------------------------------------------- region growth appendix -- */

.growth-print { break-inside: avoid; page-break-inside: avoid; margin-bottom: 2mm; }
.growth-print .growth-chart { width: 100%; height: auto; display: block; }
.growth-print .chart-legend {
  display: flex; flex-wrap: wrap; gap: 0 5mm;
  font-size: 0.941em; margin-bottom: 1mm;
}
.growth-print .chart-legend .lg { display: inline-flex; align-items: center; gap: 1mm; }
.growth-print .chart-legend i { width: 2.5mm; height: 2.5mm; display: inline-block; }
.growth-print .grid { stroke: #dcdcdc; stroke-width: 1; }
.growth-print .axis { stroke: #9a9a9a; stroke-width: 1; }
.growth-print .zero { stroke: #6f6f6f; stroke-width: 1; }
.growth-print .tick { fill: #555; font-size: 10px; }
.growth-print .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.growth-print .dot { stroke: #fff; stroke-width: 2; }
.growth-print .direct { fill: #333; font-size: 10px; font-weight: 600; }

/* Scoped to the printed document: the same class is used by the on-screen
   table in the editor, which must keep its own screen sizing. */
#print-root .growth-table { width: 100%; border-collapse: collapse; font-size: 0.882em; table-layout: fixed; }
#print-root .growth-table.by-period th:first-child { width: 14%; }
#print-root .growth-table tr.total th,
#print-root .growth-table tr.total td {
  background: var(--rpt-red-tint); color: var(--rpt-red-dk); font-weight: 700;
  border-top: 1pt solid var(--rpt-red);
}
#print-root .growth-table th,
#print-root .growth-table td { border: .5pt solid var(--rpt-line); padding: .26em .44em; }
#print-root .growth-table thead th {
  background: var(--rpt-band); color: var(--rpt-slate); font-weight: 700;
  border-bottom: 1pt solid var(--rpt-red);
}
#print-root .growth-table tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
#print-root .growth-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#print-root .growth-table .swatch { width: 2mm; height: 2mm; display: inline-block; margin-right: 1mm; }
#print-root .growth-table .up { color: #14653f; font-weight: 700; }
#print-root .growth-table .down { color: #a3231c; font-weight: 700; }

/* =============================================================== printing == */

/* ONE page size for the whole document.
   Mixing @page sizes (a landscape appendix among portrait pages) makes the
   print pipeline lay every page out at the widest page and then shrink the
   whole document to fit the paper — which silently scaled the report to 75%
   and left a third of every sheet blank. The landscape page is achieved by
   rotating its content instead; see .land-rotate. */
@page {
  size: A4 portrait;
  margin: 8mm;
}

@media print {
  html, body { background: #fff; margin: 0; padding: 0; }

  /* Everything but the report is hidden. #layout is the report's parent, so it
     is unwrapped rather than hidden — the chrome inside it goes instead. */
  #topbar, #sidebar, #editor, #save-bar, #toasts, #gate, .no-print { display: none !important; }

  #layout {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  #print-view {
    display: block !important;
    position: static !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: #fff;
  }
  #print-scroll { overflow: visible !important; }

  /* The on-screen fit-to-pane scaling must never reach the printer. Both the
     transform AND the height fitPreview() sets inline have to be overridden —
     an inline height here would constrain pagination and leave blank space. */
  #print-root {
    padding: 0;
    display: block;
    gap: 0;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
  }

  .sheet {
    --sheet-pad: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }

  /* keep the banded headers and traffic-light colours on paper */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  table.grid { break-inside: auto; }
  table.grid tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
}