/* Grant Metrics — scoped styles for the funder-reporting tab.
 *
 * Every selector is prefixed .hub-gm-* (or scoped under .hub-gm) so this file
 * cannot reach anything the rest of the Hub owns. Design tokens come from
 * styles.css; nothing here re-declares a brand colour or a spacing value, so the
 * tab follows the Hub's theme rather than carrying its own.
 *
 * DELIBERATELY SMALL. The page is built from shared furniture that already
 * exists and is already reviewed: .hub-section, .hub-section-head, .hub-card,
 * .hub-metric, .hub-grid-*, .hub-status-banner, .hub-empty, .hub-state-card,
 * .hub-hint and .hub-muted. Re-cutting any of those here would give this one tab
 * a private visual dialect and put it out of step with Insights the first time
 * either changed. What follows is only what has no equivalent: the status badge
 * and the metric-inventory list.
 *
 * No @import and no url() to a remote host: the live CSP is style-src 'self'.
 * For the same reason no value here is ever set from an inline style attribute —
 * an inline style is dropped silently, which would leave a badge reading one
 * thing while its colour said another.
 */

.hub-gm { color: var(--text); }

/* The disclosure block leads the page, so it is set apart from the metric
   sections that follow it rather than reading as the first of them. */
.hub-gm-disclosures { margin-bottom: var(--s5); }

/* --- status badge --------------------------------------------------------- */
/* Sits in a .hub-card-head beside the card title. The four tones are the shared
   status palette, used for their established meanings: teal = available,
   amber = a caveat the reader must accept, blue = informational and planned,
   slate = nothing to say yet. Nothing here is red: a metric the Hub does not
   collect is a known gap in a plan, not a failure of the page. */
.hub-gm-badge {
  flex: none;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hub-gm-badge-ready     { background: var(--ok-bg);     border-color: var(--ok-br);     color: #115e59; }
.hub-gm-badge-partial   { background: var(--warn-bg);   border-color: var(--warn-br);   color: #92400e; }
.hub-gm-badge-pending   { background: var(--info-bg);   border-color: var(--info-br);   color: #1e3a8a; }
.hub-gm-badge-untracked { background: var(--canvas);    border-color: var(--border2);   color: var(--text2); }

/* --- the metric inventory ------------------------------------------------- */
/* One row per metric: its name, and the sentence that says how it is counted.
   The calculation note is not a tooltip and not an appendix — §14 asks that every
   figure carry its rule, so the rule sits next to the name at full size. */
/* The trailing margin is here rather than on the note that follows, so this file
   never writes a rule whose subject is a class it does not own. Reaching into
   shared furniture "just for a margin" is how a scoped stylesheet stops being
   scoped. */
.hub-gm-metrics {
  list-style: none;
  margin: var(--s4) 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}
.hub-gm-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-2);
}
.hub-gm-metric-name {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
}
.hub-gm-metric-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text2);
}

/* --- the reporting period ------------------------------------------------- */
/* The control and the sentence that says what it resolved to. The sentence is
   not a hint under a field -- it is the statement of what every figure on the
   page was counted over, so it reads at body size and sits directly beneath the
   thing that produced it. */
.hub-gm-period-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s4);
}
.hub-gm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-gm-field .hub-select,
.hub-gm-field .hub-input { min-width: 15rem; }

.hub-gm-period-state {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--text);
}
/* Each caveat is its own paragraph rather than a run-on sentence: they are
   independent facts about the range, and a reader needs to be able to skip one
   without losing the next. */
.hub-gm-period-note {
  margin-top: var(--s2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text2);
}

@media (max-width: 640px) {
  .hub-gm-field { width: 100%; }
  .hub-gm-field .hub-select,
  .hub-gm-field .hub-input { min-width: 0; width: 100%; }
}

/* --- §12 drill-downs ------------------------------------------------------ */
/* The button that opens the records behind a figure. It sits inside a metric
   tile, a bar row or a metric-list item, so it is deliberately quiet: the number
   is what the reader came for and the button is what they reach for second. */
.hub-gm-drill-btn {
  margin-top: var(--s2);
  align-self: flex-start;
  font-size: 12px;
  padding: 3px 8px;
}
/* In a bar row it sits at the end of the line rather than under it — the row is
   already a horizontal rhythm and breaking it would cost the scan.

   .hub-ins-row is Insights' furniture and this file does not own it, so the rule
   is rooted at .hub-gm: it reaches the shared row ONLY inside this tab, and
   nothing here can style Insights by accident. */
.hub-gm .hub-ins-row .hub-gm-drill-btn,
.hub-gm-metric .hub-gm-drill-btn { margin-top: 0; margin-left: var(--s3); }

.hub-gm-drill { margin-top: var(--s3); }

