/* Hunter-pet pages: the site's own components (.tabs .page-head .eyebrow .kpis .chip .empty-state from site.css) plus the
   section's shared pets-* parts. Order of the public file: common.css, lists.css, pet.css (page.py concatenates them). */

/* sub-navigation: the site's .tabs; one scrollable row on phones */
.pets-tabs{min-width:0;max-width:100%}
.pets-tabs a:hover{border-color:var(--accent-dim);color:var(--accent-2)}

/* page head: site .page-head, optional picture on the left (head(media=…)) and a right-hand column (head(aside=…)) */
.pets-head .kpis{margin-top:6px}
.pets-head .pets-en{margin-top:-4px}
.pets-head-aside{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.page-head.pets-head-media{grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px}
.pets-head-media>*{grid-column:2}
.pets-head-media>.pets-slot{grid-column:1;grid-row:1/span 3;align-self:start}
.pets-head-media>.page-chip{grid-column:3;grid-row:1/span 2}

/* English names and name details */
.pets-en,.pet-en{display:block;color:var(--text-3);font-size:.8rem;font-family:var(--font);font-weight:400}
.pet-en{margin-top:4px}
.pet-variation{display:block;font-size:.74rem;color:var(--teal-2);margin-top:3px}
.pets-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* chips: rarity, warning, diet and skills */
.chip.pets-rare{color:#b8c0f0;border-color:#414a72}
.chip.pets-elite{color:var(--accent-2);border-color:var(--accent-dim)}
.chip.pets-warn{color:#f09a7c;border-color:#6a3a2c}
.pets-diet{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.pets-diet-chip img,.pets-skill img{width:20px;height:20px;border-radius:4px;margin-left:-5px;flex:none}
.pets-diet-chip{padding-block:2px}
a.pets-skill{flex-wrap:wrap;row-gap:0;text-decoration:none;color:var(--text-2);white-space:normal;max-width:100%}
a.pets-skill:hover{border-color:var(--accent-dim);color:var(--accent-2)}
.pets-skill span{overflow-wrap:break-word;min-width:0}
.pets-skill-note{color:var(--text-3);font-size:.72rem}
.pets-skill-icon{display:inline-flex;flex:none;border-radius:5px;line-height:0}
.pets-skill-icon img{border-radius:5px;border:1px solid var(--line-2)}
.pets-skill-icon:hover img{border-color:var(--accent)}

/* image slots: a fixed frame; until real pictures exist it shows the family icon in the middle */
.pets-slot{position:relative;display:inline-grid;place-items:center;flex:none;overflow:hidden;border:1px solid var(--line-2);border-radius:8px;background:radial-gradient(circle at 50% 38%,#263042,var(--bg-2) 72%)}
.pets-slot>img{width:62%;height:auto;border-radius:6px}
.pets-slot-img>img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pets-slot-thumb{width:64px;height:64px}
.pets-slot-family{width:72px;height:72px;border-color:var(--accent-dim)}
.pets-slot-portrait{width:min(100%,320px);aspect-ratio:4/3}
.pets-slot-badge{position:absolute;right:3px;bottom:3px;line-height:0}
.pets-slot-badge img{width:20px;height:20px;border-radius:4px;border:1px solid var(--line-2)}

/* a card whose heading link covers the whole card; links and buttons inside stay clickable above it */
.pets-card{position:relative}
.pets-stretch{color:inherit;text-decoration:none}
.pets-stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pets-stretch:focus-visible{outline:none}
.pets-stretch:focus-visible::after{outline:2px solid var(--teal);outline-offset:-2px}
.pets-card a:not(.pets-stretch),.pets-card button,.pets-card details{position:relative;z-index:1}
.pets-card:hover .pets-stretch{color:var(--accent-2)}

/* the page's single «Точность данных» note */
.pets-accuracy{border:1px solid var(--line);border-left:3px solid var(--accent-dim);border-radius:var(--radius);background:var(--panel);padding:0 16px}
.pets-accuracy summary{cursor:pointer;padding:11px 0;color:var(--accent-2);font-size:.9rem;font-weight:500}
.pets-accuracy ul{margin:0 0 14px;padding-left:18px;display:grid;gap:7px;color:var(--text-2);font-size:.87rem;line-height:1.6}

/* older shared classes that the profile and reference pages may still use */
.pet-warning{color:var(--accent-2)}
.pet-caveat{padding:10px 13px;border-left:2px solid var(--accent-dim);background:#e0b25b0a;color:var(--text-2);font-size:.82rem;line-height:1.65}
.pet-list-intro{display:grid;gap:11px}

@media(max-width:640px){
  .pets-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .pets-tabs::-webkit-scrollbar{display:none}
  .pets-tabs a{flex:none;white-space:nowrap;font-size:.86rem}
  .page-head.pets-head-media{grid-template-columns:auto minmax(0,1fr)}
  .pets-head-media>.pets-slot{grid-row:1/span 2}
  .pets-head-media>.lead,.pets-head-media>.kpis,.pets-head-media>.page-chip{grid-column:1/-1;grid-row:auto}
  .pets-head-aside{justify-content:flex-start}
  .pets-slot-family{width:56px;height:56px}
  .pets-slot-thumb{width:48px;height:48px}
}
/* Hub (/pets/), /pets/all/ and the family pages: family cards, the filter form, result rows, pager and the food lists. */

/* hub: family cards (the whole card links to the family; skill icons and chips inside keep their own links) */
.pets-families{display:grid;gap:14px}
.pets-family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pets-family{display:flex;flex-direction:column;gap:11px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.pets-family:hover{border-color:var(--accent-dim)}
.pets-family-top{display:flex;gap:14px;align-items:center}
.pets-family-top>div{min-width:0}
.pets-family-title{font-size:1.3rem}
.pets-family-summary{font-size:.86rem;color:var(--text-2);line-height:1.6}
.pets-family-counts{font-size:.78rem;color:var(--text-3)}
.pets-facts{margin:auto 0 0;display:grid;gap:8px;padding-top:11px;border-top:1px solid var(--line)}
.pets-facts>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;align-items:center}
.pets-facts dt{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.pets-facts dd{margin:0;min-width:0}
.pets-icons{display:flex;flex-wrap:wrap;gap:6px}

/* the catalogue block: filters (site components set display on .btn, .chip and .empty-state, so [hidden] needs its own rule) */
.pets-catalog [hidden]{display:none!important}
.pets-catalog{display:grid;gap:14px}
.pets-filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.pets-filter-top{display:flex;flex-wrap:wrap;gap:12px}
.pets-filter-top>.pets-field{flex:1 1 150px}
.pets-filter-top>.pets-field-search{flex:3 1 280px}
.pets-field{display:grid;gap:5px;align-content:start;min-width:0;color:var(--text-2);font-size:.78rem}
.pets-field input,.pets-field select{width:100%;min-width:0;min-height:40px;padding:8px 10px;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;color:var(--text);font-size:.9rem}
.pets-field input:focus{outline:none;border-color:var(--teal)}
.pets-field input::placeholder{color:var(--text-3)}
.pets-field .dd{display:block;width:100%}
.pets-field .dd-btn{min-height:40px;font-size:.9rem}
.pets-filter-more{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.pets-filter-more>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:32px;cursor:pointer;list-style:none;color:var(--accent-2);font-size:.9rem;font-weight:500}
.pets-filter-more>summary::-webkit-details-marker{display:none}
.pets-filter-more>summary::before{content:"";width:7px;height:7px;margin:0 4px 0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.pets-filter-more[open]>summary::before{transform:rotate(45deg)}
.pets-filter-hint{color:var(--text-3);font-weight:400;font-size:.8rem}
.pets-filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-dim);color:#fff;font-size:.72rem;font-weight:600}
.pets-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
.pets-filter-checks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:10px}
.pets-check{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--text-2);font-size:.87rem;cursor:pointer}
.pets-check input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.pets-filter-checks>.btn{margin-left:auto}
.pets-filter-help{margin-top:8px}

/* result bar: count, chips of the active filters, «Ссылка на подборку» */
.pets-results-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;scroll-margin-top:12px}
.pets-results-bar>p{color:var(--text-2);font-size:.88rem}
.pets-active{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 280px;min-width:0}
.pets-active-chip{min-height:32px;padding:3px 10px;background:var(--panel-2);border-color:var(--accent-dim);color:var(--text);font:inherit;font-size:.8rem;white-space:normal;text-align:left;cursor:pointer}
.pets-active-chip span{color:var(--text-3);font-size:.95rem;line-height:1}
.pets-active-chip:hover{border-color:var(--accent);color:var(--accent-2)}
.pets-active-reset{min-height:32px;padding:3px 6px;border:0;background:none;color:var(--accent-2);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.pets-share{margin-left:auto}

/* result rows: two columns on wide screens, one on narrow ones */
.pets-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pets-row{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:10px 6px 10px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius)}
.pets-row:hover{border-color:var(--accent-dim)}
.pets-row-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.pets-row-name{font-size:1.06rem;line-height:1.3;overflow-wrap:anywhere}
.pets-row-en{font-size:.78rem;color:var(--text-3);overflow-wrap:anywhere}
.pets-row-sub{flex-basis:100%;font-size:.8rem;color:var(--text-2);overflow-wrap:anywhere}
.pets-row-tags{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.pets-row-tags .chip{padding:1px 8px;font-size:.72rem}
.pets-row-teach{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.pets-row-teach .pets-label{font-size:.66rem}
.pets-save{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:none;color:var(--text-3);font:inherit;font-size:1.35rem;line-height:1;cursor:pointer}
.pets-save:hover{border-color:var(--line-2);color:var(--accent-2)}
.pets-save[aria-pressed=true]{color:var(--accent)}

/* pager: «Показать ещё» first, then the page steps */
.pets-pager{display:grid;justify-items:center;gap:10px}
.pets-pager-steps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px}
.pets-pager-steps span{color:var(--text-2);font-size:.84rem}
.pets-noscript{display:grid;gap:8px}
.pets-links{margin:0;padding-left:18px;columns:4 190px;column-gap:24px;font-size:.86rem;line-height:1.7}

/* family page: diet and skills, «Чем кормить», the other families */
.pets-family-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px 28px}
.pets-family-facts>div{display:grid;gap:8px;align-content:start}
.pets-block-title{font-size:1.08rem}
.pets-chips{display:flex;flex-wrap:wrap;gap:6px}
.pets-food{display:grid;gap:10px}
.pets-food-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;align-items:start}
.pets-food-group{padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.pets-food-group>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:.92rem}
.pets-food-group>summary img{border-radius:5px;flex:none}
.pets-food-group>summary .muted{margin-left:auto;font-size:.78rem}
.pets-food-none{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;font-size:.92rem}
.pets-food-none .muted{font-size:.8rem}
.pets-food-list{list-style:none;margin:0 0 10px;padding:0 4px 0 0;display:grid;gap:5px;max-height:330px;overflow:auto}
.pets-food-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.85rem}
.pets-food-list a{display:inline-flex;align-items:center;gap:7px;min-width:0;text-decoration:none}
.pets-food-list img{border-radius:4px;flex:none}
.pets-food-list small{flex:none;color:var(--text-3)}
.pets-family-list,.pets-family-others{display:grid;gap:12px}
.pets-family-nav a img{border-radius:4px}

@media(max-width:1000px){
  .pets-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pets-results{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .pets-family-grid,.pets-family-facts{grid-template-columns:minmax(0,1fr)}
  .pets-family{padding:14px}
  .pets-family-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .pets-facts>div{grid-template-columns:86px minmax(0,1fr);gap:8px;align-items:start}
  .pets-facts dt{font-size:.66rem;letter-spacing:.05em;padding-top:6px}
  .pets-facts>.pets-facts-skills{display:none}
  .pets-filters{padding:12px}
  .pets-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pets-filter-hint{display:none}
  .pets-filter-checks>.btn{margin-left:0}
  .pets-share{margin-left:0}
  .pets-row{gap:10px;padding:8px 2px 8px 8px}
  .pets-row .pets-slot-thumb{width:40px;height:40px}
  .pets-row-name{font-size:1rem}
  .pets-links{columns:2 140px}
  .pets-food-groups{grid-template-columns:minmax(0,1fr)}
}
/* Pet profile (/pets/pet/<slug>/) and the reference pages (/pets/abilities/, /pets/training/). Only pet and reference selectors
   live here: this file is concatenated after common.css and lists.css and must not override their rules. */
/* header: head(media=portrait slot, sub=names and chips, aside=favourite); the portrait frame keeps 4:3 whatever it shows */
.pets-head-media>.pets-slot-portrait{width:224px;grid-row:1/span 4}
.pets-head-media>.pets-slot-portrait:not(.pets-slot-img)>img{width:88px;border:1px solid var(--accent-dim);border-radius:12px}
.pets-pet-sub{display:grid;gap:8px}
.pets-pet-sub .pets-en{font-size:.92rem}
.pets-pet-sub .pets-chips,.pets-ability .pets-chips,.pets-pet-family .pets-chips,.pets-similar .pets-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pets-save-profile{justify-content:center;min-height:44px}
.pets-warning{margin:0;padding:10px 14px;border-left:3px solid var(--red);border-radius:0 6px 6px 0;background:#d9704f14;color:var(--text);line-height:1.6}

/* habitat: the map in its own proportions (1002×668) with the points drawn in the same units, so dots stay round */
.pets-habitat-section{display:grid;gap:12px}
.pets-locs{display:grid;gap:14px}
.pets-loc{display:grid;gap:12px;scroll-margin-top:12px}
.pets-loc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.pets-loc-head h3{font-size:1.2rem}
.pets-loc-kind{margin-top:2px;color:var(--text-3);font-size:.84rem}
.pets-loc-actions{display:flex;flex-wrap:wrap;gap:8px}
.pets-loc-actions .btn{min-height:36px}
.pets-habitat-details>summary{cursor:pointer;color:var(--accent-2);font-size:.88rem;width:max-content;max-width:100%}
.pets-habitat{margin:10px 0 0;display:grid;grid-template-columns:minmax(0,860px) minmax(170px,1fr);gap:12px 18px;align-items:start}
.pets-habitat-frame{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--bg)}
.pets-habitat-frame img{display:block;width:100%;height:auto}
.pets-habitat-frame svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pets-dots circle{fill:#ff7043;stroke:#1d0a04;stroke-width:1.4}
/* density: the colour carries the level; the whole layer is translucent, so overlapping cells never pile up into a solid blot */
.pets-heat{opacity:.58}
.pets-heat .h1{fill:#ffd35c}.pets-heat .h2{fill:#ffa53a}.pets-heat .h3{fill:#ff6f2c}.pets-heat .h4{fill:#f0321c}
.pets-habitat figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--text-2);font-size:.86rem}
.pets-habitat-open{font-size:.86rem}
.pets-habitat-close{display:none}
/* «Развернуть карту»: the figure becomes a full-screen layer (CSS :target, no script); on phones the map is wider than the
   screen and pans inside the layer */
.pets-habitat:target{position:fixed;inset:0;z-index:1000;margin:0;padding:52px 14px 14px;background:#07090cf0;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:auto}
.pets-habitat:target .pets-habitat-frame{width:min(100%,calc((100vh - 110px)*1.5));flex:none}
.pets-habitat:target figcaption{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}
.pets-habitat:target .pets-habitat-open{display:none}
.pets-habitat:target .pets-habitat-close{display:inline-flex;position:fixed;top:10px;right:14px;min-height:36px}
.pets-zone-thumb{margin:0;display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:10px 16px;align-items:center}
.pets-zone-thumb img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:6px;opacity:.85}
.pets-zone-thumb figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--text-2);font-size:.86rem}

/* skills the beast teaches */
.pets-teach{display:grid;gap:10px}
.pets-teach-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pets-teach-row{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px}
.pets-teach-row img{border-radius:6px;flex:none}
.pets-teach-row>div{min-width:0}
.pets-teach-row small{display:block;margin-top:3px;color:var(--text-3);font-size:.78rem}
.pets-teach-late small{color:var(--accent-2)}
.pets-unconfirmed{display:grid;gap:8px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--radius)}
.pets-unconfirmed h3{font-size:1rem;color:var(--text-2)}
.pets-unconfirmed p{color:var(--text-2)}
.pets-unconfirmed .pets-teach-row{background:none;opacity:.85}

/* family, diet and food */
.pets-pet-family{display:grid;gap:14px}
.pets-pet-family-top{display:flex;gap:12px;align-items:center}
.pets-pet-family-top img{border:1px solid var(--accent-dim);border-radius:9px;flex:none}
.pets-pet-family-summary{color:var(--text-2);line-height:1.65;max-width:90ch}
.pets-pet-family h3{font-size:1rem;margin-bottom:8px}
.pets-pet-diet .muted{margin-top:8px}
.pets-pet-food-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.pets-pet-food-list li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:8px;align-items:start}
.pets-pet-food-type{color:var(--text-2);font-size:.86rem;padding-top:4px}
.pets-pet-food-items{display:flex;flex-wrap:wrap;gap:6px}
.pets-pet-food-item{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px 3px 4px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text);text-decoration:none;font-size:.84rem}
.pets-pet-food-item:hover{border-color:var(--accent-dim);color:var(--accent-2)}
.pets-pet-food-item img{border-radius:4px;flex:none}
.pets-pet-food-item span{overflow-wrap:anywhere}
.pets-pet-food-item small{color:var(--text-3);white-space:nowrap}

