.pet-page { padding-bottom: 3rem; }
.pet-page .wrap { min-width: 0; }
.pet-lead { max-width: 65ch; color: var(--ink-2); margin: .75rem 0 1.25rem; }
.pet-reference { margin: 2rem 0; }
.pet-reference > h2 { font-family: var(--font-display); margin: 1.5rem 0 .65rem; }
.pet-reference > p, .pet-page .wfg-panel > p { max-width: 75ch; }
.pet-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; border: 1px solid var(--edge); background: var(--bg-2); }
.pet-controls[hidden], .pet-page [hidden] { display: none; }
.pet-controls label { display: grid; gap: .4rem; font-family: var(--font-ui); font-size: .9rem; }
.pet-controls input, .pet-controls select, .pet-controls button { width: 100%; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--edge-inner); border-radius: 0; background: var(--bg); color: var(--ink); font: inherit; }
.pet-controls button { cursor: pointer; font-family: var(--font-ui); }
.pet-results { font-family: var(--font-ui); color: var(--ink-2); }
.pet-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--edge); }
.pet-table { width: 100%; border-collapse: collapse; font-size: .95rem; text-align: left; }
.pet-table caption { text-align: left; padding: .8rem 1rem; font-family: var(--font-display); color: var(--ink); background: var(--bg-2); }
.pet-table th, .pet-table td { padding: .75rem 1rem; vertical-align: top; border-bottom: 1px solid var(--edge-inner); }
.pet-table thead { font-family: var(--font-ui); color: var(--ink-2); }
.pet-table tbody th { min-width: 10rem; width: 22%; }
.pet-table tbody th img { float: left; margin: 0 .6rem .4rem 0; border: 1px solid var(--edge-inner); }
.pet-table td:last-child { min-width: 12rem; }
.pet-table small { display: block; color: var(--ink-3); font-weight: normal; font-size: .82rem; margin-top: .3rem; }
.pet-table td a { line-height: 1.9; }
.pet-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.pet-page .wfg-panel { margin-bottom: 1.25rem; }
.pet-panels .wfg-panel { margin-bottom: 0; }
.pet-prose { margin: 2rem 0; max-width: 75ch; }
@media (max-width: 850px) { .pet-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pet-controls { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .pet-table th, .pet-table td { padding: .65rem .75rem; } }