/* The panel's own row in a bar list, sitting directly under the bar it answers.
   .hub-ins-bars is a column flex and already spaces its children, so this needs
   only to opt out of the bar row's own grid -- it is a panel, not a bar. */
.hub-gm-drill-row { display: block; }
.hub-gm-drill-row .hub-gm-drill { margin-top: 0; }

/* The same thing inside a tile grid. It sits immediately after the tile that
   opened it and spans every column, so the tiles that follow keep their order
   and their widths instead of being pulled up alongside a table. */
.hub-gm-drill-tile { grid-column: 1 / -1; }
.hub-gm-drill-tile .hub-gm-drill { margin-top: 0; }

/* The table can be wider than the column on a narrow screen, and a funder report
   is read on laptops and phones alike. It scrolls INSIDE this box so the page
   itself never scrolls sideways. */
.hub-gm-drill-scroll {
  overflow-x: auto;
  margin-top: var(--s3);
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.hub-gm-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hub-gm-drill-table th,
.hub-gm-drill-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.hub-gm-drill-table th {
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  position: sticky;
  top: 0;
}
.hub-gm-drill-table tr:last-child td { border-bottom: 0; }

/* --- print ---------------------------------------------------------------- */
/* --- folded reference ------------------------------------------------------
   The calculation notes §14 requires, out of the way until they are wanted.
   <details> carries the open/closed state and the keyboard behaviour itself, so
   there is no JS and no ARIA to keep in sync. These rules only hide the default
   marker, draw one in the shared ink, and close the gap .hub-card-head leaves
   for a body that is not showing. Nothing .hub-card owns is re-cut. */
.hub-gm-fold > .hub-gm-fold-head { cursor: pointer; list-style: none; }
.hub-gm-fold > .hub-gm-fold-head::-webkit-details-marker { display: none; }

/* The head is the shared flex row. Grouping the title with its badge keeps it to
   exactly two items — the label and the marker — so space-between puts the marker
   on the right rail whether or not the card carries a badge. */
.hub-gm-fold-label { display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; }

.hub-gm-fold-mark { flex: none; width: 7px; height: 7px; align-self: center;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.hub-gm-fold[open] > .hub-gm-fold-head .hub-gm-fold-mark {
  transform: rotate(225deg) translate(-2px, -2px); }

/* Closed, the card is just its head: cancel the bottom rule and the gap the
   shared head reserves for content under it, and round all four corners. */
.hub-gm-fold:not([open]) > .hub-gm-fold-head {
  margin-bottom: calc(var(--s5) * -1); border-bottom: 0;
  border-radius: var(--r-panel); }

.hub-gm-fold-body { margin-top: 0; }

/* Grant reporting gets printed and pasted into a funder document, so the badges
   have to survive losing their background colour. A border and the label keep
   the meaning when the fill does not print. */
@media print {
  .hub-gm-badge { border-color: #666; color: #000; }
  /* A closed <details> prints nothing. On screen the notes are reference; on
     paper they are the audit trail that tells a funder how each figure was
     reached, so every fold prints open and the markers go.

     `display: block` ON THE CHILD IS NOT ENOUGH. Measured under print media in
     Chromium 151 on 2026-09-21 (review item 13), with the pseudo-element rule
     below removed and then restored:

       without it   ::details-content content-visibility: hidden
                    body box 255px, checkVisibility() FALSE   -> prints blank
       with it      ::details-content content-visibility: visible
                    body box 255px, checkVisibility() TRUE    -> prints

     The earlier "measured 255px in print" note was reading
     getBoundingClientRect(), which reports the box `display: block` forces into
     existence whether or not it will ever paint. A closed <details> now hides
     its contents through the UA ::details-content pseudo-element, and no
     declaration on the CHILD can override content-visibility on its ancestor.

     So the pseudo-element is targeted directly. The child rule stays for
     engines that have no ::details-content, and each page also forces every
     fold open on beforeprint, because a browser that implements neither still
     has to produce the notes -- and on paper these notes are the audit trail
     for every figure in a funder's document. */
  .hub-gm-fold::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
    opacity: 1 !important;
  }
  .hub-gm-fold-body { display: block !important; }
  .hub-gm-fold-mark { display: none; }
  .hub-gm-fold:not([open]) > .hub-gm-fold-head {
    margin-bottom: var(--s5); border-bottom: 1px solid #ccc; }
  /* A button is not a thing on paper. The evidence table it opened IS, and it
     must not be cut off at the page edge, so it stops scrolling and wraps. */
  .hub-gm-drill-btn { display: none; }
  .hub-gm-drill-scroll { overflow: visible; }
  .hub-gm-drill-table th,
  .hub-gm-drill-table td { white-space: normal; }
}