body { font: 16px/1.45 system-ui, sans-serif; margin: 0; color: #222; background: #fff; }
header { border-bottom: 1px solid #ddd; padding: .6rem 1rem; }
header nav a { margin-right: 1rem; }
header .lang { float: right; }
form.search { margin-top: .5rem; }
form.search input { width: min(28rem, 70%); padding: .35rem; }
main { padding: 1rem; max-width: 72rem; margin: 0 auto; }
footer { border-top: 1px solid #ddd; padding: .6rem 1rem; color: #666; font-size: .85rem; }
/* The render line sits UNDER the data line and lighter than it, so the eye that
   stops at the first date stops at the one that is the age of the data. Same
   reason it is a paragraph of its own rather than a clause: two moments on one
   line are two moments a reader has to parse apart (задача #265). */
footer p.rendered { color: #999; margin: .2rem 0 .6rem; }
/* A fact the corpus does not hold is said, not left blank — ADR-0026 for a
   timestamp. Italic marks it as this file talking, not as a value. */
footer .unrecorded { font-style: italic; }
/* The sex glyph before a name — задача #281. Bold because ♂/♀ draw thin at
   this size in `system-ui`, the same reason the app's own `SexGlyph` bolds its
   font. Colour is the THIRD signal, not the only one: the shape already tells
   ♂ from ♀ from `?` with the colour switched off, `role="img"`/`aria-label`
   carry the fact in words, and every one of the three values clears 3:1 on
   white (ADR-0186) — the bar задачи #266 and #273 hold this whole sheet to,
   this page being light-only and staying that way. */
span.sex { font-weight: 700; margin-right: .15rem; }
span.sex.male { color: #007AFF; }
span.sex.female { color: #FF2D55; }
/* Grey, not absent: an unrecorded sex that drew nothing would be indistinguishable
   from a rendering fault at 12 pixels — the same rule ADR-0026 states for an
   empty pedigree position, applied to a mark instead of a cell. Reuses
   `_SEX_STROKE["unknown"]`'s own grey rather than a second one for one fact. */
span.sex.unknown { color: #8a8a8a; }
table.facts th { text-align: left; padding-right: 1rem; color: #555; font-weight: 600; }
/* The undated row is part of the tally and set off from the decades, not
   hidden among them; the foot is what a reader checks their addition against. */
table.decades tr.apart th, table.decades tr.apart td { border-top: 1px solid #ddd; }
table.decades tfoot th, table.decades tfoot td { border-top: 2px solid #888; }
table.pedigree { border-collapse: collapse; margin: .6rem 0; }
table.pedigree td { border: 1px solid #ccc; padding: .3rem .5rem;
  vertical-align: middle; min-width: 9rem; }
table.pedigree td.unknown { color: #999; font-style: italic; }
table.pedigree td.repeated { background: #fdf3d7; }
table.pedigree .repeat { color: #a66; margin-left: .3rem; font-size: .8rem; }
table.pedigree .num, table.pedigree .sub { display: block; font-size: .75rem; color: #666; }
/* The title stands in front of the name and must not be mistaken for part of
   it — bolder and darker than the secondary lines, lighter than the name. */
table.pedigree .ttl { font-weight: 600; font-size: .8rem; color: #444; }
table.pedigree .col { color: #555; }
table.results, table.health { border-collapse: collapse; }
table.results td, table.results th, table.health td, table.health th {
  border: 1px solid #ddd; padding: .3rem .5rem; text-align: left; }
p.empty { color: #777; font-style: italic; }
nav.pager { display: flex; gap: 1rem; align-items: baseline; margin: .6rem 0;
  padding-top: .4rem; border-top: 1px solid #eee; flex-wrap: wrap; }
nav.pager .where { color: #555; }
nav.pager .off { color: #bbb; }
/* The size chooser sits at the far end of the strip, so the arrows stay where
   a reader's hand already is and the chooser is not something to click past. */
nav.pager .sizes { margin-left: auto; color: #555; }
nav.pager .sizes .now, p.breeds .now { color: #222; }
p.breeds { color: #555; margin: .2rem 0 .6rem; }
/* A sorted column says so in its own heading. The arrow is part of the link
   text on purpose — a sorted table that does not name the column is a table a
   reader cannot check. */
table.results th.sorted { background: #f4f4f4; }
table.results th .dir { color: #666; }
/* The «sort by sex» control the header left behind — задача #281. Smaller than
   the table text, the owner's own instruction, and `.75rem` is not a new size
   on this page: `table.pedigree .num`/`.sub` already print at it. No colour of
   its own — the default link blue clears 3:1 with room to spare, so touching
   it could only make that number worse. `.dir` matches the header's own arrow
   colour so the two read as the same signal wherever they appear. */
p.note.sexsort { font-size: .75rem; margin: 0 0 1.4rem; }
/* The sentence that says what the coefficient counted — задача #283. It sits
   directly under the facts table it explains, so its top margin is closed up
   against it rather than at `p.note`'s default; it is a note in every other
   respect and takes that rule's colour and size. */
p.note.coidepth { margin-top: .4rem; }
/* The coefficient column. `tabular-nums` for the same reason the by-year
   tally has it — a column of numbers that lines up on the glyph instead of on
   the digit is a column nobody can scan — and right-aligned because that is
   what makes 7,98 % and 71,39 % comparable at a glance. `th` follows the `td`
   so the heading sits over its own numbers. */
table.results td.coi, table.results th.coi { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
p.note.sexsort .dir { color: #666; }
p.note.sexsort a.sorted { font-weight: 600; }
p.also .variant small { color: #888; }
p.provenance { color: #777; }
/* The by-year tables. `tabular-nums` is what makes a column of counts line up
   on the digit instead of on the glyph, which is the whole reason a tally is
   readable at 147 rows; `overflow-x: auto` on the wrapper is what keeps a
   corpus with eleven base colours from pushing the PAGE sideways on a phone. */
div.wide { overflow-x: auto; }
table.byyear { border-collapse: collapse; font-variant-numeric: tabular-nums;
  margin: .6rem 0 .3rem; }
table.byyear th, table.byyear td { border: 1px solid #ddd; padding: .2rem .55rem; }
table.byyear td { text-align: right; }
table.byyear thead th { background: #fff; text-align: right; }
table.byyear thead th:first-child, table.byyear tbody th, table.byyear tfoot th {
  text-align: left; font-weight: 600; }
/* NO `position: sticky` on the head, tempting as it is at 148 rows. Inside
   `div.wide` it would be inert and look deliberate: `overflow-x: auto` computes
   `overflow-y` to `auto` too, which makes the wrapper the scroll container, and
   a head stuck to the top of a container that never scrolls vertically simply
   leaves with the page. Making it work needs a fixed-height box, and a
   fixed-height box is worse to read, worse to print and worse to index. */
/* Nought is said, not hidden: a dimmed 0 still reads as a count that was taken
   and came out empty, where a blank or a dash reads as «not measured». */
table.byyear .zero { color: #bbb; }
table.byyear tr.apart th, table.byyear tr.apart td { border-top: 2px solid #bbb; }
table.byyear tfoot th, table.byyear tfoot td { border-top: 2px solid #888; background: #fafafa; }
p.note { color: #666; font-size: .9rem; margin: .2rem 0 1.4rem; max-width: 48rem; }
/* The charts — задача #266. `width: 100%` with `height: auto` and no width or
   height attribute on the `<svg>` is what makes the viewBox a proportion: the
   figure keeps its aspect ratio down to a phone and needs no media query.
   The caption is a `p.note` in everything but the tag, because it says the same
   kind of thing the notes under the tables say and must not look like a second
   voice. */
figure.chart { margin: .6rem 0 .2rem; }
figure.chart svg { display: block; width: 100%; height: auto; }
figure.chart figcaption { color: #666; font-size: .9rem; margin: .3rem 0 1.4rem;
  max-width: 48rem; }
svg.chart text { font: 11px/1 system-ui, sans-serif; fill: #555; }
svg.chart .grid { stroke: #e8e8e8; stroke-width: 1; }
svg.chart .axis { stroke: #999; stroke-width: 1; }
/* NO `fill` on a series, and the reason is the shape rather than the taste: an
   unclosed polyline that is filled paints the area under its own chord, which
   on a line that dips to nought every few years is a shape nobody drew. */
svg.chart polyline.series, svg.chart line.swatch { fill: none; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
/* The columns — задача #273. SCOPED TO `polyline` ABOVE FOR ONE REASON: a `fill`
   declaration in a stylesheet beats a `fill` attribute on the element, so the
   rule as it was written (`.series`) would have painted every column of every
   decade with no fill at all. A column's colour has to stay an attribute,
   because it is the series' own and there is one class for all of them. */
svg.chart rect.series { stroke-width: 1; }
svg.chart rect.swatch { stroke: none; }
/* The number over a column is the only thing that tells a decade of one dog
   from a decade of none — see `_bars` — so it is darker than the axis labels.
   Nought is dimmed rather than dropped, the same bargain `table.byyear .zero`
   makes: a blank would read as «not counted».
   DIMMER, BUT NOT #bbb, AND THE DIFFERENCE FROM THE TABLE IS DELIBERATE. In a
   column of 148 cells a nought is noise and #bbb (1.92:1 on white) is what
   keeps it from shouting. Here it is the OPPOSITE: the nought over 1860-е is
   the mark that says «placed, and empty», and it is what a reader compares the
   «1» over 1850-е against. A mark carrying that much cannot be below the
   contrast at which text is legible, so it is #767676 — 4.54:1, readable, and
   still plainly lighter than the 9.74:1 of every other number on the figure. */
svg.chart .barval { fill: #444; }
svg.chart .barval.zero { fill: #767676; }
/* The drawn form of `table.decades tr.apart`: what separates the span from the
   bucket that is not part of it. Said TWICE — a rule and a change of ground —
   because it is at the far right end of a wide figure, where a reader arrives
   already scrolling and a single hairline is easy to miss. */
svg.chart line.apart { stroke: #bbb; stroke-width: 1; stroke-dasharray: 3 3; }
svg.chart rect.ground { fill: #f2f2f2; }
svg.chart .strip { fill: #888; font-style: italic; }
svg.chart .ytitle, svg.chart .xtitle { fill: #444; font-weight: 600; }
/* The statistics page's subsections — задача #294, ADR-0196. The same
   disclosure the litter tree below is, and deliberately so: one collapse on the
   site, the browser's own, no script anywhere near either.
   The `<h2>` inside the summary is made INLINE so the heading and the count
   beside it read as one line under one triangle — a block heading would push the
   count to a second line and the summary would look like two controls. Inline
   boxes ignore vertical margins, so the section's own margin is what spaces it,
   and the size is stated here because `h2`'s default `1.5em` is what the page
   used before the fold and has to stay what it is after it. */
details.section { margin: 1.4rem 0; }
details.section > summary { cursor: pointer; }
details.section > summary h2 { display: inline; font-size: 1.5em; font-weight: 700; }
/* «· 148 строк» — the one fact a shut section hides, and therefore the one that
   has to be outside it. Same grey and same weight as the litter node's count,
   because it is the same kind of statement in the same kind of header. */
details.section > summary .count { color: #555; font-size: .9rem; }
/* NO `@media print` THAT FORCES THESE OPEN, and it is a decision rather than an
   omission — see ADR-0196. A shut `<details>` prints its summary alone, so this
   page on paper is the counts and three headings; opening a section and then
   printing is what puts its numbers on paper, and that is a reader's choice
   rather than this sheet's. Forcing it is also not reliably expressible: the
   hidden content is a UA shadow slot, and `::details-content` is too new to be
   the thing a print stylesheet quietly depends on. */
/* The COI distribution's table — задача #289, ADR-0198. Two rows of it are not
   bands: «Ровно 0» stands above the ladder and «Коэффициент не посчитан», when
   the corpus has any, below it. Both wear `tr.apart` because both say the same
   thing — counted here, and not one of the things this ladder is about — and the
   rule moves to the other side of the first row so that it always falls BETWEEN
   the row and the block of bands rather than above the table's own top edge.
   Tabular figures for the same reason the by-year tally has them: a column of
   counts that lines up on the glyph is a column nobody can scan. */
table.coi td { font-variant-numeric: tabular-nums; }
table.coi tr.apart th, table.coi tr.apart td { border-top: 1px solid #ddd; }
table.coi tbody tr.apart:first-child th, table.coi tbody tr.apart:first-child td {
  border-top: none; border-bottom: 1px solid #ddd; }
table.coi tfoot th, table.coi tfoot td { border-top: 2px solid #888; }
/* The litter tree — задача #274, headers made links by #285. No script on this
   site and none for this: `<details>` is the disclosure, so the collapse is the
   browser's own — keyboard, screen reader, print and no network all come with
   it. */
div.tree { margin: .4rem 0 .2rem; }
details.litter { border-left: 2px solid #ddd; padding-left: .7rem; margin: .3rem 0; }
details.litter > summary { cursor: pointer; }
details.litter > summary .when { font-weight: 600; }
/* The header is the link to the litter's own page (#285), so it has to LOOK
   like one. This sheet styles `a` nowhere, so today the browser's own blue and
   underline are what a reader sees and this rule changes nothing; it is written
   anyway, because the summary around the link already says «pointer» and a
   later `a { text-decoration: none }` would leave the one place on this page
   where a link is the whole heading looking like a heading. The pseudo-node's
   `.when` stays a `<span>` and is told apart by that. */
details.litter > summary a.when { text-decoration: underline; }
details.litter > summary .count { color: #555; }
details.litter ul { margin: .25rem 0 .5rem; }
/* The pseudo-litter is not a litter and must not read as one. It is set apart by
   a gap and drawn with a dashed rule instead of a solid one — the same shape the
   statistics chart gives the bar it cannot date, and the same reason: what a
   partition cannot place gets its own visible place rather than a quiet one. */
details.nodata { border-left: 2px dashed #bbb; margin-top: 1.1rem; }
details.nodata > summary .when { font-style: italic; }