/*
 * RabbitKeeper stylesheet, loaded by every layout. Plain CSS, no build step.
 * The only place a colour value is written is the :root block below; everything else is var(--token).
 */
:root {
    --bg: oklch(0.975 0.012 85);
    --card: oklch(0.995 0.005 85);
    --soft: oklch(0.94 0.018 145);
    --ink: oklch(0.24 0.04 225);
    --dim: oklch(0.45 0.03 225);
    --line: oklch(0.87 0.015 200);
    --acc: oklch(0.48 0.08 195);
    --accInk: oklch(0.985 0.005 200);
    --hay: oklch(0.9 0.1 95);
    --warn: oklch(0.5 0.17 28);
    --ground: oklch(0.82 0.1 100);
    --fur1: oklch(0.9 0.1 95);
    --fur2: oklch(0.935 0.02 85);
    --fur3: oklch(0.72 0.07 60);
    --fur4: oklch(0.8 0.02 300);
    --fur5: oklch(0.995 0.004 85);
    --display: 'Bricolage Grotesque', ui-rounded, system-ui, sans-serif;
    --body: 'Instrument Sans', system-ui, sans-serif;
}

/* Self-hosted fonts. If a file is missing the browser uses the fallback stack from --display and --body. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-style: normal; font-display: swap; src: url('/fonts/bricolage-grotesque-variable.ttf') format('truetype'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('/fonts/instrument-sans-variable.ttf') format('truetype'); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--body); }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { font-family: var(--display); }
.shell h1, .shell h2 { margin: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

/* ---- shell ------------------------------------------------------------------------------ */
.shell { --pad: 36px; --padTop: 32px; --h1: 44px; display: flex; align-items: stretch; min-height: 100vh; }
.side { flex: none; width: 210px; border-right: 1px solid var(--line); }
.side-in { padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { padding: var(--padTop) var(--pad) 28px; display: flex; flex-direction: column; gap: 18px; }

.logo { display: block; flex: none; position: relative; overflow: hidden; height: var(--lh); width: calc(var(--lh) * 4.19); }
.logo img { position: absolute; max-width: none; height: calc(var(--lh) * 1.5242); left: calc(var(--lh) * -0.2105); top: calc(var(--lh) * -0.1789); }
.logo--side { --lh: 41px; margin-bottom: 20px; }
.logo--top { --lh: 36px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--ink); }
.nav a:hover { text-decoration: none; background: var(--soft); }
.nav a.on { background: var(--ink); color: var(--accInk); font-weight: 600; }
.sidelinks { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--acc); cursor: pointer; text-align: left; }
.linkbtn:hover { text-decoration: underline; }

.phonebar { display: none; align-items: baseline; justify-content: space-between; padding: 14px var(--pad) 0; }
.phonebar-link { font-size: 14px; padding: 12px 0; }
.tabs { display: none; position: sticky; bottom: 0; margin-top: auto; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); font-size: 13px; text-align: center; }
.tabs a { display: block; min-height: 52px; padding: 16px 0 20px; color: var(--dim); border-top: 3px solid transparent; margin-top: -1px; }
.tabs a:hover { text-decoration: none; }
.tabs a.on { color: var(--ink); font-weight: 600; border-top-color: var(--acc); }

.notice { background: var(--hay); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-weight: 600; }

