/* ===========================================================================
   report.css — the entire typographic design of the CRS matrix and the
   definition library that stands beneath it.
   Change the grammar here and every archived issue reflows on next build.
   =========================================================================== */
.crs {
  --ink:      #1a1a1a;   /* full black — tail marks, marked numbers */
  --ink-2:    #47443f;   /* quintile marks */
  --ink-3:    #6b6862;   /* ordinary numbers */
  --ink-faint:#807d76;   /* the wks counter */
  --rule:     #e2dfd6;
  --rule-strong: #cdc9bd;

  /* The card carries NO paper of its own. It inherits --paper from :root in
     style.css, so the matrix sits on exactly the same ground as the rest of
     the page and the border alone states where the report begins. Set a value
     here and the card silently detaches from the site again. */
  background: var(--paper);

  /* Every header cell on the page — column heads, group bands, rowgroup names
     and row labels — reads through this one token. Softening or restoring the
     header hierarchy is a one-line change here and nowhere else. */
  --head: var(--navy-ink);
  --head-soft: var(--navy-soft);

  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.4rem 1.6rem 1.5rem;
  max-width: 62rem;
  /* Site faces, already loaded in eleventy.config.js. Numbers set in IBM Plex
     Mono: it is natively tabular, so signed columns align without relying on a
     variant feature, and it echoes the plain-text edition. Labels in IBM Plex
     Sans, the mono face's own sibling — they share skeletons and vertical
     metrics, so a label and the number beside it sit on one optical line. */
  --font-label: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--font-label);
}

/* The ink scale is needed by every section below the report card, not only the
   card itself, so it is also declared on the page root. The card keeps its own
   copy so it remains self-contained if lifted into another context. */
:root {
  --ink:      #1a1a1a;
  --ink-2:    #47443f;
  --ink-3:    #6b6862;
  --ink-faint:#807d76;
  --rule:     #e2dfd6;
  --rule-strong: #cdc9bd;
  --head:      var(--navy-ink);
  --head-soft: var(--navy-soft);
  /* The sections below the report card are siblings of .crs, not descendants,
     so they cannot inherit its tokens. Declared here as well. */
  --font-label: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Section headings were set at .82rem — the same size as the prose under
     them, so they read as labels rather than divisions. These two values are
     the whole hierarchy below the matrix; change them here and every section
     follows. --h2-defs is deliberately larger: it is the seam between the
     report and the reference, not another section within the report. */
  --h2: 3.2rem;
  --h2-defs: 4.2rem;
}

.crs-head { display: flex; justify-content: space-between; align-items: baseline;
            border-bottom: 1px solid var(--rule-strong); padding-bottom: .6rem; }
.crs-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -.01em;
               color: var(--head); }
.crs-date { font-size: .82rem; color: var(--ink-2); margin: 0; }
.crs-context { font-size: .75rem; color: var(--ink-3); margin: .5rem 0 0;
               font-variant-numeric: tabular-nums lining-nums; }

/* --- links inside the report -------------------------------------------
   The page is monochrome and every link here points at a definition on the
   same page. A coloured or underlined link would read as a second marking
   grammar competing with the first, so links inherit ink and declare
   themselves only with a hairline that thickens on hover. */
.crs a,
.crs-scalar a, .crs-desk a, .crs-pending a, .crs-clusters a, .crs-defs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.crs a:hover, .crs a:focus-visible,
.crs-scalar a:hover, .crs-desk a:hover, .crs-pending a:hover,
.crs-clusters a:hover, .crs-defs a:hover {
  border-bottom-color: var(--ink);
}

