/* Pegasus: near-black indigo-purple and burgundy, muted brass, cream paper. Large type for easy reading. */
:root {
  --aubergine: #1b1020;
  --plum: #2f1a36;
  --burgundy: #6e1f33;
  --wine: #8a2c45;
  --brass: #a8874f;
  --brass-light: #d8c7a2;
  --brass-text: #7a5f2c;
  --cream: #f5f0e8;
  --paper: #fffcf7;
  --line: #e3d8cc;
  --field-line: #968579;
  --ink: #2b2127;
  --muted: #74656d;
  --mauve-tint: #f3eaef;
  --good: #4f6a4a;
  --good-bg: #edf2ea;
  --caution: #85591a;
  --caution-bg: #f8efdf;
  --bad: #9b3445;
  --bad-bg: #f6e6e8;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(42, 20, 38, 0.06), 0 4px 16px rgba(42, 20, 38, 0.05);
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--burgundy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wine); }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--aubergine); font-weight: 600; line-height: 1.15; margin: 0 0 0.5rem; text-wrap: balance; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; margin-top: 1.5rem; }
h4 { font-size: 1.1rem; margin: 1.1rem 0 0.3rem; }
p { margin: 0 0 0.8rem; }
small { font-size: 0.6em; color: var(--muted); }
.muted { color: var(--muted); }
.strong { font-weight: 700; }
.optional { color: var(--muted); font-weight: 400; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 2px; }
.masthead :focus-visible { outline-color: var(--brass-light); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1; padding: 10px 16px; background: var(--paper); color: var(--burgundy); font-weight: 700; }
.skip-link:focus { top: 16px; }

/* Masthead */
.masthead { background: var(--aubergine); color: var(--cream); border-bottom: 3px solid var(--brass); }
/* The side padding clears an iPhone's notch in landscape (the viewport has viewport-fit=cover). */
.masthead-inner, .mainnav, .page, .footer {
  max-width: 1200px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right));
}
.masthead-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 18px; padding-bottom: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--cream); text-decoration: none; }
.brand:hover { color: var(--cream); }
.brand-mark { flex: none; align-self: flex-start; margin-top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--brass-light); }
.brand-name { display: block; font-family: var(--serif); font-size: 1.9rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.brand-tag { display: block; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-light); margin-top: 4px; }
.member { text-align: right; }
.member-name { display: block; font-family: var(--serif); font-size: 1.25rem; }
.member-location { display: block; font-size: 0.85rem; color: var(--brass-light); }
/* The only way to the account page: a 44px tall target, though it looks no bigger. */
.member-user { position: relative; display: inline-block; font-size: 0.9rem; color: #e9dfe6; margin-top: 4px; text-decoration: none; border-bottom: 1px solid transparent; }
.member-user:hover { color: #fff; border-bottom-color: var(--brass-light); }
.member-user::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; translate: 0 -50%; }
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; }
.navlinks { display: flex; gap: 4px; flex-wrap: wrap; }
.mainnav a {
  color: #e9dfe6; text-decoration: none; padding: 12px 18px; font-weight: 600; font-size: 1rem;
}
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.mainnav a.active { color: #fff; background: rgba(255, 255, 255, 0.08); }
.mainnav .find { margin-left: auto; display: flex; align-items: center; }
.mainnav .find input { width: 180px; padding: 6px 10px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; }
.mainnav .find input::placeholder { color: rgba(255, 255, 255, 0.6); }
.pages { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.pages a { padding: 2px 8px; border-radius: var(--radius); }
.pages a.active { background: var(--mauve-tint); font-weight: 700; }

.page { padding-top: 32px; padding-bottom: 56px; }
.footer { color: var(--muted); font-size: 0.85rem; padding-bottom: max(32px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); padding-top: 16px; }

/* Shared blocks */
.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; color: var(--brass-text); font-weight: 700; margin-bottom: 0.3rem; }
.lede { font-size: 1.15rem; color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow); }
/* The panel's padding is its only space at the top and bottom, so a child's own margin doesn't add to it. */
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel-head h2 { margin: 0; }
.empty { text-align: center; padding: 48px; }