/* ---- header row and buttons -------------------------------------------------------------- */
.head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.head h1 { font-size: var(--h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.eyebrow { font-size: 14px; color: var(--dim); }
.sub { font-size: 15px; color: var(--dim); margin-top: 4px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px var(--body); cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--acc); color: var(--accInk); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--danger { background: var(--warn); color: var(--accInk); }
.btn--hay { background: var(--hay); color: var(--ink); border-color: var(--ink); }

/* ---- cards and the Barn ------------------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.card h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.empty { color: var(--dim); margin: 6px 0; }
.foot { font-size: 13px; color: var(--dim); margin: 0; }

.strip { position: relative; height: 168px; border-radius: 22px; overflow: hidden; background: var(--hay); }
.strip-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--ground); border-top: 1.5px solid var(--ink); }
.strip-text { position: absolute; z-index: 1; left: 18px; top: 14px; right: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.strip-title { font: 700 24px/1.1 var(--display); }
.strip-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; font-weight: 600; font-size: 15px; }

.roamer { position: absolute; bottom: 14px; left: 8px; width: 96px; animation: roam 16s linear infinite; }
.roamer-shadow { position: absolute; left: 18px; bottom: -3px; width: 60px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0.18; animation: shadow 0.7s ease-in-out infinite; }
.roamer-face { animation: face 16s linear infinite; }
.roamer-hop { transform-origin: 48px 44px; animation: hop 0.7s ease-in-out infinite; }
.bunny { display: block; overflow: visible; }
.bunny .ink { stroke: var(--ink); stroke-width: 1.8; }
.bunny .fur { fill: var(--fur3); }
.bunny .tail { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
.bunny .eye { fill: var(--ink); }
.bunny .nose { fill: var(--acc); }
.bunny .ear { transform-origin: 63px 24px; animation: ear 0.7s ease-in-out infinite; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; color: var(--ink); }
.chip:hover { text-decoration: none; }
.chip span { font-weight: 400; }
.chip.on { background: var(--ink); color: var(--accInk); }

.barn-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.hutches { flex: 999 1 440px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hutches .empty { grid-column: 1 / -1; }
.hutch { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink); min-height: 44px; }
.hutch:hover { border-color: var(--ink); text-decoration: none; }
.hutch.sel { box-shadow: 0 0 0 2px var(--ink); }
.hutch.alert { border-color: var(--warn); }
.hutch.alert .hutch-status { color: var(--warn); font-weight: 600; }
.kits { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px; min-height: 18px; }
.kit { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--fur1); animation: kithop 1.8s ease-in-out infinite; }
.kit:nth-child(3n) { animation-delay: -0.6s; }
.kit:nth-child(3n + 1) { animation-delay: -1.2s; }
.kit:nth-child(3n + 2) { animation-delay: -1.8s; }
.kit.fur1 { background: var(--fur1); }
.kit.fur2 { background: var(--fur2); }
.kit.fur3 { background: var(--fur3); }
.kit.fur4 { background: var(--fur4); }
.kit.fur5 { background: var(--fur5); }
.hutch-top { align-self: stretch; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--dim); }
.hutch-name { font: 700 18px/1.1 var(--display); overflow-wrap: anywhere; }
.hutch-status { font-size: 13px; color: var(--dim); }

.token { position: relative; display: block; width: 76px; height: 88px; animation: bob 3.2s ease-in-out infinite; }
.token .ear { position: absolute; top: 0; width: 14px; height: 36px; border-radius: 8px 8px 4px 4px; border: 1.5px solid var(--ink); background: var(--fur1); }
.token .e1 { left: 20px; transform: rotate(-9deg); }
.token .e2 { left: 42px; transform: rotate(9deg); }
.token .ring { position: absolute; left: 0; top: 12px; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--acc) calc(var(--p) * 1%), var(--line) 0); }
.token .face { position: absolute; left: 6px; top: 18px; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--fur1); display: flex; align-items: center; justify-content: center; font: 700 24px var(--display); color: var(--ink); }
.token.fur1 .ear, .token.fur1 .face { background: var(--fur1); }
.token.fur2 .ear, .token.fur2 .face { background: var(--fur2); }
.token.fur3 .ear, .token.fur3 .face { background: var(--fur3); }
.token.fur4 .ear, .token.fur4 .face { background: var(--fur4); }
.token.fur5 .ear, .token.fur5 .face { background: var(--fur5); }
.hutch.alert .token { animation: alerthop 1.4s ease-in-out infinite; }
.hutch:nth-child(3n) .token { animation-delay: -0.8s; }
.hutch:nth-child(3n + 1) .token { animation-delay: -1.6s; }
.hutch:nth-child(3n + 2) .token { animation-delay: -2.4s; }

.side-col { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.detail { background: var(--ink); color: var(--accInk); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.detail-sub { font-size: 13px; }
.detail-name { font: 700 30px/1 var(--display); overflow-wrap: anywhere; }
.detail-text { font-size: 16px; text-wrap: pretty; }
.detail-link { color: var(--accInk); text-decoration: underline; font-size: 15px; padding: 12px 0; }
.detail .btn { width: 100%; }

/* ---- Today ------------------------------------------------------------------------------- */
.today-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.today-main { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.forum-card { flex: 1 1 280px; min-width: 0; background: var(--ink); color: var(--accInk); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.forum-card h2 { font: 700 20px var(--display); }
.forum-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--dim); color: var(--accInk); }
.forum-row:hover { text-decoration: none; }
.forum-row-title { font-weight: 600; text-decoration: underline; }
.forum-row-sub { font-size: 14px; }
.tasks { padding: 28px 18px; }
.tasks:has(.band) { padding: 0; overflow: hidden; }
.tasks-title { font: 700 20px var(--display); }
.card .band { margin: 0; padding: 12px 18px; font: 600 13px var(--body); color: var(--dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card.tasks > .band:first-child { border-top: 0; }
.card .band--overdue { color: var(--warn); }
.card .band--today { background: var(--hay); color: var(--ink); }
.task-list { list-style: none; margin: 0; padding: 0; }
.task { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 56px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.circle { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); }
.circle--late { border-color: var(--warn); }
.task-day { flex: none; width: 44px; text-align: center; font: 700 20px/1.1 var(--display); }
.task-day span { display: block; font: 400 12px var(--body); color: var(--dim); }
.task-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.task-title { font-weight: 600; overflow-wrap: anywhere; }
.task-meta { font-size: 14px; color: var(--dim); }
.task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.task-actions form { margin: 0; }
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 400 14px var(--body); color: var(--acc); cursor: pointer; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.link--dim { color: var(--dim); }
.doe-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.doe-line { display: flex; justify-content: space-between; gap: 12px; }
.bar { display: block; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--acc); }

/* ---- lists, facts, forms ----------------------------------------------------------------- */
.list h2 { margin-bottom: 4px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); }
.row:hover { text-decoration: none; }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-name { font-weight: 600; overflow-wrap: anywhere; }
.row-meta { font-size: 14px; color: var(--dim); }
.row-end { font-size: 14px; color: var(--dim); white-space: nowrap; }

.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
.facts > div { padding: 12px 14px; border-top: 1px solid var(--line); }
.facts dt { font-size: 13px; color: var(--dim); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.notes { margin: 0; font-size: 17px; white-space: pre-line; overflow-wrap: anywhere; }

.form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field .label, .field legend { font-size: 14px; font-weight: 600; padding: 0; }
.input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 16px var(--body); }
textarea.input { min-height: 120px; resize: vertical; }
.input.narrow { width: 110px; }
.hint { font-size: 13px; color: var(--dim); }
.err { font-size: 14px; font-weight: 600; color: var(--warn); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pair { display: flex; flex-wrap: wrap; gap: 12px; }
.unit { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 400; }
.choice input { width: 22px; height: 22px; accent-color: var(--acc); }
fieldset.kit-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; }
fieldset.kit-row legend { padding: 0 6px; }
details.field summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- events on the animal page ---- */
.events h3 { font-size: 17px; font-weight: 700; }
.event-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 12px; }
.event-form { max-width: none; }
.events-empty { margin: 16px 0 0; }
.event-list { list-style: none; margin: 20px 0 0; padding: 0; }
.event-list li { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.event-main { min-width: 0; }
.event-meta { font-size: 13px; color: var(--dim); }
.event-weight { font-weight: 600; font-size: 17px; }
.event-text { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ---- animation ---------------------------------------------------------------------------- */
@keyframes roam { 0% { left: 8px; } 42%, 50% { left: calc(100% - 104px); } 92%, 100% { left: 8px; } }
@keyframes face { 0%, 46% { transform: scaleX(1); } 46.01%, 96% { transform: scaleX(-1); } 96.01%, 100% { transform: scaleX(1); } }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-22px) rotate(-8deg); } 60% { transform: translateY(0) rotate(3deg); } 80% { transform: translateY(0) rotate(0); } }
@keyframes ear { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes shadow { 0%, 60%, 100% { transform: scaleX(1); opacity: 0.18; } 30% { transform: scaleX(0.6); opacity: 0.08; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes kithop { 0%, 55%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px); } 35% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes alerthop { 0%, 60%, 100% { transform: translateY(0); } 15% { transform: translateY(-9px); } 30% { transform: translateY(0); } 42% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
    .roamer, .roamer-shadow, .roamer-face, .roamer-hop, .bunny .ear, .token, .hutch.alert .token, .kit { animation: none; }
    .roamer { left: calc(50% - 48px); }
    .lp-strip .roamer--2 { left: calc(22% - 38px); }
    .lp-strip .roamer--3 { left: calc(78% - 30px); }
}

/* ---- phone -------------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .shell { --pad: 18px; --padTop: 8px; --h1: 34px; }
    .side { display: none; }
    .phonebar { display: flex; }
    .tabs { display: grid; }
    .head-actions { flex: 1 1 100%; }
    .head-actions .btn { flex: 1 1 0; }
    .detail-link, .phonebar-link { min-height: 44px; display: inline-flex; align-items: center; }
    .barn-body .side-col { order: -1; flex-basis: 100%; }
    .input.narrow { width: 100%; min-width: 90px; }
    .pair .unit { flex: 1 1 120px; }
    .task-actions { flex: 1 1 100%; padding-left: 38px; }
}

/* ---- pedigree ---------------------------------------------------------------------------- */
.ped-gap-list { margin: 0 0 8px; padding-left: 20px; }
.ped-scroll { overflow-x: auto; max-width: 100%; border-radius: 18px; }
.ped-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); grid-template-rows: repeat(16, minmax(46px, auto)); gap: 6px; min-width: 780px; }
.ped-cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 6px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.ped-cell--root { background: var(--ink); color: var(--accInk); border-color: var(--ink); }
.ped-cell--unknown { background: var(--soft); border-style: dashed; }
.ped-label { font-size: 12px; color: var(--dim); }
.ped-cell--root .ped-label, .ped-cell--root .ped-meta { color: var(--accInk); }
.ped-name { font-weight: 600; overflow-wrap: anywhere; }
.ped-self { font: 700 20px/1.1 var(--display); overflow-wrap: anywhere; }
.ped-meta { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.ped-unknown { color: var(--dim); }
.ped-page { display: flex; flex-direction: column; gap: 18px; }

/* ---- print sheet: its own page, and the print rules for the pedigree page ---------------- */
.sheet-page { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sheet-herd { font-size: 14px; color: var(--dim); }
.sheet-prefix { margin-left: 10px; }
.sheet-head h1 { font-size: 34px; margin: 0; }

@page { size: landscape; margin: 10mm; }
@media print {
    .side, .phonebar, .tabs, .head-actions, .ped-hint, .no-print, .notice, .ped-gaps { display: none; }
    body { background: transparent; color: var(--ink); }
    .shell { display: block; min-height: 0; }
    .page, .sheet-page { padding: 0; }
    .ped-scroll { overflow: visible; }
    .ped-grid { min-width: 0; width: 100%; }
    .ped-cell, .ped-cell--root, .ped-cell--unknown { background: transparent; color: var(--ink); border-color: var(--ink); }
    .ped-label, .ped-meta, .ped-cell--root .ped-label, .ped-cell--root .ped-meta { color: var(--ink); }
    .ped-name { color: var(--ink); }

    /* One landscape page. 16 rows of 10mm and 15 gaps of 1mm are 175mm; the page has 190mm inside
       its margins, and the head takes one line of about 7mm. */
    .sheet-page, .ped-page { gap: 2mm; }

    /* The head is one line on both pages: 14pt at line-height 1.45 is 7.2mm. Print sheet: head 7.2
       + gap 2 + grid 175 = 184.2mm. Member page: .page has one visible child, .ped-page, so the
       same 7.2 + 2 + 175 = 184.2mm. Both are under the 190mm usable. */
    .sheet-head, .ped-page .head, .ped-page .head-title { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4mm; min-width: 0; white-space: nowrap; overflow: hidden; }
    .sheet-herd, .ped-page .eyebrow { font-size: 9pt; color: var(--ink); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .sheet-head h1, .ped-page .head h1 { font-size: 14pt; line-height: 1.45; letter-spacing: normal; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ped-grid { grid-template-rows: repeat(16, 10mm); gap: 1mm; }
    .ped-cell { padding: 1px 2px; border-radius: 2mm; break-inside: avoid; overflow: hidden; }
    .ped-name { font-size: 8pt; line-height: 1.15; }
    .ped-self { font-size: 11pt; }
    .ped-meta { font-size: 7pt; line-height: 1.15; }
    .ped-label { font-size: 6pt; line-height: 1.1; }
    .ped-cell--gen3 .ped-label, .ped-cell--gen4 .ped-label { display: none; }
}

/* ---- photos on an animal page ---- */
.photos-empty { margin: 8px 0 0; }
.photo-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.photo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.photo-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-bar .btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
.photo-cover { font-size: 14px; font-weight: 600; color: var(--dim); min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.photo-form { margin-top: 20px; max-width: none; }

/* ---- cover photo, sharing, visibility choice (member pages) ---- */
.cover { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 22px; border: 1px solid var(--line); background: var(--soft); }
.mono { font: 13px ui-monospace, monospace; }
.share p { margin: 8px 0; }
.share-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.choice--help { align-items: flex-start; padding: 6px 0; }
.choice--help input { margin-top: 2px; flex: none; }

/* ---- public pages: rabbit, herd, breeders ---- */
.pub-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 48px; }
.logo--pub { --lh: 38px; }
.pub-nav { display: flex; align-items: center; gap: 20px; font-weight: 500; }
.pub-nav a:not(.btn) { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.pub-page { padding: 0 48px 40px; display: flex; flex-direction: column; gap: 20px; }
.pub-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 20px 48px; font-size: 14px; color: var(--dim); }
.pub-head { display: flex; flex-direction: column; gap: 4px; }
.pub-name { margin: 0; font: 700 56px/1 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pub-sub { font-size: 17px; color: var(--dim); margin-top: 8px; }
.pub-h2 { margin: 0 0 12px; font: 700 24px var(--display); }
.pub-h2--small { font-size: 20px; margin-bottom: 10px; }
.pub-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pub-main { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pub-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pub-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pub-facts > div { background: var(--card); padding: 14px 16px; }
.pub-facts dt { font-size: 13px; color: var(--dim); }
.pub-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pub-more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pub-more a { font-weight: 600; }

.breeder { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.breeder-id { display: flex; gap: 14px; align-items: center; }
.breeder-text { min-width: 0; }
.breeder-label { font-size: 13px; color: var(--dim); }
.breeder-name { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.breeder-meta { font-size: 14px; color: var(--dim); }
.breeder-links { display: flex; flex-direction: column; gap: 10px; }
.breeder-herd { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--hay); }
.avatar--blank { display: inline-flex; align-items: center; justify-content: center; font: 700 22px var(--display); color: var(--ink); }

.pub-rabbits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pub-rabbit { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pub-rabbit-link { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.pub-rabbit-link:hover { text-decoration: none; }
.pub-rabbit-link img, .pub-rabbit-blank { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font: 700 28px var(--display); }
.pub-rabbit-name { font-weight: 600; overflow-wrap: anywhere; }

.herd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.herd-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 4px; height: 100%; }
.herd-card h2 { margin: 0; font: 700 20px var(--display); overflow-wrap: anywhere; }
.herd-meta, .herd-breeds { font-size: 14px; color: var(--dim); overflow-wrap: anywhere; }
.herd-count { font-weight: 600; }
.pager { display: flex; gap: 10px; margin-top: 16px; }

@media (max-width: 760px) {
    .pub-bar { padding: 12px 18px; }
    .pub-page { padding: 0 18px 32px; }
    .pub-foot { padding: 20px 18px; }
    .pub-name { font-size: 42px; }
    .cover { aspect-ratio: 4 / 3; }
    /* One column, in the design's order: title, breeder, facts, pedigree, more from this herd. */
    .pub-cols { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .pub-cols:has(.o-title) .pub-main, .pub-cols:has(.o-title) .pub-side { display: contents; }
    .o-title { order: 1; }
    .o-breeder { order: 2; }
    .o-facts { order: 3; }
    .o-ped { order: 4; min-width: 0; }
    .o-more { order: 5; }
}

/* ---- landing page ---- */
.lp { --pad: 48px; background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.5; overflow-x: hidden; }
.btn--ink { background: var(--ink); color: var(--accInk); }
.lp-hero { background: var(--hay); }
.lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--pad); }
.logo--lp { --lh: 44px; }
.lp-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.lp-link { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.lp-hero-body { padding: 28px var(--pad) 0; }
.lp-h1 { margin: 0; font: 800 clamp(48px, 9.5vw, 112px)/0.92 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.lp-acc { color: var(--acc); }
.lp-hero-row { display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: flex-end; margin-top: 36px; }
.lp-hero-copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.lp-lead { margin: 0; font-size: 20px; max-width: 500px; text-wrap: pretty; }
.lp-lead--light { font-size: 19px; max-width: 480px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-big { min-height: 54px; padding: 0 28px; font-size: 17px; }
.lp-small { font-size: 15px; }
.lp-small a, .lp-hero a:not(.btn):not(.logo) { color: var(--ink); text-decoration: underline; }

.lp-try { flex: 1 1 320px; min-width: 0; max-width: 440px; transform: rotate(-2deg); background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; box-shadow: 8px 10px 0 var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.lp-try .lp-small { font-size: 14px; color: var(--dim); }
.lp-kicker { font-size: 14px; font-weight: 600; color: var(--acc); }
.lp-try-q { font: 800 28px/1.05 var(--display); letter-spacing: -0.01em; }
.lp-try-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-try-btns .btn { min-height: 44px; font-size: 15px; padding: 0 10px; }
.lp-try-btns .btn:disabled { opacity: 0.35; cursor: default; }
.lp-try-rows { margin: 0; display: flex; flex-direction: column; }
.lp-try-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.lp-try-rows dt { color: var(--dim); }
.lp-try-rows dd { margin: 0; font: 800 22px var(--display); }
.lp-hl { background: var(--hay); padding: 0 8px; border-radius: 8px; }
.lp-strip { position: relative; height: 104px; }
.lp-strip .roamer { bottom: 6px; }
/* Three bunnies at scales 1, 0.8 and 0.62; each roamer and its face share one pace so the bunny faces where it goes. */
.lp-strip .roamer, .lp-strip .roamer-face { animation-duration: 18s; }
.lp-strip .roamer--2, .lp-strip .roamer--2 .roamer-face { animation-duration: 25s; animation-delay: -9s; }
.lp-strip .roamer--3, .lp-strip .roamer--3 .roamer-face { animation-duration: 31s; animation-delay: -20s; }
.lp-strip .roamer--2 { transform: scale(0.8); transform-origin: left bottom; }
.lp-strip .roamer--3 { transform: scale(0.62); transform-origin: left bottom; }
.roamer--2 .bunny .fur { fill: var(--fur2); }
.roamer--3 .bunny .fur { fill: var(--fur4); }

.lp-tour { padding: 56px var(--pad) 72px; display: flex; flex-direction: column; gap: 28px; }
.lp-h2 { margin: 0; font: 800 clamp(36px, 6vw, 60px)/0.98 var(--display); letter-spacing: -0.03em; max-width: 820px; text-wrap: balance; }
.lp-h3 { margin: 0 0 6px; font: 800 24px/1.1 var(--display); }
.lp-tiles { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-tile { flex: 1 1 280px; min-width: 0; border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.lp-tile p { margin: 0; }
.lp-tile--wide { flex: 2 1 420px; }
.lp-tile--acc { background: var(--acc); color: var(--accInk); }
.lp-tile--acc .lp-h3 { font-size: 30px; line-height: 1; }
.lp-tile--card { background: var(--card); border: 1.5px solid var(--ink); padding: 16px; }
.lp-tile--card .lp-h3, .lp-tile--card p { padding: 0 8px; }
.lp-tile--ink { background: var(--ink); color: var(--accInk); }
.lp-tile--hay { background: var(--hay); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
.lp-tile-copy { flex: 1 1 240px; min-width: 0; max-width: 380px; }
.lp-dim { color: var(--dim); }
.lp-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-task { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 16px; border: 0; border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lp-tick { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--ink); }
.lp-task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-task-title { font-weight: 600; }
.lp-task-meta { font-size: 14px; color: var(--dim); }
.lp-task[aria-pressed="true"] .lp-tick { background: var(--acc); }
.lp-task[aria-pressed="true"] .lp-task-text { opacity: 0.55; }
.lp-task[aria-pressed="true"] .lp-task-title { text-decoration: line-through; }
.lp-done { font: 800 22px var(--display); }
.lp-photo { position: relative; flex: 1; min-height: 200px; border-radius: 16px; background: repeating-linear-gradient(135deg, var(--bg) 0 12px, var(--soft) 12px 24px); margin-bottom: 8px; }
.lp-photo-name { position: absolute; left: 14px; bottom: -12px; transform: rotate(-4deg); font: 800 26px var(--display); background: var(--hay); padding: 2px 14px; border-radius: 10px; border: 1.5px solid var(--ink); }
.lp-ped { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; }
.lp-ped-self { grid-row: 1 / 3; display: flex; align-items: center; background: var(--hay); color: var(--ink); border-radius: 14px; padding: 12px; font-weight: 600; }
.lp-ped-box { border: 1.5px solid var(--accInk); border-radius: 14px; padding: 10px 12px; }
.lp-ped-box small { display: block; font-size: 12px; }
.lp-chips { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-chip { border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.lp-chip--card { background: var(--card); border: 1.5px solid var(--ink); transform: rotate(-3deg); }
.lp-chip--ink { background: var(--ink); color: var(--accInk); transform: rotate(2deg); }

.lp-people { background: var(--ink); color: var(--accInk); padding: 72px var(--pad); display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.lp-people-copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.lp-hayc { color: var(--hay); }
.lp-people-card { flex: 1 1 320px; max-width: 360px; transform: rotate(-2deg); background: var(--card); color: var(--ink); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.lp-breeder { display: flex; gap: 12px; align-items: center; }
.lp-breeder-name { font-weight: 600; font-size: 18px; }
.lp-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--hay); display: flex; align-items: center; justify-content: center; font: 800 22px var(--display); }
.lp-breeder-links { display: flex; flex-direction: column; gap: 10px; }
.lp-foot { padding: 20px var(--pad); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--dim); }

@media (max-width: 760px) {
    .lp { --pad: 18px; }
    .logo--lp { --lh: 38px; }
    .lp-nav { gap: 12px; }
    .lp-nav .lp-link[href="#tour"] { display: none; }
    .lp-big { flex: 1 1 auto; }
    .lp-try { transform: none; box-shadow: 5px 6px 0 var(--ink); max-width: none; }
    .lp-people-card { transform: none; max-width: none; }
}

/* ---- account, help, privacy and terms ---- */
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.shell-foot { padding: 16px var(--pad) 24px; font-size: 14px; color: var(--dim); }
.phonebar-links { display: flex; gap: 16px; }
.plain-list { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose { max-width: 42rem; display: flex; flex-direction: column; gap: 12px; }
.prose h1 { margin: 0; font: 700 40px/1.1 var(--display); }
.prose h2 { margin: 16px 0 0; font: 700 22px var(--display); }
.prose p, .prose ul { margin: 0; }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---- Field-book details: quiet paper, expressive rabbits, clear records ----------------- */
.section-label { display: block; font: 600 11px/1.4 var(--body); letter-spacing: .04em; color: var(--acc); }
.section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.section-heading h2 { font: 700 24px/1.1 var(--display); margin: 0; }
.section-heading > span { font-size: 13px; color: var(--dim); }
.side { background: var(--card); }
.side-in { padding-top: 30px; }
.nav a { min-height: 46px; border-radius: 999px; }
.nav a.on { position: relative; }
.nav a.on::after { content: ''; position: absolute; right: 16px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--hay); }
.page { max-width: 1500px; width: 100%; margin-inline: auto; gap: 22px; }
.eyebrow { margin-bottom: 7px; }
.btn, .hutch, .chip { transition: background .18s, border-color .18s, transform .18s; }
.btn:hover { transform: translateY(-1px); }
.btn--primary:hover { background: var(--ink); }
.btn--outline:hover { background: var(--soft); }
.btn--hay:hover { background: var(--card); }
.strip { height: 144px; border: 1px solid var(--ground); }
.strip-text { top: 18px; left: 22px; right: auto; max-width: 52%; gap: 0 14px; }
.strip-text .section-label { flex-basis: 100%; color: var(--ink); margin-bottom: 5px; }
.strip-title { font-size: 28px; }
.strip-floor { height: 17px; }
.strip .roamer { bottom: 8px; left: 58%; animation: none; opacity: .9; }
.strip .roamer-face { animation: none; }
.barn-totals { position: absolute; right: 22px; top: 25px; display: flex; gap: 22px; }
.barn-totals > div { display: flex; flex-direction: column; padding-left: 22px; border-left: 1px solid var(--ink); }
.barn-totals strong { font: 700 32px/1 var(--display); }
.barn-totals span { font-size: 12px; margin-top: 4px; }
.chip { border-color: var(--line); background: var(--card); }
.chip.on { border-color: var(--ink); }
.chip span { display: inline-flex; justify-content: center; align-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 12px; }
.chip.on span { background: var(--hay); }
.hutch { position: relative; padding: 0 14px 16px; gap: 10px; overflow: hidden; border-radius: 20px; }
.hutch-top { background: var(--soft); margin: 0 -14px 0; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.hutch.sel .hutch-top { background: var(--hay); }
.hutch-name { font-size: 21px; }
.hutch:hover { transform: translateY(-2px); }
.hutch.sel { box-shadow: 0 0 0 2px var(--ink); }
.detail { padding: 24px; border-radius: 22px; border-top: 5px solid var(--hay); }
.detail .section-label { color: var(--hay); }
.detail-sub { opacity: .85; }
.detail-name { font-size: 36px; }
.barn-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; background: var(--card); border: 1px dashed var(--line); border-radius: 22px; padding: 24px; }
.barn-empty .rabbit-portrait { width: 170px; flex: 0 1 170px; }
.barn-empty > div { flex: 1 1 200px; }
.barn-empty h2 { color: var(--ink); }
.barn-empty p { margin: 10px 0 18px; }
.welcome-note { max-width: 720px; padding: 20px 24px; border-left: 4px solid var(--acc); background: var(--soft); border-radius: 0 18px 18px 0; }
.welcome-note p { font: 700 23px/1.25 var(--display); margin: 8px 0 0; text-wrap: balance; }
.forum-card { background: var(--soft); color: var(--ink); padding: 24px; border: 1px solid var(--line); border-top: 4px solid var(--acc); border-radius: 22px; }
.forum-row { color: var(--ink); border-color: var(--line); }
.forum-row-title { color: var(--acc); }
.forum-row-sub { font-size: 14px; color: var(--dim); }
.task-actions .link:not(.link--dim) { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; color: var(--acc); font-weight: 600; }
.task-actions { gap: 6px 16px; }
.task-actions .link:not(.link--dim):hover { background: var(--hay); text-decoration: none; }
.task { min-height: 80px; }
.expecting { padding: 24px; }
.expecting h2 { margin-top: 5px; }
.doe-row { padding: 12px 0; }

/* A shared illustrated portrait. Colour always comes from the central palette. */
.rabbit-portrait { display: block; width: 100%; height: auto; overflow: visible; }
.portrait-sun { fill: var(--hay); }
.portrait-meadow { fill: var(--soft); }
.portrait-shadow { fill: var(--line); }
.portrait-grass { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; }
.portrait-fur { fill: var(--fur2); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.portrait-tail, .portrait-cheek { fill: var(--card); }
.portrait-tail { stroke: var(--ink); stroke-width: 2; }
.portrait-inner { fill: var(--fur3); }
.portrait-eye { fill: var(--ink); }
.portrait-nose { fill: var(--acc); }
.portrait-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }

.lp-hero-body > .section-label { margin-bottom: 20px; }
.lp-hero-body { max-width: 1440px; margin: auto; padding-top: 42px; }
.lp-h1 { max-width: 1150px; }
.lp-hero-row { margin-top: 40px; align-items: center; }
.lp-hero-copy { gap: 24px; }
.lp-hero-copy .lp-lead { font-size: 21px; }
.lp-try { position: relative; }
.lp-try::before { content: ''; position: absolute; width: 74px; height: 24px; background: var(--acc); top: -12px; right: 38px; transform: rotate(5deg); border: 1px solid var(--ink); }
.lp-kicker { padding-top: 2px; }
.lp-ribbon { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: center; justify-content: center; background: var(--ink); color: var(--hay); padding: 18px; font: 700 23px/1.2 var(--display); }
.lp-ribbon span + span { color: var(--accInk); }
.lp-tour { max-width: 1440px; margin: auto; gap: 24px; }
.lp-tour > .section-label { margin-bottom: -10px; }
.lp-photo { background: var(--soft); display: flex; align-items: center; justify-content: center; min-height: 250px; overflow: visible; }
.lp-photo .rabbit-portrait { max-width: 280px; }
.sample-label { position: absolute; right: 12px; top: 12px; font-size: 10px; letter-spacing: .02em; color: var(--dim); }
.lp-photo-name { left: 18px; bottom: 8px; }
.lp-ped { margin-bottom: 10px; min-height: 150px; }
.lp-people-stack { flex: 1 1 340px; max-width: 440px; display: flex; flex-direction: column; align-items: stretch; padding: 10px 12px; }
.lp-sample-rabbit { position: relative; background: var(--soft); color: var(--ink); border-radius: 24px; padding: 16px; display: flex; align-items: center; transform: rotate(3deg); }
.lp-sample-rabbit .rabbit-portrait { width: 45%; }
.lp-sample-rabbit > div { display: flex; flex-direction: column; gap: 6px; }
.lp-sample-rabbit strong { font: 800 32px/1 var(--display); }
.lp-sample-rabbit > div > span:last-child { font-size: 12px; }
.lp-people-card { position: relative; flex: auto; margin: -12px 8px 0 24px; max-width: none; border: 1.5px solid var(--ink); }
.lp-paper-note { position: relative; align-self: end; font: 700 19px var(--display); background: var(--hay); color: var(--ink); border-radius: 12px; padding: 12px 18px; transform: rotate(2deg); margin: -4px -8px 0 0; }
.lp-foot > span, .pub-foot > span { font: 700 18px var(--display); color: var(--ink); margin-right: auto; }

.pub-bar, .pub-page, .pub-foot { max-width: 1500px; width: 100%; margin-inline: auto; }
.pub-bar { padding-block: 24px; }
.pub-page { gap: 28px; }
.rabbit-identity { padding: 24px 0 14px; }
.rabbit-identity .section-label { margin-bottom: 10px; }
.rabbit-identity--illustrated { display: flex; align-items: center; gap: 24px; padding: 20px; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); }
.rabbit-identity > div { min-width: 0; }
.identity-art { flex: 0 0 180px; text-align: center; }
.identity-art span { font-size: 11px; color: var(--dim); }
.breeder { border-top: 4px solid var(--acc); padding: 24px; }
.public-pedigree { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.public-pedigree .ped-cell--root { background: var(--soft); color: var(--ink); border-color: var(--line); }
.public-pedigree .ped-cell--root .ped-label, .public-pedigree .ped-cell--root .ped-meta { color: var(--dim); }
.public-pedigree .ped-self { font-size: 26px; }
.public-pedigree .ped-grid { grid-template-rows: repeat(16, minmax(34px, auto)); }
.public-pedigree .ped-cell--unknown { background: var(--bg); }
.pub-more li { padding: 12px 0; border-bottom: 1px solid var(--line); }

@media (max-width: 1100px) and (min-width: 761px) {
    .barn-totals { gap: 12px; right: 14px; }
    .barn-totals > div { padding-left: 12px; }
    .strip-title { font-size: 23px; }
}
@media (max-width: 760px) {
    .page { gap: 18px; }
    .phonebar { align-items: center; padding-top: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); background: var(--card); margin-bottom: 12px; }
    .logo--top { --lh: 31px; }
    .phonebar-links { gap: 12px; }
    .phonebar-link { font-size: 12px; }
    .strip { height: 125px; }
    .strip-text { left: 16px; top: 14px; max-width: 69%; }
    .strip-title { font-size: 23px; }
    .strip .roamer { animation: none; left: auto; right: 10px; bottom: 8px; }
    .strip .roamer-face { animation: none; }
    .barn-totals { display: none; }
    .chips { gap: 6px; }
    .chip { padding-inline: 12px; }
    .section-heading h2 { font-size: 22px; }
    .section-heading > span { font-size: 12px; }
    .barn-body { gap: 18px; }
    .barn-body .side-col { order: 1; }
    .detail { padding: 20px; }
    .hutches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hutch { gap: 8px; }
    .hutch-name { font-size: 20px; }
    .hutch-status { min-height: 19px; }
    .barn-empty { padding: 20px; text-align: center; justify-content: center; }
    .barn-empty .rabbit-portrait { width: 140px; flex-basis: 140px; }
    .task-actions { padding-left: 38px; }
    .forum-card { flex-basis: 100%; }
    .logo--lp { --lh: 34px; }
    .lp-nav .btn { white-space: nowrap; padding-inline: 16px; }
    .lp-hero-body { padding-top: 26px; }
    .lp-hero-body > .section-label { margin-bottom: 16px; }
    .lp-h1 { font-size: clamp(46px, 12vw, 76px); line-height: .99; letter-spacing: -.045em; }
    .lp-hero-row { margin-top: 26px; gap: 32px; }
    .lp-hero-copy .lp-lead { font-size: 18px; }
    .lp-try { flex-basis: 100%; }
    .lp-try-q { font-size: 27px; }
    .lp-ribbon { gap: 4px; padding: 16px; flex-direction: column; font-size: 19px; }
    .lp-tour { padding-block: 42px; }
    .lp-tile { padding: 22px; }
    .lp-tile--card { padding: 14px; }
    .lp-people { padding-block: 44px; gap: 28px; }
    .lp-people-stack { max-width: 100%; padding-inline: 4px; }
    .lp-sample-rabbit strong { font-size: 28px; }
    .lp-people-card { margin-left: 12px; transform: rotate(-2deg); }
    .lp-paper-note { margin-right: 0; font-size: 17px; }
    .lp-foot > span, .pub-foot > span { flex-basis: 100%; }
    .pub-bar { padding-block: 16px; gap: 10px; }
    .logo--pub { --lh: 30px; }
    .pub-nav { gap: 10px; font-size: 13px; }
    .pub-nav .btn { padding-inline: 14px; font-size: 13px; }
    .pub-page { gap: 20px; }
    .rabbit-identity--illustrated { gap: 12px; padding: 16px 12px; }
    .identity-art { flex-basis: 100px; }
    .identity-art span { font-size: 10px; }
    .rabbit-identity .section-label { font-size: 10px; }
    .rabbit-identity .pub-name { font-size: 36px; }
    .rabbit-identity .pub-sub { font-size: 14px; }
    .public-pedigree { padding: 18px 12px; }
    .public-pedigree .ped-scroll { border: 1px solid var(--line); padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .hutch, .chip { transition: none; }
    .btn:hover, .hutch:hover { transform: none; }
}

#hutch-detail { scroll-margin-top: 100vh; }
.public-pedigree .ped-hint { margin-bottom: -8px; }
@media (max-width: 760px) {
    #hutch-detail { scroll-margin-top: 18px; }
    .strip .roamer { left: auto; width: 80px; }
    .strip .bunny { width: 80px; height: 60px; }
}

/* ---- Living rabbits: short bursts, soft landings, long rests ----------------------------- */
.lp-strip { height: 152px; }
.lp-strip .roamer, .strip .roamer { left: 0; right: auto; animation: none; opacity: 1; cursor: pointer; touch-action: manipulation; }
.roamer-size { position: relative; transform-origin: center bottom; }
.lp-strip .roamer--2 .roamer-size { transform: scale(.82); }
.lp-strip .roamer--3 .roamer-size { transform: scale(.68); }
.roamer-face, .roamer-hop, .roamer-shadow, .bunny .ear { animation: none; }
.strip .roamer { bottom: 40px; }
.roamer-hop { transform-origin: 48px 64px; }
.rabbit-awake .bunny .ear { animation: rabbit-ear 7.3s ease-in-out infinite; }
.rabbit-awake .bunny .eye { transform-box: fill-box; transform-origin: center; animation: rabbit-blink 6.1s ease-in-out infinite; }
.rabbit-awake .bunny .nose { transform-box: fill-box; transform-origin: center; animation: rabbit-sniff 4.8s ease-in-out infinite; }
.roamer--2 .bunny .ear, .roamer--2 .bunny .eye { animation-delay: -2.3s; }
.roamer--3 .bunny .ear, .roamer--3 .bunny .eye { animation-delay: -4.7s; }
.rabbit-hello { position: absolute; z-index: 2; top: 0; left: var(--pad, 22px); min-height: 44px; padding: 0 8px; background: transparent; border: 0; border-radius: 10px; color: var(--ink); font: 500 13px var(--body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rabbit-hello:hover { background: var(--soft); }
.rabbit-hello--barn { top: auto; bottom: 0; left: 57%; font-size: 12px; min-width: 100px; }
.token, .hutch.alert .token { animation: none; transition: transform .25s ease; }
.hutch:hover .token, .hutch:focus-visible .token { transform: translateY(-4px) rotate(-4deg); }
.hutch.alert .token { animation: rabbit-attention 8s ease-in-out infinite; }
.kit { animation: rabbit-attention 7s ease-in-out infinite; }
.lp-tick { transition: background .2s, border-color .2s; }
.lp-task[aria-pressed="true"] .lp-tick { border-color: var(--acc); animation: task-satisfied .38s ease-out; }
.lp-task-text { transition: opacity .2s; }
.lp-done:not([hidden]) { animation: task-arrive .4s ease-out; }
.portrait-eye { transform-box: fill-box; transform-origin: center; animation: rabbit-blink 8.3s ease-in-out infinite; }
@keyframes rabbit-ear {
    0%, 70%, 82%, 100% { transform: rotate(0); }
    73% { transform: rotate(-19deg); }
    76% { transform: rotate(8deg); }
    79% { transform: rotate(-7deg); }
}
@keyframes rabbit-blink {
    0%, 43%, 47%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(.08); }
}
@keyframes rabbit-sniff {
    0%, 61%, 77%, 100% { transform: translateX(0); }
    64%, 70% { transform: translateX(1px); }
    67%, 73% { transform: translateX(-.6px); }
}
@keyframes rabbit-attention {
    0%, 84%, 100% { transform: translateY(0); }
    88% { transform: translateY(-6px); }
    91% { transform: translateY(0); }
    94% { transform: translateY(-3px); }
    97% { transform: translateY(0); }
}
@keyframes task-satisfied {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); }
    70% { transform: scale(.92); }
    100% { transform: scale(1); }
}
@keyframes task-arrive {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
    .lp-strip { height: 140px; }
    .rabbit-hello--barn { left: auto; right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .rabbit-awake .bunny .ear, .rabbit-awake .bunny .eye, .rabbit-awake .bunny .nose,
    .portrait-eye, .hutch.alert .token, .kit, .lp-task[aria-pressed="true"] .lp-tick, .lp-done:not([hidden]) { animation: none; }
    .token, .lp-tick, .lp-task-text { transition: none; }
    .hutch:hover .token, .hutch:focus-visible .token { transform: none; }
}
/* The greeting sits on the ground strip, with the rabbit's feet on its upper edge. */
.strip .strip-floor { height: 48px; }