/* ═══════════════════════════════════════════════════════════════════════════
   oversight.css — portfolio, compliance, syndication, the month-end pack.

   Three things live here and nothing else:
     1. the proportion bar (a distribution drawn as one track),
     2. the KPI grid rules that stop a lone tile sitting on its own row,
     3. the document layout the month-end pack and the syndicator statement use.

   Every colour is a token from the theme; no hex, no gradient, no colour that
   carries meaning without a word beside it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KPI grid ───────────────────────────────────────────────────────────────
   app-ext.css puts .kpis into a two-column grid below 600px, which leaves an
   odd last tile alone on its own row. These cards size their own columns and
   let the odd tile span the width instead. */
.kpis-auto .kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
@media (max-width:600px){
  .kpis-auto .kpis{grid-template-columns:1fr 1fr}
  .kpis-auto .kpi:last-child:nth-child(odd){grid-column:1 / -1}
}
.kpi-v a{color:inherit; text-decoration:none}
.kpi-v a:hover{text-decoration:underline}
.kpi-v a:focus-visible{box-shadow:var(--focus-ring); border-radius:4px}

/* ── proportion bar ─────────────────────────────────────────────────────────
   One track, one segment per group, in share order. The accent names the
   largest group and the greys are everything else — never a rainbow, because a
   segment's colour must not be the only thing that says which group it is. The
   table beside it carries the same numbers, which is why the bar itself is
   aria-hidden. */
.prop{display:flex; flex-direction:column; gap:6px}
.prop-t{position:relative; display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-2, #f2f2f7)}
.prop-t i{display:block; height:100%; min-width:1px}
.prop-t i.lead{background:var(--accent, #007AFF)}
.prop-t i.over{background:var(--bad, #C41E14)}
.prop-t i.rest{background:var(--ink-3, #6E6E73); opacity:.45}
.prop-t i.rest + i.rest{opacity:.30}
.prop-t i.rest + i.rest + i.rest{opacity:.22}
.prop-t i + i{border-left:1px solid var(--surface, #fff)}
.prop-m{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--label, #1d1d1f); opacity:.75}
.prop-s{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3, #6E6E73)}

/* A bar inside a table cell is a share of a row, not a card-wide distribution. */
.t td > .prop{min-width:90px}
.t td > .prop .prop-t{height:8px}

.chart-note{font-size:11.5px; margin:6px 0 0}

/* ── document pages ─────────────────────────────────────────────────────────
   The month-end pack and the syndicator statement are documents, not screens:
   no rail, no tab bar, one column, and each section starts on its own sheet
   when it is printed. print.css owns the paper reset; this is the on-screen
   shape of the same page. */
.doc{max-width:900px; margin:0 auto; padding:28px 20px 64px}
.doc-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:1px solid var(--hair, #d2d2d7); padding-bottom:14px; margin-bottom:20px}
.doc-head h1{margin:0 0 4px; font-size:22px; letter-spacing:-.02em}
.doc-head .sub,.doc-meta{font-size:12px; color:var(--ink-3, #6E6E73)}
.doc-meta{text-align:right; line-height:1.6}
.doc section{margin:0 0 26px}
.doc section > h2{font-size:15px; margin:0 0 8px}
.doc .card{margin:0 0 14px}
.doc-foot{border-top:1px solid var(--hair-2, #e5e5ea); margin-top:22px; padding-top:12px; font-size:11.5px; color:var(--ink-3, #6E6E73)}

@media print{
  html body .doc{max-width:none; padding:0}
  /* print.css turns every grid into a block, which is right for a screen layout
     printed on paper but wastes a whole sheet on five numbers. A KPI strip
     inside a document keeps its columns. */
  html body .doc .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
  html body .doc .kpi{break-inside:avoid; page-break-inside:avoid}
  html body .doc section{break-inside:avoid; page-break-inside:avoid}
  html body .doc section + section{break-before:page; page-break-before:always}
  html body .doc .no-print{display:none!important}
}

/* ── compliance triage ──────────────────────────────────────────────────────
   The alert feed gains a selection column, so it needs the same row shape the
   list kit uses. */
.feed .pick-l{align-self:start; padding-top:2px}
.ack-bulk{padding:0 16px 12px}