/* The research register layer.

   assets/research-instrument.css owns the system: palette, type, grid, frame,
   header, footer and the shared components. This sheet adds one composition
   on top of it, and every rule is scoped to
   .research-instrument[data-ri-register] so nothing here can reach the
   homepage, the three practice pages or the protected corpus.

   The composition is a register, deliberately not any of the three practice
   devices. The business ledger is a comparison table, the health evidence map
   is a graded grid and the private AI boundary is a two-field diagram. This
   is a reading list several hundred lines long, and the only thing a reader
   wants from it is to find one title fast: so it is lines, ruled, with the
   family written at the end of each line and nothing else competing.

   Three bands:

     - the base is one readable column. The title takes the line, the family
       label sits under it, and nothing is truncated;
     - from 48rem the row compacts onto a single line, title left and family
       right, which is the ledger-like density that makes a long list
       scannable;
     - from 64rem the register takes its full measure and the family label
       gets a fixed rail, so every label starts at the same x and the eye can
       run down the column.

   Nothing is carried by colour. Each family is a word on the row, the section
   heading repeats it, and the filter chips are labelled buttons. No url(), no
   @import, no remote origin, no imagery. */

/* ---------------------------------------------------------------- */
/* The opening, kept short on purpose                                */
/* ---------------------------------------------------------------- */

/* The register is the device this page exists for, so the words above it are
   an introduction and not a hero. The system's section rhythm is 96px top and
   bottom and a 40px head margin, which is right for a page of argument and
   wrong for a page of index: it pushed the search field and the first real
   row below the fold at 1440x900 and left the first screen of a handset as
   preamble. This route takes a shorter rhythm and a smaller display size.
   The words are unchanged. */
.research-instrument[data-ri-register] .rr-register {
  padding-block: var(--ri-space-4) var(--ri-space-5);
}

.research-instrument[data-ri-register] .rr-intro {
  margin-bottom: var(--ri-space-3);
}

.research-instrument[data-ri-register] .rr-title {
  font-size: clamp(28px, 1.5rem + 1.2vw, 38px);
  max-width: 24ch;
}

.research-instrument[data-ri-register] .rr-lead {
  margin-top: var(--ri-space-2);
  max-width: 60ch;
}

.research-instrument[data-ri-register] .rr-total {
  display: block;
  margin-top: var(--ri-space-3);
  color: var(--ri-graphite);
}

.research-instrument[data-ri-register] .rr-subjects,
.research-instrument[data-ri-register] .rr-formats {
  margin-top: var(--ri-space-5);
}

.research-instrument[data-ri-register] .rr-subjects h2,
.research-instrument[data-ri-register] .rr-formats h2 {
  margin: 4px 0 0;
  font-family: var(--ri-display);
  font-size: var(--ri-type-lead);
  line-height: var(--ri-type-lead-line);
  font-weight: 500;
}

.research-instrument[data-ri-register] .rr-subjects__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--ri-space-2);
  border-top: var(--ri-hairline) solid var(--ri-rule);
}

.research-instrument[data-ri-register] .rr-subjects__list > a {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  /* The subject and its count sit on one row until they cannot. Neither
     shrank, so at 200% zoom on a 390px handset the row was 21px wider than the
     viewport and the whole register scrolled sideways. Wrapping is the correct
     reflow at that size: the count goes under the subject rather than off the
     screen. */
  flex-wrap: wrap;
  gap: var(--ri-space-2);
  padding: var(--ri-space-2) 0;
  border-bottom: var(--ri-hairline) solid var(--ri-rule);
  color: var(--ri-ink);
  text-decoration: none;
}

.research-instrument[data-ri-register] .rr-subjects__list > a > span { min-width: 0; }

.research-instrument[data-ri-register] .rr-subjects__list > a:hover,
.research-instrument[data-ri-register] .rr-subjects__list > a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.research-instrument[data-ri-register] .rr-complete {
  margin-top: var(--ri-space-4);
  border-top: var(--ri-hairline) solid var(--ri-ink);
}

