/* One stylesheet, no framework, no client JS. No cards, pills, gradients, shadows or animation.
   Readable at 390px and at 1440px: a single measured column, tables that scroll rather than
   shrink, and nothing that depends on hover. */

:root {
  --ink: #16181d;
  --ink-soft: #4b5160;
  --rule: #d6d9e0;
  --paper: #ffffff;
  --notice: #f3f0e7;
  --notice-rule: #8a7a4e;
  --link: #11417a;
  --measure: 42rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.125rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body > * { max-width: var(--measure); margin-inline: auto; }

a { color: var(--link); }
a:focus-visible, .skip-link:focus { outline: 2px solid var(--link); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus { position: static; display: inline-block; padding: 0.5rem 0; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.25rem 0 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.brand { margin: 0; font-weight: 600; }
.brand a { text-decoration: none; }

.site-header nav ul, footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One compact line, not a shaded slab. The block stays above <main> because F-0011 and the
   audit require it there, but section 45 pass codex1 failed every page for opening on a warning that
   outweighed the publication and the reader's task, so the weight is the part that changed:
   small type, thin rule, no fill, detail on the linked disclaimer. */
#ruo-notice {
  margin-top: 1rem;
  padding: 0.375rem 0 0.375rem 0.625rem;
  border-left: 3px solid var(--notice-rule);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
#ruo-notice p { margin: 0; }
.ruo-headline { text-transform: none; letter-spacing: 0.01em; }

/* The compound directory is the home page's primary task surface. Multi-column on a wide
   viewport so 77 names scan as an index; one column on a phone, where a wrapped multi-column
   list is the fragmented stack the critic flagged. */
.compound-dir, .class-dir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.125rem 1.5rem;
  padding-left: 0;
  list-style: none;
}
/* Tap targets on a phone need separating from each other more than they need compactness. */
.compound-dir li, .class-dir li { margin-bottom: 0.25rem; }
.compound-dir a, .class-dir a { display: inline-block; padding: 0.1875rem 0; }
@media (max-width: 40rem) {
  .compound-dir li, .class-dir li { margin-bottom: 0.125rem; }
  .compound-dir a, .class-dir a { padding: 0.375rem 0; }
}

/* The letter is a legible marker with a short rule under it: pass codex2 rejected full-width
   rules between groups as giving a two-name letter a twenty-name letter's weight, and codex4
   then found the replacement too faint and the gaps between sparse groups too large. */
#find-a-compound h3 {
  margin: 0.75rem 0 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
#find-a-compound h3:first-of-type { margin-top: 0.25rem; }

/* The lookup control: letters as a row of jump targets, sized to be the first thing acted on. */
.az-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.75rem 0 1.5rem;
}
.az-bar a {
  min-width: 2rem;
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

nav[aria-label="Breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
nav[aria-label="Breadcrumb"] li + li::before { content: "/ "; color: var(--rule); }

main { padding-top: 0.5rem; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.25rem 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.25rem; }

/* The stamp moved below the content (section 45 pass codex3: process metadata sat between the
   title and the reader's task), so it is bounded by a rule above it, not below. */
.review-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1rem;
  margin: 2.5rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.review-stamp span:nth-child(2) { flex: 1 1 100%; }

.lede { font-size: 1.0625rem; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.25rem; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.9375rem;
  text-align: left;
}
caption { text-align: left; font-size: 0.8125rem; color: var(--ink-soft); padding-bottom: 0.5rem; }
/* overflow-wrap keeps an unbroken identity string (C187H291N45O59) inside the column at 390px. */
th, td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: break-word; }
th[scope="col"] { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
th[scope="row"] { font-weight: 600; }

.unknown { color: var(--ink-soft); }
.note { font-size: 0.8125rem; color: var(--ink-soft); }
.derived { font-size: 0.8125rem; color: var(--ink-soft); }
.src-id { font-size: 0.8125rem; color: var(--ink-soft); }

sup.ref { font-size: 0.75rem; }
sup.ref a { text-decoration: none; }

ol.sources { font-size: 0.875rem; }
ol.sources li { margin-bottom: 0.5rem; }
cite { font-style: normal; }

.term { padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }

.slot-block { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.sponsored {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

#site-disclaimer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
#site-disclaimer strong { color: var(--ink); }
#site-disclaimer .tagline { font-style: normal; }

@media (min-width: 60rem) {
  body { padding-inline: 2rem; }
  :root { --measure: 48rem; }
  h1 { font-size: 2.125rem; }
}