/* ==========================================================================
   PAGE · COUNTRY DIRECTORY — the index of the register. Composes the built
   systems (nameplate/breadcrumb/colophon · the escorted Badge/Medallion +
   coverage states · the apparatus bar + collect + tray + segregation divider)
   and adds only the front-matter furniture those systems do not carry:

     • the directory HEADER (kicker + serif title + standfirst + a coverage
       readout strip), the front matter of a reference work;
     • the TIER SECTION (.dir-section) — the genuine new piece: the register is
       published in priority tiers, each a titled, ruled section that states its
       own coverage story, with the listing ranked by overall standing WITHIN it.
       (The system's listing is one flat table; a register reads in sections.)
     • small leader/coverage helpers for the row identity and the printed
       coverage denominator.

   New CSS only. Tokens only below settings. Links AFTER offprint.css and the
   s1/s2/s3 component sheets. ITCSS spirit: 06-components / 08-pages.
   ========================================================================== */

/* ---- The directory header — the front matter ----------------------------- */
.dir-head {
  padding-block: var(--space-lg) var(--space-md);
}
.dir-head__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2xs) 0 0;
}
/* the one page-level rubric hairline (defers to the nameplate's identity) */
.dir-head__rule {
  height: 0;
  border: 0;
  border-top: 2px solid var(--accent);
  margin-block: var(--space-md) var(--space-md);
  max-inline-size: 7rem;
}

/* the coverage readout strip — a row of mono stats + the candour line */
.dir-readout {
  display: grid;
  gap: var(--space-md) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, max-content));
  align-items: end;
  margin-top: var(--space-md);
}
.dir-readout__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
}

/* ---- A tier section — the register's structural grouping ------------------ */
.dir-section { margin-top: var(--space-xl); }
.dir-section:first-of-type { margin-top: var(--space-lg); }

/* the section head: a ruled shelf carrying the tier, its gloss, its coverage */
.dir-section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--rule-strong);
}
.dir-section__tier {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
/* the tier numeral, set as a serial — mono counts */
.dir-section__numeral {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.dir-section__gloss {
  grid-column: 1;
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
  max-inline-size: 52ch;
}
/* the section's own honest coverage figure, right-shouldered */
.dir-section__cov {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.dir-section__cov b {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
}
/* when a whole tier is filtered out, fold its section away */
.dir-section[hidden] { display: none; }

/* ---- The row identity (leader cell) -------------------------------------- */
.dir-leader { display: flex; flex-direction: column; gap: 0.12rem; }
.dir-leader__name {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text);
  text-decoration: none;
}
.dir-leader__name:hover { color: var(--accent); }
.dir-leader__name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dir-leader__meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* the ISO code reads as a catalogue serial */
.dir-leader__iso { font-weight: var(--weight-medium); color: var(--text-secondary); }
/* a furniture note (e.g. the tier, shown only in the segregated tail rows) */
.dir-leader__tier {
  font-family: var(--font-furniture);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---- The coverage cell — the denominator, printed plainly ---------------- */
.dir-cov { display: inline-grid; gap: 0.28rem; justify-items: end; min-inline-size: 5.5rem; }
.dir-cov__fig {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-sm);
  color: var(--text);
}
.dir-cov__fig small { color: var(--text-muted); }
/* a thin NEUTRAL printed coverage meter — ink, never a band hue, so it can
   never be mistaken for the score vernier. Track = rule, fill = ink. */
.dir-cov__meter {
  inline-size: 4.6rem;
  block-size: 3px;
  background: var(--rule);
  position: relative;
}
.dir-cov__meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: calc(var(--c, 0) * 100%);
  background: var(--ink-secondary);
}
/* the suppressed SCORE cell reads DENSER than a no-data cell — the system's
   data-table paints td[data-band="none"] with the open hatch; upgrade the
   suppressed one to the cross-hatch so the two absences differ on the cell too,
   not only inside the badge glyph (the non-hue density separator survives grey). */
.op-table td.dir-col-score[data-coverage="suppressed"] { background-image: var(--hatch-image-dense); }

/* the no-data / suppressed coverage cell carries the hatch register, not a 0 */
.dir-cov--none .dir-cov__fig { color: var(--text-muted); }
.dir-cov--none .dir-cov__meter {
  background-color: var(--surface);
  background-image: var(--hatch-image);
}
.dir-cov--suppressed .dir-cov__meter { background-image: var(--hatch-image-dense); }
.dir-cov__why {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* ---- Table fit for the register ------------------------------------------ */
/* keep the score + coverage columns from collapsing; let identity take the rest */
.dir-table { table-layout: auto; }
.dir-table thead th { white-space: nowrap; }
.dir-table .dir-col-cov { text-align: right; }

/* the "Brief →" doorway is the whole row's destination; keep it quiet */
.dir-open { white-space: nowrap; }

/* The empty-result note, shown when a cut leaves a section (or all) with no rows */
.dir-empty {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Mobile fold (< md) — rows read identity-over-score ------------------ */
@media (max-width: 56.24rem) {
  .dir-section__head { grid-template-columns: 1fr; }
  .dir-section__cov { grid-column: 1; grid-row: auto; text-align: left; }

  /* collapse the table to stacked record cards: identity first, then the
     escorted overall and its coverage beneath. The rank + collect stay inline. */
  .dir-table, .dir-table tbody, .dir-table tr, .dir-table td { display: block; width: 100%; }
  .dir-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dir-table tr {
    position: relative;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 3.9rem;
    border-bottom: 1px solid var(--rule);
  }
  .dir-table td { padding: 0.15rem 0; border: 0; }
  /* the collect slot pins to the left margin of the card */
  .dir-table td.op-collect-cell {
    position: absolute;
    left: var(--space-sm);
    top: var(--space-sm);
    width: auto;
    box-shadow: none !important;
  }
  /* the rank rides as a small mono serial by the name */
  .dir-table td.op-table__rank {
    position: absolute;
    left: var(--space-sm);
    bottom: var(--space-sm);
    width: auto;
    border: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }
  .dir-table td.dir-col-score,
  .dir-table td.dir-col-cov { text-align: left; margin-top: var(--space-2xs); }
  .dir-table .dir-cov { justify-items: start; }
  /* keep the collected-row keyline reading on the card */
  .op-table tbody tr.is-collected,
  .op-table tbody tr:has(.op-collect[aria-pressed="true"]) {
    box-shadow: inset 3px 0 0 var(--surface-inverse);
  }

  /* let the tray's full / saved notes take their own line so they don't get
     squeezed beside the launch buttons (page-level polish of the s3 tray) */
  .op-tray__actions { flex-wrap: wrap; }
  .op-tray__full-note,
  .op-tray__full-note.u-accent { flex-basis: 100%; margin-bottom: var(--space-3xs); }
}