/* Density tuning for a list this long. The content is ~5400 lines of nested
   bullets, so Material's default vertical rhythm wastes a lot of screen. */

:root {
  --md-text-font: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

/* `toc.integrate` removes the right-hand rail, so the grid can reclaim that width.
   Material's default 61rem would leave the freed space empty.

   Mind the units: Material sets `html { font-size: 125% }`, and 137.5% above
   100em, so 1rem is 20-22px, NOT 16px. 72rem is ~1584px at a 1600px viewport and
   ~1728px at 2560px. Pick this by real pixels -- a cap chosen as if 1rem were 16px
   never engages, and the page runs edge to edge with no margin at all.
   Roughly 22px of total width per 1rem when adjusting.

   The `min()` matters: a bare 72rem is 1584px, so on a 1600px viewport it leaves
   8px of margin and reads as full-bleed, while on a 2560px display it caps nicely.
   Pairing it with 94vw guarantees a real margin at every width and still caps the
   absolute measure, so this does not need retuning per screen size. */
.md-grid {
  max-width: min(72rem, 94vw);
}

/* The left rail now carries the nav *and* the page ToC, whose entries are studio
   and game names ("Bugbear Entertainment (Team6 Engine - FlatOut 3)"). Material's
   12.1rem default would wrap almost every one of them onto three lines. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 17rem;
  }
}

.md-typeset {
  font-size: 0.76rem;
  line-height: 1.55;
}

/* Tighten list spacing; the default 0.5em per item adds up over 3000 entries. */
.md-typeset ul,
.md-typeset ol {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

.md-typeset li {
  margin-bottom: 0.15em;
}

.md-typeset li > ul,
.md-typeset li > ol {
  margin-top: 0.15em;
  margin-bottom: 0.15em;
}

/* Studio (h3) and game (h4) headings repeat hundreds of times, so make the
   hierarchy readable without eating a third of the viewport. */
.md-typeset h2 {
  margin-top: 1.6em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h3 {
  margin-top: 1.1em;
  font-size: 1.15em;
  font-weight: 600;
}

.md-typeset h4 {
  margin-top: 0.9em;
  font-size: 1em;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

/* The integrated ToC mirrors a deep outline (studios -> games); let long names
   wrap rather than truncate ("Format Analysis & Reverse Engi..."). */
.md-nav--secondary .md-nav__link {
  white-space: normal;
}

.md-nav__title {
  font-size: 0.7rem;
}

/* Distinguish the integrated ToC from the page nav above it: the page nav is
   usually one entry, and without a rule the two run together as one flat list. */
.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* Denser ToC -- it can run to 500+ entries on a games page. */
.md-nav--secondary .md-nav__list .md-nav__item {
  font-size: 0.68rem;
  line-height: 1.35;
}

/* The A-Z studio directory on games/index.md: 219 studios, one per line, flowed
   into columns. CSS columns fill top-to-bottom then left-to-right, which is the
   reading order an alphabetical index wants. */
.studio-index ul {
  margin: 0.2em 0 0.9em;
  padding-left: 1.1em;
  /* A column *width*, not a count: the browser fits as many 18rem columns as the
     content area allows, so the count follows the viewport with no media queries.
     18rem is sized to hold the longest studio name ("Grasshopper Manufacture (No
     More Heroes, Killer7)", 49 chars) on one line. A fixed `columns: 3` wrapped
     roughly a quarter of the names once the grid narrowed. */
  columns: 18rem;
  column-gap: 2.2rem;
}

.studio-index ul li {
  /* A name that does wrap must not straddle a column break. */
  break-inside: avoid;
  margin: 0.12em 0;
}

/* Entry count. Muted and small so the studio names still carry the page. */
.studio-index__count {
  margin-left: 0.25em;
  color: var(--md-default-fg-color--light);
  font-size: 0.8em;
  opacity: 0.6;
}