/* ─── Pets — the Beast Cage, one pen per pet ──────────── */
/* Shares the band gutter and points table with the hero directory (heroes.css);
   the pens follow the page's coral signal (events.css). The scenes themselves are
   laid out and coloured in ascii.css; this sheet only places and sizes them. */

.pet-count { margin: 0; padding-block: .35rem; color: var(--amber); font-family: var(--display-2); font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* The roster — one band per generation, the generation in the gutter. */
.pet-roster { --band-label: 2.6rem; --band-gap: .6rem; display: grid; gap: 1.1rem; margin-top: .5rem; }
.pet-band { display: grid; grid-template-columns: var(--band-label) minmax(0, 1fr); gap: var(--band-gap); align-items: start; }
.pet-band .band-gen b { font-size: var(--step-1); }
.pet-catalogue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem .8rem; }
.pet-card { position: relative; display: grid; align-content: start; gap: .3rem; min-width: 0; padding-top: .3rem; border-top: 1px solid var(--signal-tint); scroll-margin-top: calc(var(--topbar-h) + 4rem); }

/* The pen: a strip of ground under the pet, the scene centred on it and sized to the pen.
   A tamed pet is covered by a clear button you rub to pet it; it scrolls on a vertical swipe. */
.pet-pen { position: relative; display: grid; place-items: center; padding-bottom: .15rem; border-bottom: 1px solid var(--signal-line); overflow: hidden; container-type: inline-size; }
.pet-pen .ascii-mini { font-size: min(13px, 3.5cqi); }
.pet-stroke { position: absolute; inset: 0; padding: 0; background: transparent; border: 0; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.pet-stroke[hidden] { display: none; }
.pet-stroke:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* Until you tame a pet it is a sketch of the wild one; once you keep pets, the rest step back. */
.pet-card[data-owned="false"] .pet-pen .ascii-mini { color: var(--amber-dim); }
[data-collection] .pet-card[data-owned="false"] .pet-pen .ascii-mini { color: var(--ink-muted); opacity: .6; }
.pet-card[data-owned="false"] .ascii-mini--portrait > span { color: inherit; }
/* A pet drawn live (js/pet-live.js) covers the pen with its canvas; the baked frames stay underneath for when it can't run. */
.pet-live { position: absolute; inset: 0 auto auto 0; display: block; width: 100%; aspect-ratio: 43.2 / 30; pointer-events: none; }
[data-pen][data-live] > .ascii-mini--portrait, [data-pen][data-live]::after { visibility: hidden; }   /* it acts out the marks (z's, hearts, a thought) itself */

.pet-tame { display: flex; align-items: flex-start; gap: .45rem; min-height: 40px; padding-top: .2rem; cursor: pointer; }
.pet-tame input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--amber); }
.pet-name { display: grid; min-width: 0; line-height: 1.2; }
.pet-name b { font: 600 .8rem/1.2 var(--display-2); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pet-name small { font-size: .72rem; color: var(--ink-muted); }
.pet-card[data-owned="true"] .pet-name b { color: var(--amber); }

/* Care — the food bowl and two ruled meters. The food is carried a whole cell at a time. */
.pet-care { display: flex; align-items: center; gap: .8rem; }
.pet-care[hidden] { display: none; }
.pet-care p { margin: 0; }
.pet-bowl { flex: none; font-family: var(--ascii-font); font-size: 1rem; line-height: 1.25; color: var(--amber-dim); white-space: pre; }
.pet-food { position: relative; left: calc(var(--cx, 0) * 1ch); top: calc(var(--cy, 0) * 1.25em); min-width: 40px; min-height: 40px; margin: 0 -.9rem; padding: 0; font: inherit; color: var(--amber); background: transparent; border: 0; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pet-food > span { position: relative; display: inline-block; width: 1ch; height: 1.25em; }
.pet-food img { position: absolute; left: 50%; top: 50%; width: 2.25em; height: 2.25em; margin: -1.125em 0 0 -1.125em; pointer-events: none; -webkit-user-drag: none; user-select: none; }   /* the cell steps; the meat sits on it */
.pet-food[data-carried] { z-index: 5; cursor: grabbing; color: var(--ink); }
.pet-food:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pet-meters { display: grid; flex: 1 1 auto; gap: .35rem; min-width: 0; }
.pet-meter-bar { display: block; height: 5px; border-bottom: 1px solid var(--signal-line); }
.pet-meter-bar > span { display: block; height: 100%; width: 0; background: var(--amber); }
.pet-meter-bar[data-low] > span { background: var(--oxblood); }

/* The dossier — skill ladder, the form and the costs. An open one takes the whole row. */
.pet-dossier { margin: .1rem 0 0; }
.pet-dossier > summary { font-size: .7rem; }
.pet-card:has(> .pet-dossier[open]) { grid-column: 1 / -1; padding: .6rem var(--space-s) var(--space-s); margin-inline-start: calc(-1 * (var(--band-label) + var(--band-gap))); background: var(--void-2); border-block: 1px solid var(--signal-line); }
.pet-dossier:not([open]) > .pet-dossier-body { display: none; }
.pet-dossier-body { display: grid; gap: .5rem; margin-top: .5rem; color: var(--ink-dim); font-size: var(--step--1); }
.pet-dossier-body p { margin: 0; }
.pet-skill b { display: block; color: var(--ink); font-size: var(--step-0); }
.pet-ladder-scroll { overflow-x: auto; }
.pet-ladder { border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.pet-ladder :is(th, td) { padding: .25rem .4rem; border-bottom: 1px solid var(--signal-tint); text-align: center; white-space: nowrap; }
.pet-ladder thead th { font-weight: 700; color: var(--amber-dim); border-bottom-color: var(--signal-line); }
.pet-ladder thead th:first-child, .pet-ladder tbody th { text-align: start; padding-inline-start: 0; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); white-space: normal; min-width: 6rem; }
.pet-ladder td { color: var(--ink-dim); }
.pet-ladder [data-reached] { background: var(--signal-tint); color: var(--amber); }
.pet-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0; }
.pet-facts dt { overflow-wrap: anywhere; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pet-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.pet-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .3rem 1rem; margin: 0; padding: .2rem 0 .5rem; border: 0; border-block: 1px solid var(--signal-line); }
.pet-card:not([data-owned="true"]) .pet-mine { display: none; }
.pet-mine legend { padding: .4rem 0 0; font-size: var(--step--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.pet-mine label { display: grid; align-content: end; min-width: 0; }
.pet-mine label > span { font-size: .75rem; color: var(--ink-muted); }
.pet-mine input[type="number"] { width: 100%; min-width: 0; min-height: 40px; padding: .2rem 0; font: inherit; font-size: max(1rem, 16px); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-muted); border-radius: 0; }
.pet-mine input:focus { border-bottom-color: var(--amber); outline: none; }
.pet-mine input:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.pet-mine input:disabled { opacity: .45; }
.pet-mine .pet-advanced { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; min-height: 40px; }
.pet-mine .pet-advanced[hidden] { display: none; }
.pet-mine .pet-advanced input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--amber); }
.pet-mine .pet-advanced span { font-size: var(--step--1); color: var(--ink); }
.pet-mine-note { grid-column: 1 / -1; font-size: .75rem; font-style: italic; color: var(--ink-muted); }
.pet-next { color: var(--amber); }
.pet-next:empty, .pet-tomax:empty { display: none; }
.pet-totals { color: var(--ink-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.pet-score-table { margin-top: var(--space-s); }
.pet-score-table td:nth-child(2) { color: var(--ink-dim); }
#pet-sources ul { padding-inline-start: 1.1rem; font-size: var(--step--1); }

@media (min-width: 560px) { .pet-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 651px) { .pet-roster { --band-label: 3.2rem; } }

.pet-bond, .pet-favourite { font-size: .7rem; line-height: 1.5; color: var(--ink-muted); }
.pet-favourite { color: var(--amber); }
.pet-favourite[hidden] { display: none; }