/* ================= THE OKR REPORT VIEW — SCREEN AND PRINT =================

   JS/features/okr-report-view.js's markup: action bar, header, chips, summary
   tiles, health badges, owned/contributed sections, footer. Nothing here
   duplicates a shared primitive — every value comes from `--a-*` tokens or a
   component this sheet EXTENDS rather than redraws (`.a-chip`, `.a-stat`,
   `.a-okr-pill`, `.a-okr-row`, `.a-okr-krrow`, `.a-okr-group`, `.a-card`, …). A
   second value for any one of them is the defect core rule 4 exists to avoid.
   No `<table>` anywhere — every tabular-shaped thing is a row-div.

   The one narrow addition: `.okr-report-objrow`. `.a-okr-row` shares a 7-track
   grid built for the full objectives list; this report's row has a different
   four columns (no separate owner/area/trend/updated, plus an owned-count this
   grid has none for). Forcing four cells into seven tracks misaligns them, so
   this class states the report's own four-track grid on the same row/cell
   classes — every cell inside is still the unmodified component.

   Health colour: `st-<stem>` goes on the row and the KR block ONCE each, never
   repeated on the pill/dot/bar nested inside (inherited via `--okr-c`/`--okr-cs`/
   `--okr-ct`). The six summary badges are the one place it sits directly on each
   pill, being independent siblings with no shared ancestor.

   Print: every `[data-kr-list]` is forced visible regardless of `hidden` — rule 2
   of okr-report-view.js's own header, expansion is a screen concern and must
   never change what prints. No black-on-white treatment here on purpose; this
   page prints as itself until the dedicated print stage exists. */

.okr-report-view{
  display:flex; flex-direction:column; gap:var(--a-5); min-width:0;
  padding-top:var(--a-2);
}

/* ---------- the action bar ----------
   Sticky, the same `top:0`/`--z-sticky` treatment the board's own pinned header
   uses — the same scroll root, so it needs no offset of its own. */
.okr-report-actions{
  position:sticky; top:0; z-index:var(--z-sticky);
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap;
  padding:var(--a-2) 0; margin:0 0 var(--a-2);
  background:var(--a-bg); border-bottom:1px solid var(--a-line-soft);
}
.okr-report-actions .a-spacer{ flex:1 1 auto; }

/* ---------- header ---------- */
.okr-report-head{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.okr-report-head h1{
  margin:0; font:700 22px/1.25 var(--a-display); color:var(--a-text); overflow-wrap:anywhere;
}
.okr-report-email{ margin:0; font-size:13px; color:var(--a-dim); overflow-wrap:anywhere; }
.okr-report-range{ margin:2px 0 0; font-size:13px; font-weight:600; color:var(--a-dim); }

/* ---------- chips ---------- */
.okr-report-chips{ display:flex; flex-direction:column; gap:var(--a-2); min-width:0; }
.a-okr-chips.okr-report-qchips,
.a-okr-chips.okr-report-tchips{ display:flex; flex-wrap:wrap; gap:6px; }
.okr-report-spans{ margin:0; }
.okr-report-unplaced{ margin:0 0 var(--a-2); }

/* ---------- summary ---------- */
.okr-report-summary{ display:flex; flex-direction:column; gap:var(--a-3); min-width:0; }
/* Four across, same tile as everywhere else — only the column count differs
   from the shared 3-up default, since this strip always holds exactly four. */
.okr-report-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:720px){
  .okr-report-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.okr-report-bands{ display:flex; flex-wrap:wrap; gap:6px; }
.okr-report-band-n{ font-weight:700; font-variant-numeric:tabular-nums; }
/* The badges became buttons — the board's own status drill-down, reused rather
   than restated. `.a-okr-pill` carries no interactive affordance elsewhere, so
   this adds a pointer cursor, a focus ring, and the same "selected" wash
   `.okr-stat.active`/`.a-chip.on` use — never the pill's own status colour,
   which stays "what this represents" rather than "what is selected". Scoped to
   `.okr-report-bands` so a static `.a-okr-pill` elsewhere is untouched.

   `font` is not reset here, deliberately: `font:inherit` on this more-specific
   selector would defeat the pill's own `font` shorthand rather than only the
   user agent's, since an author rule beats the UA button font at any specificity. */
.okr-report-bands button.a-okr-pill{ cursor:pointer; }
.okr-report-bands button.a-okr-pill:hover{ border-color:var(--a-line-strong); }
.okr-report-bands button.a-okr-pill:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
.okr-report-bands button.a-okr-pill.on{
  border-color:var(--a-blue); background:var(--a-blue-soft); color:var(--a-blue-text);
}

/* ---------- the filter bar — "the standard format", the board's own Clear all ---------- */
.okr-report-filterbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--a-2); min-width:0;
}
.okr-report-filterbar p{ margin:0; }