/* --ri-evidence, which exists. Four declarations in this sheet asked for
   var(--ri-body), and there is no --ri-body token: the palette block declares
   --ri-question, --ri-evidence and --ri-source, and the size tokens are the
   ones named --ri-type-body. An undefined custom property with no fallback
   makes the whole declaration invalid at computed-value time, so font-family
   fell back to the inherited value, which happened to be the same face. It
   read as working and was one unrelated edit away from not. */
.research-instrument[data-ri-register] .rr-complete > summary {
  min-height: 52px;
  padding-block: var(--ri-space-2);
  color: var(--ri-ink);
  font-family: var(--ri-evidence);
  font-size: var(--ri-type-body);
  line-height: var(--ri-type-body-line);
  font-weight: 700;
  cursor: pointer;
}

.research-instrument[data-ri-register] .rr-complete > summary:focus-visible {
  outline: 3px solid var(--ri-ink);
  outline-offset: 3px;
}

/* The provenance note follows the register rather than preceding it. It is
   the same sentence it always was; what changed is that a reader meets the
   works first and the note about what the inventory does not record after,
   which is also the order in which they need them. */
.research-instrument[data-ri-register] .rr-note {
  display: block;
  margin-top: var(--ri-space-3);
  max-width: 64ch;
}

/* ---------------------------------------------------------------- */
/* The register's column labels                                      */
/* ---------------------------------------------------------------- */

/* Written once, above the first family, on the same two tracks the rows use,
   so the desktop register reads as a register: a work column and a filed-under
   column with headings over them. It is aria-hidden because every row already
   names its own family in words; this is the visual repetition, not the
   accessible one, and announcing it twice would be noise.

   Below 48rem there are no columns to label: the row is two stacked lines,
   so the labels would describe a layout that is not on screen. */
.research-instrument[data-ri-register] .rr-columns {
  display: none;
}

/* ---------------------------------------------------------------- */
/* Search and family filter                                          */
/* ---------------------------------------------------------------- */
/* The component ships hidden and assets/archive.js reveals it, so these
   rules only ever paint a control that actually works. */

.research-instrument[data-ri-register] .rr-discover {
  display: grid;
  gap: var(--ri-space-1);
  margin-bottom: var(--ri-space-3);
  padding: var(--ri-space-2);
  border: var(--ri-hairline) solid var(--ri-rule);
  background: var(--ri-paper-deep);
}

/* minmax(0, 1fr), and the input says it may shrink.
   A text input's intrinsic minimum is about twenty characters wide, and a grid
   track defaults to that minimum rather than to the space available. At 200%
   zoom on a 390px handset the layout viewport is 195px, the search panel
   refused to go below 230px, and the whole register scrolled sideways by 80px:
   every heading, every subject and every row, to reach a field that was still
   cut off. Reflow, not shrinking — the field gets narrower, the type does
   not. */
.research-instrument[data-ri-register] .rr-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.research-instrument[data-ri-register] .rr-search__label {
  font-family: var(--ri-source);
  font-size: var(--ri-type-meta);
  line-height: var(--ri-type-meta-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ri-graphite);
}

.research-instrument[data-ri-register] .rr-search__input {
  min-height: 48px;
  width: 100%;
  min-width: 0;
  padding: 0 var(--ri-space-2);
  border: var(--ri-hairline) solid var(--ri-ink);
  background: var(--ri-paper);
  color: var(--ri-ink);
  /* The one control on this page a reader types into, so it declares the
     scheme it is drawn in rather than leaving it to the browser's idea of the
     surface. */
  color-scheme: light;
  font-family: var(--ri-evidence);
  font-size: var(--ri-type-body);
  line-height: var(--ri-type-body-line);
}

/* On a handset the seven family chips wrapped onto four 48px rows and took
   roughly a third of the viewport, which pushed the count and the first real
   row off the first screen. They stay 48px targets and stay in the tab order;
   what changes is that the rail scrolls sideways instead of growing
   downwards, so the first entry of the register is on screen with them.

   From 48rem there is width to wrap into, and it does. */
.research-instrument[data-ri-register] .rr-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ri-space-1);
  overflow-x: auto;
  /* A focused chip scrolled into view must not be clipped by the rail. */
  padding-bottom: 2px;
}

