/* ================= THE INDIVIDUAL REPORT CARD — PRINT STAGE, THE PAPER DELTA =================

   JS/features/okr-report-print.js's markup: the on-screen setup panel (dark,
   native to the suite) and the printed/previewed document's ink-on-white
   presentation. Two documents read this file: the isolated `<iframe>` the setup
   panel previews in, loading only this stylesheet, and the staged document the
   real print job builds inside the main page (still under real `@media print`,
   still getting CSS/alt/alt-okrs.css §11's print treatment for free).

   The ink-on-white ruleset below is unconditional, not inside `@media print`:
   the owner's directive was that the preview become an `<iframe>` so it can
   actually look like what will print, "instead of the entire page." An
   `<iframe>`'s `srcdoc` document renders on an ordinary screen, where neither
   `@media print` nor `.alt-app .a-okr-print …` ever matches — so a ruleset gated
   on either is invisible to it. `.okr-report-print` appears nowhere else in the
   application, so making it unconditional cannot leak onto any live screen.

   Which means this file owns full component rules, not deltas: `.a-okr-table`,
   `.a-okr-pill` etc. used to arrive dressed by alt-okrs.css's base rules with
   only a print delta here. The iframe cannot reach that base at all, so each
   gets a complete rule here, scoped to `.okr-report-print`. On the real print
   path this is harmless duplication — alt-okrs.css's more specific selector
   simply wins where both apply.

   The panel is dark-native, `--a-*` tokens throughout. No new colour anywhere:
   the ink palette (#000/#333/#999/#ccc/#fff) is the same literal print palette
   alt-okrs.css §11 established, since paper is not tokenised in this design
   system. Typography: 11pt body, 9pt captions, the same floor CSS/okr-export.css
   states, for the same reason — an executive report read by people who did not
   choose the size.

   No `size:` in `@page`, removed on the owner's own instruction: this file used
   to switch between a Letter default and a named A4 page via a `<select>`. His
   words: "remove the paper option. The user can define that within the printer
   dialog. This is not needed" — the browser's own dialog already offers paper
   size (core rule 4: one canonical answer per question).

   `@page` now states only the margin, the same 16mm/14mm CSS/okr-export.css's
   own rule uses — binder-safe on both A4 and US Letter, so leaving `size:` unset
   is correct, not an oversight. `@page` stays inside `@media print`: it has no
   effect on an iframe.

   The preview still needs a width with no paper choice to derive one from — it
   is fixed at 816px (US Letter at 96dpi, the wider of the two common sizes),
   framing only. Nothing in the preview or the printed document ever says
   "Letter" or "A4" anywhere a reader can see it. */

/* ---------- on screen: the panel host ---------- */
.okr-report-print-panel{
  display:flex; flex-direction:column; gap:var(--a-3);
  min-width:0; padding-top:var(--a-2);
}
.okr-report-print-head{
  display:flex; flex-direction:column; gap:var(--a-2); min-width:0;
  padding-bottom:var(--a-2); border-bottom:1px solid var(--a-line-soft);
}
.okr-report-print-head .a-btn{ align-self:flex-start; }
.okr-report-print-head .a-hint{ margin:0; max-width:70ch; }

.okr-report-print-body{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:var(--a-4); min-width:0;
  align-items:start;
}
.okr-report-print-controls{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  position:sticky; top:var(--a-2);
}
.okr-report-print-controls > .a-okr-lbl:not(:first-child){ margin-top:var(--a-2); }
.okr-report-print-controls > select.a-input{ margin:0 0 2px; }
.okr-report-print-actions{
  display:flex; flex-direction:column; gap:8px; margin-top:var(--a-3);
  padding-top:var(--a-3); border-top:1px solid var(--a-line-soft);
}

/* ---------- the preview — an <iframe>, sized and framed like a sheet of paper ----------

   The wrap fills whatever width the grid column gives it and centres the sheet
   inside that space, rather than stretching edge-to-edge or sitting cramped in
   a fixed box. The frame is a fixed, generic page-width (816px) — framing only,
   never a claim about what will print; the reader picks the sheet size in their
   own print dialog. `--a-shadow-sm` is the existing elevation token, reused. */
