/* The printable pedigree. Black on white, one letter page turned sideways, every box of the form drawn; a box with
   no name is left blank for the papers to fill, never guessed. No motion, no photographs. Top down (David, 24 Sep):
   the dog at the top, sire and dam below, eight great grandparents across the fourth row, and each of those with its
   own two parents as a pair underneath. The kennel prefix sits on its own small line over the dog's own name. */
@page { size: letter landscape; margin: 0.4in; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: #000; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-var.woff2") format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; }
body.pp { font-family: "Bricolage", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11pt; line-height: 1.25; padding: 24px; max-width: 11in; margin: 0 auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 24px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
.pp__kennel { margin: 0; font-size: 12pt; font-weight: 700; letter-spacing: .02em; grid-column: 1 / -1; }
.pp__head h1 { margin: 2px 0 0; font-size: 22pt; line-height: 1.1; }
.pp__sub { margin: 0; font-size: 10pt; color: #333; }
.pp ol { list-style: none; margin: 0; padding: 0; }
.pp__card { display: grid; justify-items: center; gap: 0; width: 100%; padding: 3px 4px; border: 1px solid #000; min-width: 0; background: #fff; text-align: center; }
.pp__card--blank { min-height: 34px; border-style: dashed; border-color: #888; }
.pp__role { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: #444; }
.pp__pre { font-size: 7.5pt; line-height: 1.15; color: #444; letter-spacing: .02em; }
.pp__name { font-size: 9.5pt; line-height: 1.15; font-weight: 650; min-height: 1.15em; }
.pp__card--root .pp__name { font-size: 14pt; }
.pp__card--root .pp__pre { font-size: 9pt; }
.pp__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; border-top: 1px solid #000; padding-top: 6px; font-size: 9pt; }
.pp__foot p { margin: 0; }
.pp__tools { display: flex; gap: 16px; align-items: center; }
.pp__tools button { font: inherit; font-size: 11pt; font-weight: 600; padding: 8px 16px; border: 2px solid #000; background: #fff; color: #000; cursor: pointer; }
.pp__tools a { color: #000; }

/* The form, top down. Under each box its line drops to a bar joining its sire and dam; each drops into its box. */
.pp__tree { display: flex; justify-content: center; }
.pp__tree > .pp__n { flex: 1 1 auto; }
.pp__n { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pp .pp__kids { position: relative; display: flex; align-self: stretch; padding-top: 14px; }
.pp__kids::before { content: ""; position: absolute; left: 50%; top: 0; height: 14px; border-left: 1px solid #000; }
.pp__kids > li { position: relative; flex: 1 1 0; min-width: 0; padding: 14px 2px 0; }
.pp__kids > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid #000; }
.pp__kids > li:first-child::before { left: 50%; }
.pp__kids > li:last-child::before { right: 50%; }
.pp__kids > li::after { content: ""; position: absolute; left: 50%; top: 0; height: 14px; border-left: 1px solid #000; }
.pp__card.g0 { max-width: 2.4in; padding: 5px 8px; }
.pp__card.g1 { max-width: 2.2in; padding: 4px 6px; }
.pp__card.g1 .pp__name { font-size: 12pt; }
.pp__card.g2 { max-width: 2in; }
.pp__card.g2 .pp__name { font-size: 11pt; }
.pp__card.g3 { padding: 4px 3px; }
.pp__card.g3 .pp__name { font-size: 10pt; }
.pp__card.g3, .pp__kids--pair .pp__card { font-stretch: 82%; }
/* the fifth row: sire over dam in one box, hung under the dog they belong to */
.pp .pp__kids--pair { flex-direction: column; padding: 0; margin: 14px 2px 0; border: 1px solid #000; }
.pp__kids--pair::before { top: -15px; }
.pp__kids--pair > li { padding: 0; }
.pp__kids--pair > li::before, .pp__kids--pair > li::after { display: none; }
.pp__kids--pair > li + li { border-top: 1px solid #999; }
.pp__kids--pair .pp__card { border: 0; padding: 4px 3px; }
.pp__kids--pair .pp__name { font-size: 9.5pt; }
.pp__kids--pair .pp__card--blank { min-height: 30px; }

/* A phone reading it on screen: the form keeps its shape and scrolls sideways inside the page. */
@media screen and (max-width: 979px) {
  body.pp { padding: 16px; font-size: 15px; }
  main { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .pp__tree { min-width: 960px; }
  .pp__head { grid-template-columns: 1fr; }
  .pp__foot { flex-direction: column; align-items: flex-start; }
}
@media print {
  body.pp { padding: 0; max-width: none; }
  .pp__tools { display: none; }
}