.research-instrument[data-ri-register] .rr-chips > * {
  flex: 0 0 auto;
}

.research-instrument[data-ri-register] .archive-chip {
  min-height: 48px;
  padding: 0 var(--ri-space-2);
  border: var(--ri-hairline) solid var(--ri-rule);
  background: var(--ri-paper);
  color: var(--ri-ink);
  font-family: var(--ri-source);
  font-size: var(--ri-type-meta);
  line-height: var(--ri-type-meta-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* The pressed chip states itself in the accessibility tree; the border weight
   is a second signal, never the only one. */
.research-instrument[data-ri-register] .archive-chip[aria-pressed="true"] {
  border-color: var(--ri-ink);
  border-width: 2px;
  font-weight: 700;
}

.research-instrument[data-ri-register] .archive-chip-n {
  margin-left: var(--ri-space-1);
  color: var(--ri-graphite);
}

.research-instrument[data-ri-register] .rr-count,
.research-instrument[data-ri-register] .rr-empty {
  margin: 0;
  font-family: var(--ri-source);
  font-size: var(--ri-type-meta);
  line-height: var(--ri-type-meta-line);
  color: var(--ri-graphite);
}

/* ---------------------------------------------------------------- */
/* The register itself                                               */
/* ---------------------------------------------------------------- */

/* The first family opens the register immediately under the search field;
   the rest are separated enough to read as separate filings. The inline
   rail is a quiet method mark: these are curated families, not a status
   badge, and no date or editorial state is invented beside them. */
.research-instrument[data-ri-register] .rr-family {
  margin-top: var(--ri-space-6);
  padding-inline-start: var(--ri-space-3);
  border-inline-start: 2px solid var(--ri-rule);
}

.research-instrument[data-ri-register] .rr-results > .rr-family:first-child {
  margin-top: 0;
}

.research-instrument[data-ri-register] .rr-family__name {
  margin: 0 0 var(--ri-space-1);
  font-family: var(--ri-evidence);
  font-size: var(--ri-type-lead);
  line-height: var(--ri-type-lead-line);
  font-weight: 700;
}

.research-instrument[data-ri-register] .rr-family__count {
  margin: 4px 0 0;
  font-family: var(--ri-source);
  font-size: var(--ri-type-meta);
  line-height: var(--ri-type-meta-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ri-graphite);
  white-space: nowrap;
}

.research-instrument[data-ri-register] .rr-list {
  margin: var(--ri-space-3) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--ri-hairline) solid var(--ri-rule);
}

/* One readable column at the base: the title on its own line, the family
   under it. Nothing wraps into a second column and nothing is clipped. */
.research-instrument[data-ri-register] .rr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  padding: var(--ri-space-3) 0;
  border-bottom: var(--ri-hairline) solid var(--ri-rule);
}

/* The 717 titles are the register. They set their face, their size and their
   wrapping and never set a colour, so every one of them was drawn in the
   browser's default link blue with the browser's default underline: a page of
   #0000EE inside a nine-token palette. It went unnoticed because the register
   is closed on arrival and nobody had a reason to open it; naming a subject
   from the home opens it filtered, which is where it became the first thing you
   see. Ink, with the underline offset the rest of the system uses. */
.research-instrument[data-ri-register] .rr-row__title {
  min-width: 0;
  font-family: var(--ri-evidence);
  font-size: var(--ri-type-body);
  line-height: var(--ri-type-body-line);
  overflow-wrap: anywhere;
  color: var(--ri-ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ri-rule);
}

.research-instrument[data-ri-register] .rr-row__title:hover {
  text-decoration-color: currentColor;
}

.research-instrument[data-ri-register] .rr-row__family {
  font-family: var(--ri-source);
  font-size: var(--ri-type-meta);
  line-height: var(--ri-type-meta-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ri-graphite);
}

.research-instrument[data-ri-register] .rr-row__title:focus-visible,
.research-instrument[data-ri-register] .rr-search__input:focus-visible,
.research-instrument[data-ri-register] .archive-chip:focus-visible {
  outline: 3px solid var(--ri-ink);
  outline-offset: 3px;
}