.okr-report-print-previewwrap{
  display:flex; justify-content:center; align-items:flex-start;
  min-width:0; padding:var(--a-4);
  border:1px solid var(--a-line); border-radius:var(--a-r);
  background:var(--a-raised);
  overflow:auto; max-height:calc(100vh - 200px);
}
.okr-report-print-sheet{
  display:block; flex:0 0 auto;
  width:816px; max-width:100%;
  height:calc(100vh - 260px); min-height:520px;
  border:0; border-radius:2px; background:#fff;
  box-shadow:var(--a-shadow-sm);
}

/* ---------- responsive — phone width: controls stack above the preview ---------- */
@media (max-width:760px){
  .okr-report-print-body{ grid-template-columns:minmax(0,1fr); }
  .okr-report-print-controls{ position:static; }
  .okr-report-print-previewwrap{ padding:var(--a-3); max-height:calc(100vh - 260px); }
  .okr-report-print-sheet{ width:100%; height:calc(100vh - 320px); min-height:420px; }
}


@media print{

  /* The page margin — no `size:`, on the owner's own instruction (see header).
     16mm/14mm is CSS/okr-export.css's own binder-safe margin, reused verbatim. */
  @page{
    margin:16mm 14mm;
    @bottom-right{ content:"Page " counter(page) " of " counter(pages); font-size:8pt; color:#333; }
  }

  /* The panel's own chrome never prints — belt to the braces that only the
     staged document is ever unhidden for print. */
  .okr-report-print-panel{ display:none !important; }
}

/* ================= THE DOCUMENT ITSELF — UNCONDITIONAL, SELF-CONTAINED, INK ON WHITE =================

   Read by the iframe (always, on an ordinary screen) and by the staged print
   document. `.okr-report-print` and everything under it is reachable from no
   other part of the application. */

.okr-report-print-page{ margin:0; background:#fff; color:#000; }

.okr-report-print{
  display:block; max-width:none;
  font-family:var(--a-body, -apple-system, sans-serif); font-size:11pt; line-height:1.4;
  color:#000; background:#fff;
}
/* The page margin, on screen only — `@page` above already reserves it on real
   paper; adding it again as padding would double it on an actual printed page. */
@media screen{
  .okr-report-print{ padding:16mm 14mm; }
}

/* ---------- the running frame — layer 1, identity that survives every real page ----------
   `<thead>`/`<tfoot>` repeat as a running header/footer across real pages; on
   screen, inside one continuously-scrolling preview, they simply render once. */
/* `table-layout:fixed` unconditionally — an auto-layout table sizes itself from
   its cells' content regardless of `width:100%`, and this table's one `<td>` per
   row was growing past its box at narrow widths. Fixed makes the table's own
   width the authority, so the header text wraps instead. */
.okr-report-print .okr-report-print-frame{
  width:100%; table-layout:fixed; border-collapse:collapse;
}
@media print{
  .okr-report-print .okr-report-print-frame > thead{ display:table-header-group; }
  .okr-report-print .okr-report-print-frame > tfoot{ display:table-footer-group; }
}
/* `flex-wrap:wrap` and `min-width:0` on the two spans — a flex item otherwise
   refuses to shrink below its text's unwrapped width, forcing the whole
   document wider than its own box at narrow widths. */
.okr-report-print-runhead{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2pt 10pt; align-items:baseline;
  padding:0 0 4pt; margin:0 0 8pt; border-bottom:1px solid #000;
  font-size:9pt; font-weight:700; color:#000; letter-spacing:.02em;
}
.okr-report-print-runhead > span{ min-width:0; overflow-wrap:anywhere; }
.okr-report-print-runfoot{
  padding:4pt 0 0; margin:8pt 0 0; border-top:1px solid #999;
  font-size:8pt; color:#333;
}

/* ---------- the identity block, page one ---------- */
.okr-report-print-id{ break-inside:avoid; page-break-inside:avoid; margin:0 0 12pt; }
.okr-report-print-id .a-okr-lbl{ font-size:9pt; }
.okr-report-print-id h1{ margin:2pt 0 4pt; font-size:20pt; line-height:1.2; font-weight:700; color:#000; }
.okr-report-print-email{ margin:0; font-size:10pt; color:#333; }
.okr-report-print-facts{
  margin:8pt 0 0; display:grid; gap:3pt 16pt;
  grid-template-columns:repeat(auto-fit, minmax(150pt, 1fr));
}
.okr-report-print-facts > div{ display:flex; gap:6pt; align-items:baseline; break-inside:avoid; }
.okr-report-print-facts dt{
  margin:0; font-size:9pt; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#333;
}
.okr-report-print-facts dd{ margin:0; font-size:10pt; color:#000; overflow-wrap:anywhere; }

/* ---------- section rhythm — a heading that ends a page is a heading for nothing ---------- */
.okr-report-print-sec{ margin:0 0 12pt; }
.okr-report-print .a-okr-group-h{ margin:0; break-after:avoid; page-break-after:avoid; }
.okr-report-print h2{
  margin:0 0 5pt; font-size:13pt; line-height:1.25; font-weight:700; color:#000;
  border-bottom:1px solid #000; padding-bottom:3pt;
}
.okr-report-print h4{ margin:0; font-size:10.5pt; line-height:1.3; font-weight:700; color:#000; }
.okr-report-print .a-okr-lbl{
  font:700 9pt/1.4 var(--a-body, sans-serif); letter-spacing:.08em; text-transform:uppercase;
  color:#333; margin:0;
}
.okr-report-print-fig{ font-size:13pt; font-weight:700; }

/* ---------- a-okr-num — the shared figure class, everywhere it appears ---------- */
.okr-report-print .a-okr-num{
  font-family:var(--a-mono, monospace); font-variant-numeric:tabular-nums; color:#000;
}

/* ---------- a-okr-pill — health as a bordered TEXT label, never a filled colour badge ----------
   Fully self-contained — the isolated iframe never reaches alt-okrs.css's pill
   rule, so this is complete, not a delta; on the real print path alt-okrs.css's
   more specific selector wins where both apply, so paper is unaffected. */
.okr-report-print .a-okr-pill{
  display:inline-flex; align-items:center; min-height:14pt; padding:1pt 6pt;
  border-radius:8pt; font:600 8.5pt/1.4 var(--a-body, sans-serif); white-space:nowrap;
  background:#fff; color:#000; border:1px solid #000;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- a-chip — "Pushed twice", and every other plain fact the report states ----------
   The same component the screen draws, translated exactly the way `.a-okr-pill`
   above is: complete, not a delta, for the same reason — the iframe never
   reaches CSS/alt/alt-components.css's base rule, and on the real print path a
   two-class selector outranks it.

   #333 rather than #000, a hairline rather than a full rule, so it stays
   legible without competing with the health pill beside it. No colour carries
   meaning here: the content is its word, so it reads the same photocopied or
   by a reader who cannot tell two hues apart.

   It wraps, the same decision `.a-okr-th` makes: `white-space:nowrap` would
   give its table column a min-content width of the whole unbroken phrase, the
   same mechanism that grew another table past its box. */
.okr-report-print .a-chip{
  display:inline-flex; align-items:center; gap:4pt; min-height:12pt; padding:0.5pt 5pt;
  border-radius:8pt; font:600 8pt/1.35 var(--a-body, sans-serif); white-space:normal;
  background:#fff; color:#333; border:0.5pt solid #666;
  max-width:100%; overflow-wrap:anywhere;
}
/* Separated from the date it is about — `<td>` is not a flex container, so the
   gap must come from the chip itself. */
.okr-report-print .okr-report-print-push{ margin-left:4pt; }

/* ---------- a-okr-tscroll — a screen-only safety net, never a print behaviour ----------
   This document's own table rule never sets `min-width:max-content`, and
   headers are allowed to wrap, so wrapping is the fix for both paper and
   screen; `overflow-x:auto` here is the belt to that braces, screen only —
   paper cannot scroll. */
@media screen{
  .okr-report-print .a-okr-tscroll{ overflow-x:auto; max-width:100%; }
}

/* ---------- tables — the header repeats on real paper, nothing ever scrolls ---------- */
.okr-report-print table.a-okr-table{
  width:100%; min-width:0; table-layout:auto; border-collapse:collapse; margin:3pt 0 0;
}
@media print{
  .okr-report-print table.a-okr-table thead{ display:table-header-group; }
}
/* No `white-space:nowrap` — a nowrap header forces its column to fit the whole
   unbroken phrase regardless of table-layout; alt-okrs.css's base rule keeps
   nowrap for its wide, fixed-width dark board, but a narrow preview or real
   page needs a header allowed to wrap so the table can shrink to fit. */
.okr-report-print .a-okr-th{
  font:700 8pt/1.4 var(--a-body, sans-serif); letter-spacing:.06em; text-transform:uppercase;
  padding:3pt 5pt; text-align:left; color:#333;
  border-bottom:1px solid #000;
}
.okr-report-print .a-okr-tr{ border-bottom:1px solid #ccc; }
.okr-report-print .a-okr-tr:last-child{ border-bottom:0; }
.okr-report-print .a-okr-td{
  font-size:9pt; padding:3pt 5pt; vertical-align:top; overflow-wrap:anywhere; color:#000;
}
.okr-report-print .a-okr-th.num, .okr-report-print .a-okr-td.a-okr-num{ text-align:right; white-space:nowrap; }

/* ---------- objectives — a left rule, never a boxed card, per the brief ----------
   Deliberately not `.a-okr-card`: alt-okrs.css §11 would put `break-inside:
   avoid` on the group, wrong here since an objective taller than a page would
   just get pushed to a fresh one and broken anyway. The heading and its first
   rows are held together instead, via `break-after:avoid` plus the repeating
   `<thead>`. */
.okr-report-print .a-okr-group.okr-report-print-obj{
  display:block; margin:0 0 9pt; padding:0 0 6pt 8pt; border-left:2pt solid #000; border-bottom:0;
}
@media print{
  .okr-report-print .a-okr-group.okr-report-print-obj{ break-inside:auto; page-break-inside:auto; }
}
.okr-report-print-objh{ margin:0 0 3pt; }
.okr-report-print-objmeta{
  display:flex; align-items:center; flex-wrap:wrap; gap:3pt 8pt;
  margin:2pt 0 0; font-size:9pt; line-height:1.4; color:#000;
}
.okr-report-print-meta{ color:#333; }
.okr-report-print-desc{ margin:0 0 3pt; font-size:9.5pt; line-height:1.5; color:#333; max-width:78ch; }

/* ---------- quarter groups — the "page break per quarter" toggle ----------
   Every group past the first in its own section takes the break; the first
   never does, so the identity block is never stranded alone on page one — the
   same `:first-of-type` shape okr-export.css uses for its own per-area break. */
@media print{
  .okr-report-print.pagebreak-quarter .okr-report-print-qgroup{
    break-before:page; page-break-before:always;
  }
  .okr-report-print.pagebreak-quarter .okr-report-print-owned .okr-report-print-qgroup:first-of-type,
  .okr-report-print.pagebreak-quarter .okr-report-print-contributed .okr-report-print-qgroup:first-of-type{
    break-before:auto; page-break-before:auto;
  }
}
.okr-report-print-qh{ margin:0 0 4pt; font-size:9pt; letter-spacing:.08em; color:#333; }

/* ---------- the empty-state sentence (an honest zero is still a report) ---------- */
.okr-report-print .a-okr-empty{ font-size:9.5pt; color:#333; margin:0; }