/* similar pets */
.pets-similar{display:grid;gap:10px}
.pets-similar-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pets-similar-card{display:flex;align-items:center;gap:10px;height:100%;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--text);text-decoration:none}
.pets-similar-card:hover{border-color:var(--accent-dim)}
.pets-similar-text{display:grid;gap:3px;min-width:0}
.pets-similar-text b{font-weight:500;overflow-wrap:anywhere}
.pets-similar-text small{color:var(--text-3);font-size:.8rem}

/* /pets/abilities/: grouped icon index, then the skills with a three-column rank table */
.pets-ability-index{display:grid;gap:14px}
.pets-index-grid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.pets-index-grid a{display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);text-decoration:none;font-size:.86rem}
.pets-index-grid a:hover{border-color:var(--accent-dim);color:var(--accent-2)}
.pets-index-grid img{border-radius:5px;flex:none}
.pets-ability-where{color:var(--text-2)}
.pets-ability-group{display:grid;gap:10px}
.pet-ability-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pets-ability{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;min-width:0;scroll-margin-top:15px}
.pets-ability-head{display:flex;gap:11px;align-items:center}
.pets-ability-head>div{min-width:0}
.pets-ability-head img{border-radius:7px;border:1px solid var(--line-2);flex:none}
.pets-ability-head h3{font-size:1.15rem}
.pets-ability-head .pets-en{display:block;margin-top:2px;color:var(--text-3);font-size:.78rem;font-family:var(--font)}
.pets-ability>p{font-size:.86rem;color:var(--text-2)}
.pets-ability>p.pets-chips{color:inherit}
.pets-ranks>summary{cursor:pointer;color:var(--accent-2);font-size:.84rem;width:max-content;max-width:100%}
.pets-ranks-table{margin-top:10px;max-width:100%;overflow-x:auto}
.pets-ranks-table table{font-size:.84rem}
.pets-ranks-table thead th{white-space:nowrap}
.pets-ranks-table th[scope=row]{width:3.2em}
.pets-ranks-table th[scope=row] a{font-size:.9rem;font-weight:600}
.pets-ranks-table td:nth-child(2){width:7.5em}