/* ---------- sections ---------- */
.okr-report-sec{ display:flex; flex-direction:column; gap:var(--a-3); min-width:0; }
.okr-report-sec h2{
  margin:0; font:700 15px/1.3 var(--a-display); color:var(--a-text);
  border-bottom:1px solid var(--a-line); padding-bottom:6px;
}
/* `.a-okr-group*` used statically — no `.collapsed` class is ever applied here. */
.a-okr-group + .a-okr-group{ margin-top:var(--a-2); }

/* ---------- an objective row, owned ---------- */
.okr-report-unit{ display:flex; flex-direction:column; min-width:0; }
.okr-report-unit + .okr-report-unit{ margin-top:2px; }
/* The one narrow addition — see the file header. Four tracks: title (flexible),
   health pill, progress, owned-count. */
.okr-report-objrow.a-okr-row{
  grid-template-columns:minmax(0,1fr) auto minmax(140px, 200px) auto;
}
.okr-report-owned-n{ color:var(--a-faint); text-align:right; }
/* ---------- "Pushed twice" — the date-movement indicator ----------
   `.a-chip` does all the work — no second chip, no new colour, no new token —
   which is also what makes it print: nothing in it carries meaning in a hue, so
   CSS/okr-report-print.css's ink-on-white `.a-chip` is the identical mark. The
   one declaration it needs is a flex basis, so a chip beside a long title is
   not allowed to shrink below its text. */
.okr-report-push{ flex:0 0 auto; }
.okr-report-krlist{ padding:6px 0 var(--a-2) 34px; }
/* Pushes the owner avatar to the far end without an `.a-spacer` sibling — a
   spacer here would split the row's free space evenly with the title
   (`.a-okr-t{flex:1 1 0}`), clipping it at phone width; `margin-left:auto`
   needs no spacer element and leaves the title everything else unused. */
.okr-report-krrow-av{ margin-left:auto; }

/* ---------- contributed — a parent objective, then only the reader's own key results ---------- */
.okr-report-parent{ padding:var(--a-3); display:flex; flex-direction:column; gap:6px; min-width:0; }
.okr-report-parent-h{ margin:0; display:flex; flex-direction:column; gap:2px; min-width:0; }
.okr-report-parent + .okr-report-parent{ margin-top:var(--a-2); }
.a-okr-group-b > .okr-report-parent:first-child{ margin-top:0; }

/* ---------- area breakdown — row-divs, never a table ---------- */
.okr-report-arealist{ display:flex; flex-direction:column; min-width:0; }
.okr-report-arearow{
  display:flex; align-items:center; gap:var(--a-3); min-width:0;
  padding:8px var(--a-2); border-bottom:1px solid var(--a-line-soft);
}
.okr-report-arearow:last-child{ border-bottom:0; }
.okr-report-arearow > .nm{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--a-text); font-size:12.5px;
}
.okr-report-arearow > .a-okr-num{ flex:0 0 auto; min-width:52px; text-align:right; }

/* ---------- footer ---------- */
.okr-report-foot{ padding-top:var(--a-2); border-top:1px solid var(--a-line-soft); }
.okr-report-foot .a-okr-lbl{ text-transform:none; letter-spacing:0; font-weight:400; }

/* ---------- empty / denied ---------- */
.okr-report-empty,
.okr-report-denied{ margin:var(--a-3) 0; }
.okr-report-busy{ padding:var(--a-4) 0; }