.research-instrument[data-ri-register] .rr-family__note {
  display: block;
  margin-top: var(--ri-space-3);
  padding: var(--ri-space-2);
  border: var(--ri-hairline) solid var(--ri-rule);
  border-inline-start: 2px solid var(--ri-ink);
  background: var(--ri-paper-deep);
  max-width: 64ch;
  color: var(--ri-ink);
}

.research-instrument[data-ri-register] .rr-family__note a {
  color: var(--ri-ink);
}

@media (max-width: 47.99rem) {
  .research-instrument[data-ri-register] .rr-row {
    padding-block: var(--ri-space-3) var(--ri-space-2);
  }

  .research-instrument[data-ri-register] .rr-row__title {
    display: inline-flex;
    align-items: center;
    min-height: var(--ri-target);
  }

  .research-instrument[data-ri-register] .rr-family {
    margin-top: var(--ri-space-5);
  }

  .research-instrument[data-ri-register] .rr-results > .rr-family:first-child {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------- */
/* The hidden attribute wins                                         */
/* ---------------------------------------------------------------- */

/* The browser's own [hidden] rule is `display: none` at the lowest possible
   weight, so any authored `display` beats it. Three elements in this sheet
   set one, and all three are toggled by the hidden attribute at runtime:

     - a filtered-out row. assets/archive.js sets `hidden` on rows that do
       not match; without this rule they kept computing as display: grid, so
       the count said "Showing 20 of 717" while 717 rows stayed on screen.
       The filter looked broken because it was;
     - a family whose rows are all filtered out. Same mechanism, whole
       section;
     - the search and filter component itself, which ships with `hidden` in
       the markup and is revealed only by the script. Without this rule a
       reader with scripting off would have been shown a control that does
       nothing, which is the opposite of progressive enhancement.

   It is stated once, after every rule that could out-weigh it, and it is
   specific enough to win rather than forced with !important. The tests hold
   it, because "the rows carry the hidden attribute" is exactly the state
   that was already true while the page was broken. */
.research-instrument[data-ri-register] .rr-discover[hidden],
.research-instrument[data-ri-register] .rr-list > li[hidden],
.research-instrument[data-ri-register] section.rr-family[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- */
/* The two wider bands                                               */
/* ---------------------------------------------------------------- */

/* 48rem: the row compacts onto one line. Title left, family right, on a
   baseline, which is the density that makes a few hundred lines scannable. */
@media (min-width: 48rem) {
  .research-instrument[data-ri-register] .rr-subjects__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ri-space-4);
  }

  .research-instrument[data-ri-register] .rr-discover {
    gap: var(--ri-space-2);
    margin-bottom: var(--ri-space-4);
    padding: var(--ri-space-3);
  }

  .research-instrument[data-ri-register] .rr-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .research-instrument[data-ri-register] .rr-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ri-space-2);
    align-items: baseline;
  }

  .research-instrument[data-ri-register] .rr-row__family {
    text-align: right;
  }

  .research-instrument[data-ri-register] .rr-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ri-space-2);
    margin: 0;
    padding-bottom: var(--ri-space-1);
    border-bottom: 2px solid var(--ri-ink);
    font-family: var(--ri-source);
    font-size: var(--ri-type-meta);
    line-height: var(--ri-type-meta-line);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ri-graphite);
  }

  .research-instrument[data-ri-register] .rr-columns__family {
    text-align: right;
  }
}

/* 64rem: the register proper. The family label takes a fixed rail so every
   label starts at the same x and the eye can run straight down it. */
@media (min-width: 64rem) {
  .research-instrument[data-ri-register] .rr-row,
  .research-instrument[data-ri-register] .rr-columns {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }

  .research-instrument[data-ri-register] .rr-row__family,
  .research-instrument[data-ri-register] .rr-columns__family {
    text-align: left;
  }

  .research-instrument[data-ri-register] .rr-discover {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
  }

  .research-instrument[data-ri-register] .rr-count,
  .research-instrument[data-ri-register] .rr-empty {
    grid-column: 1 / -1;
  }
}

/* The count never breaks from its unit inside a subject row. */
.research-instrument[data-ri-register] .rr-subjects__list .ri-source { white-space: nowrap; }