.notice { padding: 14px 20px; border-radius: var(--radius); margin-bottom: 20px; font-weight: 600; border-left: 4px solid; }
.notice-success { background: var(--good-bg); border-color: var(--good); color: #3f553b; }
.notice-error { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

.button {
  display: inline-block; background: var(--burgundy); color: #fff; border: 1px solid var(--burgundy);
  padding: 12px 22px; border-radius: var(--radius); font: 600 1rem var(--sans); text-decoration: none;
  cursor: pointer; transition: background 0.15s; min-height: 48px; line-height: 1.4;
}
.button:hover { background: var(--wine); color: #fff; }
.button-quiet { background: transparent; color: var(--burgundy); border-color: var(--brass-light); }
.button-quiet:hover { background: var(--mauve-tint); color: var(--burgundy); }
.button-large { font-size: 1.15rem; padding: 16px 32px; }

.tag { display: inline-block; font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.tag-fee { background: var(--mauve-tint); border-color: #e2cfdb; color: var(--plum); }
.tag-honour { background: #f6eedd; border-color: var(--brass-light); color: var(--brass-text); }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-caution { background: var(--caution-bg); color: var(--caution); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.plain-list { padding-left: 1.2rem; margin: 0.6rem 0; }
.plain-list li { margin-bottom: 0.45rem; }
/* Find's results. Their wrapper is there for the search to swap: the form's gap above it, and whatever
   is in it ends the panel. */
.found { list-style: none; padding: 0; margin: 0.6rem 0; }
.found li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.find-results { margin-top: 16px; }
.find-results > :last-child { margin-bottom: 0; }

/* Stats */
/* auto-fill, so a horse with one figure doesn't stretch it across the page; 220px puts a sale lot's four
   in one full row on a wide screen. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-bottom: 28px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--plum); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-value { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--aubergine); line-height: 1.1; }
.stat-label { font-size: 0.88rem; color: var(--muted); }

/* Home */
.welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 28px; }
.welcome .lede { margin: 0; }
.action {
  display: flex; flex-direction: column; gap: 8px; padding: 26px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.15s, border-color 0.15s;
}
.action:hover { border-color: var(--brass); color: var(--ink); }
.action-title { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: var(--aubergine); }
.action-text { color: var(--muted); flex: 1; }
.action-go { font-weight: 700; color: var(--burgundy); }

/* Horse cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.horse-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.horse-card:hover { border-color: var(--brass); box-shadow: var(--shadow); color: var(--ink); }
.monogram {
  flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--plum); color: var(--brass-light);
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px var(--plum), inset 0 0 0 3px var(--brass);
}
.monogram-lg { width: 88px; height: 88px; font-size: 2.2rem; }
/* The body runs the card's full height and the fee sits at its foot, so the fees in a row of cards line up
   when one card's name or breeding takes two lines. */
.horse-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-self: stretch; }
.horse-card-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--aubergine); line-height: 1.2; }
.horse-card-line { font-size: 0.92rem; }
.horse-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }

.filter-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar label { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; gap: 4px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); font-weight: 600; }
.tab:hover { border-color: var(--brass); color: var(--ink); }
.tab.active { background: var(--plum); border-color: var(--plum); color: #fff; }
.search { display: flex; gap: 8px; }
.search input { min-width: 280px; }

/* Forms */
input, select, textarea {
  font: 1rem var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--field-line); border-radius: var(--radius);
  padding: 11px 14px; min-height: 48px; width: 100%;
}
input[type="file"] { padding: 10px; background: var(--cream); }
/* Notes grow with what's written, from about three lines to about twelve, then scroll. */
textarea { resize: vertical; field-sizing: content; min-height: calc(3lh + 24px); max-height: calc(12lh + 24px); }
input:focus, select:focus, textarea:focus { border-color: var(--burgundy); }
/* Only once someone has had a go at the field, not on a form they've just opened. */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--bad); }
/* Focused, it stays red inside the focus ring, and a little bolder, so the ring doesn't hide it. */
:is(input, select, textarea):user-invalid:focus { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.form { display: grid; gap: 16px; margin-top: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; }
.form-row label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.form details summary { cursor: pointer; font-weight: 600; color: var(--burgundy); margin-bottom: 12px; }
.form details[open] { display: grid; gap: 16px; }
.form .button { justify-self: start; }
/* The mating check: Mare × Stallion (the mare first: she's the one to choose) and the button in one row; the button below them on a tablet; all stacked on a phone. */
.mating-form { grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr) auto; align-items: end; }
.mating-cross { font: 400 2.6rem/42px var(--serif); color: var(--brass); padding-bottom: 6px; }
@media (max-width: 1080px) {
  .mating-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .mating-form .button { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .mating-form { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mating-cross { line-height: 1; text-align: center; padding: 0; margin: 6px 0 -4px; }
  .mating-form .button { justify-self: stretch; margin-top: 20px; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.hint { color: var(--muted); font-size: 0.9rem; }

/* Horse page */
.horse-head { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.horse-head > div:nth-child(2) { flex: 1; min-width: min(100%, 280px); }
.horse-head h1 { margin-bottom: 0.2rem; }
.horse-head .lede { margin: 0; }
.horse-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice ul, ul.notice { margin: 0 0 20px; padding-left: 36px; }
.inline-form { display: inline; }
.notice .inline-form { margin-left: 8px; }
.record-list li .inline-form { margin-top: 6px; }
.horse-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 3px solid var(--aubergine); }
.horse-tabs a {
  padding: 13px 26px; font-weight: 700; text-decoration: none; color: var(--aubergine); background: var(--paper);
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.horse-tabs a:hover { background: var(--mauve-tint); color: var(--aubergine); }
.horse-tabs a.active { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }
.tab-panel { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:hover { background: #fbf7f1; }
.table .num { text-align: right; white-space: nowrap; }
/* A very long name with no spaces breaks where it must, rather than pushing the table past its panel. */
.dir-name, .dir-stud, .mating-name, .user-name { overflow-wrap: anywhere; }
.table-large td { padding: 16px 12px; }
.table-panel { padding: 8px 16px; overflow-x: auto; }
/* On a phone, a row of the Stallion Directory, the mating check or the admin's users is a little grid of
   its own rather than a table row, so none of it is off the side of the screen. */
.dir-by, .mating-label { display: none; }
@media (max-width: 720px) {
  :is(.directory, .matings, .users) thead { display: none; }
  :is(.directory, .matings, .users) tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0;
    border-bottom: 1px solid var(--line); }
  .table:is(.directory, .matings, .users) td { padding: 0; border: 0; }  /* over the phone padding for every .table, further down */
  /* The panel's padding is the space under the last row (above the first too, in the Stallion Directory's
     panel); the users' table has more under it. */
  :is(.directory, .matings) tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .directory tr:first-child { padding-top: 0; }
  /* The Stallion Directory: each stallion on three lines, his name and fee, his sire, and his stud (the
     town is on his page). */
  .directory .dir-name br, .directory .dir-stud br, .directory .dir-place { display: none; }
  .directory tr { grid-template-areas: "name fee" "sire sire" "stud stud"; gap: 8px 12px; }
  /* Bigger targets for a thumb without moving the text: the name's reaches up into the row's padding,
     the sire's down over the stud, and they meet in the gap between. */
  .directory .dir-name a, .directory .dir-sire a { display: inline-block; }
  .directory .dir-name a { padding: 12px 0 4px; margin: -12px 0 -4px; }
  .directory .dir-sire a { padding: 4px 0 12px; margin: -4px 0 -12px; }
  .directory .dir-name { grid-area: name; }
  .directory .dir-name .muted { margin-left: 6px; }
  .directory .dir-fee { grid-area: fee; }
  .directory .dir-sire { grid-area: sire; }
  .directory .dir-by { display: inline; color: var(--muted); }
  .directory .dir-stud { grid-area: stud; color: var(--muted); }
  /* The mating check: each stallion's name and fee, the foal's inbreeding, and its top repeat. */
  .matings tr { grid-template-areas: "name fee" "inbred inbred" "top top"; }
  .matings .mating-name { grid-area: name; }
  .matings .mating-fee { grid-area: fee; }
  .matings .mating-inbred { grid-area: inbred; text-align: left; white-space: normal; }
  .matings .mating-label { display: inline; color: var(--muted); }
  .matings .mating-top { grid-area: top; color: var(--muted); }
  /* The admin's users: who and their stud, whether they can sign in, then the buttons. */
  .users tr { grid-template-areas: "name admin" "stud stud" "state state" "actions actions"; }
  .users .user-name { grid-area: name; }
  .users .user-admin { grid-area: admin; color: var(--muted); }
  .users .user-stud { grid-area: stud; }
  .users .user-state { grid-area: state; }
  .users .user-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .users .user-actions .inline-form { margin: 0; }
}

.record-list { list-style: none; padding: 0; margin: 0; }
.record-list li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.record-list li:last-child { border-bottom: 0; }
.record-title { font-weight: 700; }
.add-record { margin-top: 20px; }
.add-record summary { list-style: none; display: inline-block; }
.add-record summary::-webkit-details-marker { display: none; }

/* Pedigree bracket (ui.pedigree_tree): the subject on the spine, each horse's parents to its right,
   joined by half-brackets, plum on the sire's side and burgundy on the dam's. */
.ped-controls, .bracket-wrap { --sire-line: rgba(74, 42, 85, 0.7); --dam-line: rgba(110, 31, 51, 0.62); }
.ped-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.ped-depth { display: inline-flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--muted); }
.ped-seg { display: inline-flex; border: 1px solid var(--brass-light); border-radius: 999px; padding: 2px; background: var(--paper); }
.ped-seg a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 600; color: var(--plum); text-decoration: none; }
.ped-seg a:hover { background: rgba(168, 135, 79, 0.14); color: var(--plum); }
.ped-seg a.active { background: var(--plum); color: var(--cream); }
.bracket-key { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--muted); }
.bracket-key li { display: inline-flex; align-items: center; gap: 8px; }
.ped-underlined { font-family: var(--serif); font-size: 1.1em; color: var(--ink); text-decoration: underline 1px var(--brass); text-underline-offset: 0.22em; }
.ped-swatch { display: inline-block; width: 26px; border-top: 1.5px solid var(--sire-line); }
.ped-swatch-dam { border-color: var(--dam-line); }

/* A row that scrolls sideways (the menu on a phone, a wide pedigree) fades at an edge only while there's
   more to scroll that way: a scroll timeline runs only while the row overflows, and the animation moves
   the fades as it scrolls. The row sets --fade, the width of a fade. */
@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes scroll-fades {
  from { --fade-start: 0px; --fade-end: var(--fade); }
  10%, 90% { --fade-start: var(--fade); --fade-end: var(--fade); }
  to { --fade-start: var(--fade); --fade-end: 0px; }
}
.bracket-wrap { --gap: 2rem; overflow-x: auto; padding: 4px 18px 8px 0; }
/* Too wide for the screen, it fades at an edge where there's more, all the way down, as its scrollbar is
   at the foot of a tall bracket. */
@supports (animation-timeline: scroll()) {
  .bracket-wrap {
    --fade: 40px; animation: scroll-fades linear; animation-timeline: scroll(self inline);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  }
}
.bracket-heads, .bracket { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); }
.bracket-heads { list-style: none; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-text); }
.bracket-heads li { padding-left: 10px; }
.bracket { grid-template-rows: repeat(var(--rows), minmax(var(--row), auto)); }
.bracket-cell { --lc: var(--sire-line); position: relative; display: flex; align-items: center; min-width: 0; padding: 3px 0 3px 10px; transition: opacity 0.2s ease; }
.bracket-cell.ped-dam-half { --lc: var(--dam-line); }
.ped-who { position: relative; min-width: 0; }
/* The line from a horse out to the half-brackets of its parents. */
.ped-lead { flex: 1 1 12px; min-width: 12px; margin: 0 calc(var(--gap) / -2) 0 10px; border-top: 1px solid var(--lc); }
/* Each parent's half-bracket back to its child: the sire's hangs down, the dam's reaches up. */
.bracket-cell.g1::before, .bracket-cell.g2::before, .bracket-cell.g3::before, .bracket-cell.g4::before, .bracket-cell.g5::before {
  content: ""; position: absolute; left: calc(var(--gap) / -2); width: calc(var(--gap) / 2 + 4px); border-left: var(--w, 1px) solid var(--lc);
}
.bracket-cell.ped-sire::before { top: 50%; bottom: 0; border-top: var(--w, 1px) solid var(--lc); }
.bracket-cell.ped-dam::before { top: 0; bottom: 50%; border-bottom: var(--w, 1px) solid var(--lc); }
.bracket-cell.g1 { --w: 1.5px; --fs: 1.5rem; }
.bracket-cell.g2 { --fs: 1.22rem; }
.bracket-cell.g3 { --fs: 1.08rem; }
.bracket-cell.g4 { --fs: 1rem; }
.bracket-cell.g5 { --fs: 0.9rem; }
.ped-subject { padding: 0; }
.ped-spine { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.3em 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.36em; line-height: 1; text-transform: uppercase; color: var(--aubergine); }
.ped-subject .ped-lead { flex: 1 1 auto; min-width: 0; margin-left: 6px; border-top: 1.5px solid var(--aubergine); }
.ped-rel { position: absolute; bottom: 100%; left: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #4a2a55; }
.ped-dam-half .ped-rel { color: var(--burgundy); }
/* The padding makes each name a 44px target without moving it. */
.ped-link {
  display: inline-block; padding: max(4px, calc((44px - 1.15em) / 2)) 4px; margin: -8px 0 -8px -4px; border-radius: 2px;
  font-family: var(--serif); font-size: var(--fs); font-weight: 600; line-height: 1.15; color: var(--aubergine); text-decoration: none;
}
.ped-label { background: linear-gradient(rgba(216, 199, 162, 0.75), rgba(216, 199, 162, 0.75)) no-repeat 0 90% / 0 40%; transition: background-size 0.2s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ped-link:hover { color: var(--aubergine); }
.ped-link:hover .ped-label { color: var(--burgundy); }
.ped-detail { font-family: var(--sans); font-size: max(0.6em, 13px); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--muted); }
/* A short note under a name, such as "In the stud register" on a sale lot (pedigree_tree's marker). */
.ped-marker { display: block; margin-top: 3px; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-text); }
.ped-repeat .ped-label { text-decoration: underline 1px var(--brass); text-underline-offset: 0.22em; }
.ped-missing .ped-who { font-family: var(--serif); font-size: max(0.95rem, calc(var(--fs) * 0.85)); font-style: italic; color: var(--muted); }
/* Lit by static/pedigree.js: one horse's places and their lines to the subject in brass, the rest dimmed. */
.bracket.is-lit .bracket-cell:not(.ped-lit):not(.ped-path) { opacity: 0.6; }
.bracket.is-lit .ped-lit, .bracket.is-lit .ped-path { --lc: var(--brass); }
.bracket.is-lit .ped-subject.ped-path .ped-lead { border-color: var(--brass); }
.ped-lit .ped-label { background-size: 100% 38%; }
@media (max-width: 1100px) {
  .bracket-wrap { --gap: 1.6rem; padding-right: 14px; }
}
/* A phone on its side: closer columns, so most five-generation pedigrees fit across. */
@media (max-height: 500px) and (pointer: coarse) {
  .bracket-wrap { --gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bracket-cell, .ped-label { transition: none; }
}

/* Pocket pedigree (ui.pedigree_pocket): on a phone screen, three generations in two bands, the sire's
   above the dam's. Landscape phones, tablets and print keep the bracket. */
.pocket { display: none; }
@media screen and (max-width: 720px) {
  .ped-controls, .bracket-wrap { display: none; }
  .pocket { display: block; margin: 0 -8px; }
}
.pocket-key { margin-bottom: 12px; font-size: 17px; }
.pocket-half { --side: var(--plum); --tint: #f1eaf2; border: 1px solid var(--line); border-left: 6px solid var(--side); background: var(--paper); }
.pocket-dam { --side: var(--burgundy); --tint: #f7ebec; border-top: 2px solid var(--side); }
.pocket-head { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 8px 12px; background: var(--tint); }
.pocket-rel { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 700; line-height: 1.1; letter-spacing: 0.13em; text-transform: uppercase; color: var(--side); }
.pocket-link { display: block; min-height: 52px; padding: 5px 0; text-decoration: none; color: var(--aubergine); }
.pocket-head .pocket-link { padding: 0; }
.pocket-link:hover .pocket-name { color: var(--burgundy); }
.pocket-name { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.1; }
.pocket-head .pocket-name { font-size: 30px; line-height: 1.05; }
.pocket-head .pocket-meta { margin-left: 6px; }
.pocket-meta { font-size: 17px; line-height: 1.2; white-space: nowrap; color: var(--muted); }
.pocket-g2 .pocket-name, .pocket-g2 .pocket-meta, .pocket-g3 .pocket-name, .pocket-g3 .pocket-meta { display: block; }
/* The name shrinks with the screen so one of up to about 14 letters fits on a line; a longer one breaks
   at a syllable, with a hyphen, where the browser will (Chrome won't for a capitalised word). */
.pocket-g2 .pocket-name { font-size: clamp(17px, 5.3vw, 22px); line-height: 1.08; -webkit-hyphens: auto; hyphens: auto; }
.pocket-g2 .pocket-meta { margin-top: 3px; }
.pocket .ped-marker { margin-top: 4px; letter-spacing: 0.04em; }
.pocket .ped-repeat .pocket-name { text-decoration: underline 2px var(--brass); text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
.pocket-missing, .pocket-none { font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 500; line-height: 1.2; color: var(--muted); }
.pocket-head .pocket-missing { font-size: 24px; }
.pocket-none { margin: 0; padding: 12px 14px 14px 18px; }
/* Inside a band, grandparents on the left and their parents paired on the right. The band's rule is
   the trunk: a tick runs off it to each grandparent, and a half-bracket joins each pair to its child. */
.pocket-grid { position: relative; display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); grid-template-rows: repeat(4, minmax(56px, auto)); column-gap: 18px; padding: 4px 4px 6px 18px; }
.pocket-cell { position: relative; display: flex; align-items: center; min-width: 0; }
.pocket-cell > * { flex: 1; min-width: 0; }
.pocket-g2 { grid-column: 1; }
.pocket-g3 { grid-column: 2; }
.pocket-g3.pocket-none { padding: 0; }
.pocket-g2::before { content: ""; position: absolute; left: -24px; width: 18px; top: 50%; border-top: 1.5px solid var(--side); }
.pocket-g2::after { content: ""; position: absolute; right: -9px; width: 7px; top: 50%; border-top: 1.5px solid var(--side); }
.pocket-g2.pocket-nolead::after { display: none; }
.pocket-g3:not(.pocket-none)::before { content: ""; position: absolute; left: -9px; width: 6px; border-left: 1.5px solid var(--side); }
.pocket-s::before { top: 50%; bottom: 0; border-top: 1.5px solid var(--side); }
.pocket-d::before { top: 0; bottom: 50%; border-bottom: 1.5px solid var(--side); }
.pocket-rule { grid-column: 1 / span 2; grid-row: 3; align-self: start; margin-left: -2px; border-top: 1px solid var(--line); }
@media (max-width: 370px) {
  .pocket { margin: 0 -12px; }
  .pocket-head .pocket-name { font-size: 27px; }
  .pocket-g3 .pocket-name { font-size: 19px; }
  .pocket-grid { column-gap: 16px; padding-left: 16px; }
  .pocket-g2::before { left: -22px; width: 16px; }
  .pocket-g2::after { right: -8px; width: 6px; }
  .pocket-g3:not(.pocket-none)::before { left: -8px; width: 5px; }
}
@media print {
  @page pedigree { size: landscape; margin: 10mm; }
  .page:has(.bracket) { page: pedigree; }
  :root:has(.bracket) { font-size: 70%; }
  /* Only pages with a bracket print as a bare pedigree; other pages print as they are. */
  :root:has(.bracket) body { background: #fff; }
  :root:has(.bracket) :is(.masthead, .footer, .skip-link, .horse-tabs, .horse-head-actions, .ped-depth, .lot-nav) { display: none; }
  :root:has(.bracket) .panel { box-shadow: none; border: 0; padding: 0; }
  .bracket-wrap { overflow: visible; break-inside: avoid; }
  .bracket { --row: 1.4rem !important; }
  .bracket-cell { opacity: 1 !important; }
  .ped-link { padding: 0; margin: 0; }
}

/* A phone, upright or on its side: the masthead on as few lines as it will go. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .brand-tag, .member-location { display: none; }
  .member { text-align: left; }
  .member-name, .member-user { display: inline; margin: 0 0.6rem 0 0; }
  .masthead-inner { padding-top: 14px; padding-bottom: 10px; }
}

/* A phone or a tablet: the menu on two lines, links then search, as all of it fits on one line only
   from about 1050px wide (with the Admin link). */
@media (max-width: 1080px), (max-height: 500px) and (pointer: coarse) {
  /* The links in one row that scrolls sideways (nav.js keeps the current and focused ones in view),
     fading at an edge to show there are more that way. The focus ring sits inside, so it isn't clipped. */
  .navlinks {
    --fade: 32px; --fade-end: 32px;
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 32px;
    scroll-padding-inline: 32px;
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  }
  /* Without scroll timelines the right edge always fades, as there's no telling how far it has scrolled. */
  @supports (animation-timeline: scroll()) {
    .navlinks { --fade-end: 0px; animation: scroll-fades linear; animation-timeline: scroll(self inline); }
  }
  .mainnav a { padding: 10px 12px; flex: none; }
  .navlinks a:focus-visible { outline-offset: -3px; }
  .mainnav .find { margin: 0 0 12px; flex: 1 1 100%; }
  .mainnav .find input { width: 100%; }
}
/* A narrow tablet: closer links, so all of them fit across (with the Admin link) and none hides past
   the edge. */
@media (min-width: 721px) and (max-width: 840px) {
  .navlinks { padding-right: 0; --fade-end: 0px; }
  .mainnav a { padding: 10px 7px; }
}

@media (max-width: 720px) {
  html { font-size: 106.25%; }
  .masthead-inner, .mainnav, .page, .footer { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .welcome .button { width: 100%; text-align: center; }
  h1 { font-size: 2.1rem; }
  .panel { padding: 20px; }
  .search input { min-width: 0; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 1.6rem; }
  .horse-head { gap: 14px; }
  .horse-head > div:nth-child(2) { min-width: 0; flex-basis: calc(100% - 80px); }
  .monogram-lg { width: 64px; height: 64px; font-size: 1.6rem; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
  .table th, .table td { padding: 10px 6px; }
  .horse-tabs a { padding: 10px 14px; flex: 1 1 auto; text-align: center; }
  .page-head .button, .horse-head-actions, .horse-head-actions .button { width: 100%; text-align: center; }
}

.table-scroll { overflow-x: auto; }
.tab-panel .facts { max-width: 720px; }

/* The lift only where a pointer can hover, so it doesn't stick after a tap, and only if motion is welcome. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .action:hover { transform: translateY(-2px); }
}

/* Sign-in page */
.login { max-width: 540px; margin: 48px auto; padding: 40px 36px; text-align: center; border-top: 3px solid var(--brass); }
.login h1 { font-size: 2.3rem; }
.login .form { text-align: left; }
.login .button { width: 100%; }
.user-list { display: grid; gap: 12px; margin-top: 24px; }
.user-choice {
  width: 100%; min-height: 62px; padding: 14px 18px; text-align: center; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--aubergine);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.user-choice:hover, .user-choice:focus-visible { background: var(--aubergine); border-color: var(--aubergine); color: #fff; box-shadow: var(--shadow); }

/* Account page */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.account-grid .panel { margin-bottom: 0; }
.account-wide { margin-top: 24px; }
.password-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin-top: 8px; }
/* The button on its own row under the fields, at every width. */
.password-form .button { grid-column: 1 / -1; justify-self: start; }
.password-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }

/* Sales catalogues */
.lot-filters { display: grid; gap: 16px; }
.lot-filters label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.92rem; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.filter-foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.filter-foot .check { flex-direction: row; align-items: center; gap: 8px; min-height: 48px; }
.filter-foot .check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--burgundy); }
.filter-foot .sort { min-width: 220px; }
.filter-buttons { margin-left: auto; display: flex; gap: 10px; }
.lot-list { display: grid; gap: 10px; margin-bottom: 24px; }
.lot-row {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; padding: 16px 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lot-row:hover { border-color: var(--brass); box-shadow: var(--shadow); color: var(--ink); }
.lot-no { display: flex; flex-direction: column; align-items: center; font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--aubergine); line-height: 1; }
.lot-no-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text); font-weight: 700; margin-bottom: 4px; }
.lot-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lot-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--aubergine); }
.lot-line { font-size: 0.95rem; }
.lot-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font-size: 0.9rem; }
.lot-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.grade { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.grade-1 { background: #f4ead2; border-color: #c9a85a; color: #6e5317; }
.grade-2 { background: #efecef; border-color: #b5aab4; color: #4d424b; }
.grade-3 { background: #f3e6dc; border-color: #c49a7a; color: #6d4429; }
.grade-4 { background: var(--mauve-tint); border-color: #d9c4d1; color: var(--plum); }
.pager { display: flex; justify-content: center; align-items: center; gap: 18px; }

.lot-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lot-nav-step { display: flex; gap: 10px; }
.lot-badge {
  flex: none; width: 92px; height: 92px; border-radius: 50%; background: var(--plum); color: #fff; display: grid; place-items: center;
  align-content: center; font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--plum), inset 0 0 0 3px var(--brass);
}
.lot-badge span { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-light); margin-bottom: 4px; }
.consignor { font-style: italic; color: var(--muted); margin: 4px 0 0; }
.lot-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.flag { padding: 6px 14px; border-radius: 999px; background: var(--aubergine); color: #fff; font-weight: 600; font-size: 0.88rem; }
.flag-caution { background: var(--caution-bg); color: var(--caution); }
.callout { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: var(--radius); padding: 12px 18px; font-weight: 600; }
.callout-caution { border-left-color: var(--caution); background: var(--caution-bg); color: #6b4a17; }
.family-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.family-title { margin-top: 28px; }
.family-head .family-title { margin-top: 0; }
.type-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; color: var(--muted); margin: 0; }
.dam-section { margin-top: 22px; }
.dam-section h3 { font-size: 1.3rem; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.fam-entry { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); margin-bottom: 4px; }
.fam-note { border-left-color: transparent; font-style: italic; color: var(--muted); }
.fam-text { margin: 0; line-height: 1.6; }
.fam-text strong { color: var(--aubergine); }
.fam-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.style-chip { font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--muted); }
.style-bt_winner_flat, .style-bt_winner_jumps { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }
.style-bt_placed_flat, .style-bt_placed_jumps { background: var(--mauve-tint); border-color: #d9c4d1; color: var(--plum); }
.catalogue-page { text-align: center; }
.catalogue-page img { max-width: 100%; width: 760px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }

@media (max-width: 720px) {
  .lot-row { grid-template-columns: 56px 1fr; }
  .lot-side { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .lot-chips { justify-content: flex-start; }
  .filter-buttons { margin-left: 0; width: 100%; }
  .filter-buttons .button { flex: 1; text-align: center; }
  .lot-badge { width: 64px; height: 64px; font-size: 1.5rem; }
}
/* Cormorant's figures are proportional and old-style by default. */
.lot-badge, .lot-no, .stat-value { font-variant-numeric: lining-nums tabular-nums; }
/* High-contrast modes drop background colours, so mark the current tab another way. */
@media (forced-colors: active) {
  .mainnav a.active, .tab.active, .horse-tabs a.active { text-decoration: underline 3px; }
}