/* --- the matrix ---------------------------------------------------------- */
.crs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crs-matrix { width: 100%; min-width: 48rem; border-collapse: collapse; table-layout: fixed;
              margin-top: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.crs-matrix td, .crs-matrix th { padding: 4px 0; font-size: .81rem; font-weight: 400; }
.crs-matrix .num, .crs-matrix .wks, .crs-context { font-family: var(--font-num); }

.c-name { width: 10.5rem; } .c-val { width: 4.2rem; }
.c-rank { width: 4.6rem; }  .c-wks { width: 2.1rem; } .c-h { width: 5.3rem; }

/* --- headers -------------------------------------------------------------
   Column heads, group bands, rowgroup names and row labels all sit in
   --head (--navy-ink). This is the one place on the page where the navy of
   the site chrome enters the report, and it ties the matrix to the header
   bar above it.

   Note what it costs: --navy-ink (#0B1526) is darker than --ink (#1a1a1a), so
   the scaffolding is now the heaviest ink in the table and the marked numbers
   are no longer the darkest thing in view. They stay distinguishable because
   they alone step up in weight, and because the header row is set small, wide
   and short. If the labels start reading before the data, soften --head on
   .crs and the whole table follows. */
.crs-groupband th { font-size: .72rem; color: var(--head); text-align: center;
                    padding: 0 0 3px; letter-spacing: .04em; font-weight: 600; }
.crs-colhead th { font-size: .76rem; color: var(--head); text-align: right;
                  padding-bottom: 7px; border-bottom: 1px solid var(--rule-strong);
                  font-weight: 600; }
.crs-grp th { padding: 16px 0 4px; font-size: .78rem; color: var(--head);
              text-align: left; font-weight: 600; letter-spacing: .02em; }

/* A withheld horizon must still read as withheld in its own column head, or
   the middle dot is carrying that meaning alone. It stays in the navy family
   and recedes within it, rather than dropping to the neutral grey. */
.crs-colhead th.ungated { color: var(--head-soft); }

.crs-matrix .nm  { text-align: left; color: var(--head); padding-left: 10px;
                   font-weight: 600; }
.crs-matrix .num { text-align: right; color: var(--ink-3); }
.crs-matrix .wks { text-align: right; font-size: .68rem; color: var(--ink-faint); }

/* The row label is the entry point to its definition. It carries no underline
   in the table — a hairline under every row name would read as a rule and
   fight the horizontal structure — so the affordance appears on hover only. */
.crs-matrix .nm a { border-bottom-color: transparent; }
.crs-matrix .nm a:hover, .crs-matrix .nm a:focus-visible { border-bottom-color: var(--ink-3); }

/* Marked numbers step up in weight. This is the quintile map (spec 10.1). */
.crs-matrix .lit { color: var(--ink); font-weight: 500; }

/* Ranks withheld for want of independent windows sit in lighter ink (spec 5).
   Evidence strength is carried by ink density, running independently of value. */
.crs-matrix .ungated { color: var(--ink-3); }

/* The single vertical rule on the page. It marks the boundary between
   "where it stands" and "how far it moved" and is the only vertical
   division in the layout, so it reads as structure rather than decoration. */
.crs-matrix .sep { border-left: 1px solid var(--rule); }

/* --- the marking grammar (spec 3.1) -------------------------------------- */
/* The glyph states direction, the dagger states severity. Because the glyph
   is identical across tiers, hierarchy is carried by ink: quintile grey,
   tail black. The page is monochrome by design — with Ⓧ/Ⓞ carrying
   direction, colour has no honest job left. */
/* NEITHER MARK IS TYPED. The latin webfont subsets exclude Enclosed
   Alphanumerics (U+24CD, U+24C4), so a real Ⓧ falls back to a system face and
   breaks the advance width mid-column, and it sidesteps the East Asian
   Ambiguous width hazard entirely. The same is true of the dagger: U+2020 is
   in `latin-ext`, not `latin`, in every family this site has loaded, so it was
   falling back too — on the one mark that carries severity, in the one column
   where a wrong advance width shows. Both are now drawn from borders and
   1px rules on empty spans: no glyph, no download, no dependency on which
   typeface happens to be in use. */
.mk { display: inline-block; width: 2.05em; text-align: left; padding-left: .18em;
      white-space: nowrap; font-family: var(--font-label); }

/* SIZE WAS THE WHOLE PROBLEM. The circle used to compute to about 8px with a
   5px letter inside it — a mark nobody could read without leaning in, on the
   one device that carries direction. .92em at font-size .68em is .63em; it now
   computes to roughly 13px with a 10px letter at weight 600, which is legible
   at arm's length while still sitting inside the numeric column.
   Ⓧ/Ⓞ as real characters remain impossible: U+24CD and U+24C4 are in no subset
   of any face here, and Ω lives only in `greek`, which would mean shipping a
   whole extra file for one glyph. Drawing them stays correct — they were just
   drawn too small. */
.mk-o { display: inline-flex; align-items: center; justify-content: center;
        width: 1.28em; height: 1.28em; border: 1px solid currentColor; border-radius: 50%;
        font-style: normal; font-weight: 600; font-size: .82em; line-height: 1;
        vertical-align: -.16em; }

/* The dagger. The element IS the stem — 1px wide, so it lands on the pixel
   grid rather than being centred to a half-pixel and antialiased. The
   crossbar is the ::after, offset left by half its own width.

   These four values are the whole shape. If the dagger reads too tall, too
   short, or sits off the baseline against the circle beside it, adjust here
   and every mark on every page follows. */
.mk-dag { --dag-h: .92em;      /* overall height */
          --dag-bar: .34em;    /* crossbar width */
          --dag-top: .22em;    /* crossbar distance from the top */
          --dag-gap: .26em;    /* space between circle and dagger */
          position: relative; display: inline-block; font-style: normal;
          width: 1px; height: var(--dag-h); margin-left: var(--dag-gap);
          background: currentColor; vertical-align: -.03em; }
.mk-dag::after { content: ""; position: absolute; height: 1px;
                 width: var(--dag-bar); left: calc(var(--dag-bar) / -2);
                 top: var(--dag-top); background: currentColor; }

.mk-quint { color: var(--ink-2); }
.mk-tail  { color: var(--ink); }

/* --- footer -------------------------------------------------------------- */
.crs-foot { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: .6rem; }
.crs-foot p { font-size: .74rem; color: var(--ink-3); line-height: 1.6; margin: 0 0 .25rem; }
.crs-census a { color: var(--ink-2); }

/* --- scalars, desk, gaps ------------------------------------------------- */
.crs-scalar, .crs-desk, .crs-pending, .crs-clusters, .crs-defs, .crs-empty {
  max-width: 62rem; margin: 2rem 0 0; }
.crs-scalar h2, .crs-desk h2, .crs-pending h2, .crs-clusters h2,
.crs-downloads h2 {
  font-family: var(--font-label); font-size: var(--h2); font-weight: 600;
  color: var(--head); border-bottom: 1px solid var(--rule-strong);
  padding-bottom: .3rem; margin-bottom: .8rem;
  letter-spacing: -.02em; line-height: 1.05; }

/* The definition library is not another section of the report — it is where the
   report stops and the reference begins. It gets the one colour the palette has
   been holding in reserve: burgundy, used nowhere else on this page. A reader
   scrolling past cannot mistake the seam for a subheading. */
.crs-defs h2 {
  font-family: var(--font-label); font-size: var(--h2-defs); font-weight: 600;
  color: var(--burgundy); letter-spacing: -.025em; line-height: 1;
  border-bottom: 2px solid var(--burgundy); padding-bottom: .35rem;
  margin-bottom: .9rem; }
.crs-defs { margin-top: 4rem; }
.crs-bignum { font-size: 2.2rem; font-weight: 400; margin: .6rem 0 .2rem;
              font-variant-numeric: tabular-nums lining-nums; }
.crs-caption, .crs-lede { font-size: .92rem; color: var(--ink); line-height: 1.7; max-width: 42rem; }
.crs-steps { font-size: .92rem; color: var(--ink); line-height: 1.9;
             font-variant-numeric: tabular-nums lining-nums; }
.crs-downloads { max-width: 62rem; margin: 2rem 0 0; }
.crs-downloads ul { list-style: none; padding: 0; }
.crs-downloads li { font-size: .92rem; margin: .55rem 0; color: var(--ink); }
.crs-downloads a { font-family: var(--font-num); color: var(--ink); }

.crs-pending dt { font-size: .84rem; font-weight: 500; margin-top: .8rem; }
.crs-pending dd { font-size: .8rem; color: var(--ink-3); margin: .2rem 0 0; line-height: 1.6; }
.crs-status { font-size: .7rem; color: var(--ink-faint); font-weight: 400; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }

/* --- what moved together (spec 9.2) --------------------------------------
   Sits between the matrix and the definitions because it qualifies the marks
   directly above it: clustered rows are not independent evidence. */
.crs-cluster { font-size: .92rem; color: var(--ink); margin: .6rem 0 0; }
.crs-corr-vs { color: var(--ink-3); font-size: .82em; padding: 0 .15em; }
.crs-corr { border-collapse: collapse; margin-top: .9rem; min-width: 26rem;
            font-variant-numeric: tabular-nums lining-nums; }
.crs-corr th { font-size: .72rem; font-weight: 400; color: var(--ink-3);
               text-align: left; border-bottom: 1px solid var(--rule); padding-bottom: 5px; }
.crs-corr th:last-child { text-align: right; }
.crs-corr td { font-size: .88rem; padding: 5px 0; color: var(--ink); }
.crs-corr td.num { font-family: var(--font-num); text-align: right;
                   padding-left: 1.5rem; }

/* --- the definition library ----------------------------------------------
   Permanent, not a tooltip. Hover was the wrong instrument: the marks are
   1.5em wide and the labels are .81rem, so on a touch screen the tooltip
   layer simply did not exist.

   The term column is set to 10.5rem — the same width as .c-name in the matrix
   above. The library is literally aligned to the column it explains, so a
   reader scanning down the page finds definitions where the row names were. */
.crs-defs-sec { margin-top: 1.8rem; }
.crs-defs-sec h3 { font-size: .78rem; font-weight: 500; color: var(--head);
                   letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .3rem; }
.crs-defs-blurb { font-size: .8rem; color: var(--ink-3); line-height: 1.6;
                  max-width: 42rem; margin: 0 0 1rem; }
.crs-defs-legend { font-size: .78rem; color: var(--ink-2); margin: 0 0 1rem;
                   padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 6px;
                   display: inline-block; }

.crs-defs-list { margin: 0; }
.crs-def { display: grid; grid-template-columns: 10.5rem 1fr; gap: 0 1.2rem;
           padding: .75rem 0 .75rem .75rem; border-top: 1px solid var(--rule);
           margin-left: -.75rem; border-left: 2px solid transparent; }
.crs-def dt { font-size: .82rem; font-weight: 500; color: var(--head); margin: 0; }
.crs-def dd { margin: 0; }
.crs-def dd p { font-size: .82rem; line-height: 1.65; color: var(--ink-2);
                margin: 0; max-width: 42rem; }

/* The `reading` line answers a different question from the definition — not
   what the metric is, but what a high or low value actually means. It is set
   apart by ink and a hanging rule rather than by a label, because a label
   would repeat on every entry and stop carrying information. */
.crs-def-reading { margin-top: .45rem !important; color: var(--ink-3) !important;
                   padding-left: .7rem; border-left: 1px solid var(--rule); }

/* One step further than `reading`: what to actually do with the number. This
   one carries a written label rather than relying on ink alone, because it
   appears on almost no entries — a label repeated on every definition stops
   carrying information, but a label seen once does not. */
.crs-def-example { margin-top: .5rem !important; color: var(--ink-2) !important;
                   padding-left: .7rem; border-left: 1px solid var(--rule-strong); }
.crs-def-example::before { content: "How to use it "; font-size: .72em;
                           letter-spacing: .05em; text-transform: uppercase;
                           color: var(--head-soft); }

.crs-def-back { font-family: var(--font-num); font-size: .68rem;
                color: var(--ink-faint) !important; white-space: nowrap;
                border-bottom: none !important; opacity: 0; }
.crs-def:hover .crs-def-back,
.crs-def-back:focus-visible { opacity: 1; }

/* Arriving at a definition from a row link should be visible without a scroll
   hunt. The target declares itself with the same device the matrix uses for
   structure — a single rule and a step up in ink — not with a highlight
   colour, which the page does not have. */
/* The card and the page now share one paper, so a lighter paper can no longer
   mark the targeted entry. A 4% wash of the header navy does it instead —
   the same hue already carrying every label on the page. */
.crs-def:target { border-left-color: var(--head); background: rgba(11, 21, 38, .04); }
.crs-def:target dt { color: var(--head); }
.crs-def:target .crs-def-back { opacity: 1; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- empty state --------------------------------------------------------- */
.crs-empty h1 { font-size: 1.1rem; font-weight: 500; color: var(--head);
                border-bottom: 1px solid var(--rule); padding-bottom: .5rem; }

/* On narrow screens the table scrolls rather than reflows. A 9-column matrix
   that reflows stops being a matrix. */
@media (max-width: 40rem) {
  :root { --h2: 1.9rem; --h2-defs: 2.4rem; }
  .crs { padding: 1rem; border-radius: 0; border-left: none; border-right: none; }
  /* The definition list does reflow — it is prose, not a matrix. */
  .crs-def { grid-template-columns: 1fr; gap: .3rem 0; }
  .crs-def-back { opacity: 1; }
}

/* --- mixed-frequency disclosure ------------------------------------------
   Since v0.5 the page carries metrics on more than one sampling frequency.
   A row whose history is NOT the page default is asterisked, and the footer
   states its own sample. Without this a reader compares a rank drawn from
   14 months against one drawn from 20 years as though they were equivalent. */
.crs-freq { font-size: .72em; vertical-align: .35em; color: var(--ink-3);
            padding-left: 1px; }
.crs-sample { font-size: .74rem; color: var(--ink-3); line-height: 1.6;
              margin: 0 0 .25rem; padding-left: .9rem; text-indent: -.9rem; }

/* Both tiers now share full ink — the dagger alone carries severity. The two
   classes are retained as hooks so the distinction can be reinstated here
   without touching matrix.njk or the payload. */
.mk-quint, .mk-tail { color: var(--ink); }

/* --- print ---------------------------------------------------------------
   The definition library is the reason this page prints usefully at all: a
   tooltip glossary produced a printout full of undefined terms. */
@media print {
  .crs { border: none; border-radius: 0; padding: 0; }
  .crs-scroll { overflow: visible; }
  .crs-def-back, .crs-defs-legend { display: none; }
  .crs-def { break-inside: avoid; }
}