/* ---------- the run dialog (JS/features/okr-report-dialog.js) ----------

   Drawn through `okrFlowOpen()` into the same shared card okr-export.css's own
   dialog block styles; `CSS/okr-report-card.css` is the one stylesheet both
   surfaces load (Definition of Done 4d/4e — a cross-lane requirement closed
   explicitly rather than assumed). Same discipline as okr-export.css's dialog
   block: a fallback value on every token (`var(--a-2, 8px)`), because this sheet
   must be correct on a host whose suite tokens have not resolved. */
.okr-report-section{
  display:flex; flex-direction:column; gap:var(--a-2, 8px); min-width:0;
}
.okr-report-section + .okr-report-section{
  padding-top:var(--a-3, 12px); margin-top:var(--a-2, 8px);
  border-top:1px solid var(--a-line, var(--border, #d8dde5));
}
.okr-report-section > p{ margin:0; }

/* The lock — a plain member's "Run for" field carries this beside the label,
   aria-hidden, since the disabled field's own hint already says why in words.
   14px matches every other small inline glyph in the suite. */
.okr-report-lock{
  display:inline-flex; align-items:center; vertical-align:middle;
  color:var(--a-faint, var(--text-faint, #8a94a6));
}
.okr-report-lock svg{ width:14px; height:14px; display:block; }

/* The presets — a row of already-dressed `.a-btn`/`.a-btn.on` toggles; only the
   row's own rhythm was missing. */
.okr-report-presets{ display:flex; flex-wrap:wrap; gap:var(--a-2, 8px); }

/* From/to — two `.a-field`s side by side, each free to shrink; stacked below. */
.okr-report-dates{
  display:flex; flex-wrap:wrap; gap:var(--a-3, 12px); align-items:flex-start;
}
.okr-report-dates > .a-field{ flex:1 1 160px; min-width:0; }

/* The quarter grid's own mount — the trigger and popover it draws are lane A's
   (CSS/okr-quarter-grid.css); this is only the slot it is born into. */
.okr-report-grid-mount{ min-width:0; }

/* The live count strip, every figure through `--a-mono` like every other count
   in the suite. The separator is `.okr-report-count-sep`, a real span rather
   than a generated `::before` — okrReportDialogPaintCounts() always inserts
   one between every pair of count spans, so no `+`-combinator rule can ever
   fire here; `_docs/tests/okr-report-count-sep-check.py` asserts that.
   `color`/`font-size:inherit` below is a deliberate no-op restating what
   already inherits from `.okr-report-counts`, as a documented contract. */
.okr-report-counts{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--a-2, 8px);
  font-size:12px; color:var(--a-dim, var(--text-dim, #5b6472));
}
.okr-report-count{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.okr-report-count-sep{ color:inherit; font-size:inherit; }
.okr-report-count b{
  font-family:var(--a-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--a-text, var(--text, #10151d));
}

@media (max-width:480px){
  .okr-report-dates{ flex-direction:column; }
  .okr-report-dates > .a-field{ flex-basis:auto; width:100%; }
}

/* ---------- print ----------
   Rule 2, in CSS: every key-result list forced visible regardless of `hidden` —
   the DOM never differs between screen and print, only what is shown.
   `!important` because the UA's own `[hidden]{display:none!important}` outranks
   anything weaker. */
@media print{
  .okr-report-actions{ display:none; }
  [data-kr-list][hidden]{ display:block !important; }
  /* The sentence prints, the button does not — "Filtered to: Behind" is content
     the page still needs; "Clear all" has nothing to act on once printed. */
  #okrReportClearFilter{ display:none; }
}

/* ---------- responsive — phone width ---------- */
@media (max-width:520px){
  .okr-report-actions{ gap:var(--a-1, 4px); }
  .okr-report-objrow.a-okr-row{ grid-template-columns:minmax(0,1fr); row-gap:6px; }
  .okr-report-owned-n{ text-align:left; }
  .okr-report-krlist{ padding-left:var(--a-4); }
}