/* /pets/training/ */
.pets-train-spells{display:grid;gap:10px}
.pets-train-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pets-train-card{display:grid;gap:8px;align-content:start}
.pets-train-link{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--font-display);font-size:1.08rem}
.pets-train-link:hover{color:var(--accent-2)}
.pets-train-link img{border:1px solid var(--accent-dim);border-radius:7px;flex:none}
.pets-train-card p{color:var(--text-2);font-size:.88rem;line-height:1.6}
.pet-training-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pet-training-grid .panel{display:grid;gap:13px;align-content:start}
.pet-training-grid ol{padding-left:20px;margin:0;display:grid;gap:9px;color:var(--text-2);font-size:.9rem}
.pet-training-grid p{color:var(--text-2);line-height:1.7}
.pets-diet-overview{display:grid;gap:10px}
.pets-diet-table{max-width:100%;overflow-x:auto}
.pets-diet-table th[scope=row]{width:1%;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:inherit;color:inherit}

@media(max-width:960px){
  .pets-head-media>.pets-slot-portrait{width:160px}
  .pets-habitat{grid-template-columns:minmax(0,1fr)}
  .pets-habitat figcaption{flex-direction:row;flex-wrap:wrap;align-items:center}
  .pets-similar-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .pets-head-media>.pets-slot-portrait{width:96px;grid-row:1/span 3}
  .pets-head-media>.pets-slot-portrait:not(.pets-slot-img)>img{width:48px}
  .pets-head-media>.pets-head-aside:has(.pets-save-profile){justify-self:stretch}
  .pets-head-aside .pets-save-profile{flex:1}
  .pets-dots circle{r:8px;stroke-width:2.4}
  .pets-habitat:target{display:block;padding-top:56px}
  .pets-habitat:target .pets-habitat-frame{width:900px}
  .pets-habitat:target figcaption{justify-content:flex-start;margin-top:10px}
  .pets-zone-thumb{grid-template-columns:minmax(0,1fr)}
  .pets-teach-list,.pets-similar-list,.pet-ability-list,.pet-training-grid{grid-template-columns:minmax(0,1fr)}
  .pets-pet-food-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .pets-pet-food-type{padding-top:0}
  .pets-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pets-index-grid a{font-size:.8rem;gap:6px;padding:5px 6px}
  .pets-ranks-table .table th,.pets-ranks-table .table td{padding:6px 6px}
  .pets-ranks-table thead th{white-space:normal;font-size:.68rem;letter-spacing:.04em}
  .pets-ranks-table td:nth-child(2){width:4.6em}
}