/* Paws on the Trend: "Snapshot", a warm photo album (spec 29 §7). Loaded after app.css; tokens first, then pet-only parts.
   No gradients, no glitch: those are jumponthetrend.app's. */
:root{--bg:#FFF9F0;--paper:#fff;--paper2:#FFF3E3;--ink:#2B1D14;--ink2:#5E4A3C;--muted:#7A6555;--line:#F1E4D3;--line2:#E6D3BC;
  --pink:#FF6B3D;--pink-ink:#C2410C;--blue:#C2410C;--link:#C2410C;--cyan:#FFC83D;--lime:#FFC83D;--rise:#2F9E6E;
  --grad:linear-gradient(#FF6B3D,#FF6B3D);--glitch:none;
  --disp:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,sans-serif;--body:ui-rounded,"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;--shadow:0 10px 24px rgba(80,45,20,.12)}
body.pets{background:var(--bg)}
body.pets h1{font-weight:800;letter-spacing:-.02em}
body.pets .cta{text-shadow:none;background:var(--pink);color:var(--ink)}
body.pets .cta:hover{background:#FF8457}
body.pets .sticker{background:#FFC83D;color:var(--ink);text-shadow:none}
body.pets .logo{font:800 20px var(--disp);letter-spacing:-.01em;gap:8px}
body.pets .logo small{font:italic 700 13px var(--body);background:none;color:var(--pink-ink);-webkit-text-fill-color:var(--pink-ink)}
body.pets .logo i{border-radius:10px}
body.pets .kw{background:none;color:var(--pink-ink);-webkit-text-fill-color:var(--pink-ink)}
body.pets .tc .poster{border:6px solid #fff;border-bottom-width:22px;border-radius:6px;box-shadow:var(--shadow)}

.pethome{padding-bottom:28px}
.pethero{padding:14px 0 6px;max-width:760px}
.pethero h1{font-size:clamp(30px,5.4vw,52px);line-height:1.05;margin:10px 0 8px}
.pethero .lead{font-size:18px;color:var(--ink2);margin:0 0 14px}
.sticker.sun{display:inline-block;background:#FFC83D;color:var(--ink);font:800 12px var(--body);padding:5px 10px;border-radius:999px;letter-spacing:.04em}
.petpick{display:flex;gap:8px;flex-wrap:wrap}
.petpick .chip{border:2px solid var(--line2);background:#fff;color:var(--ink);font:800 15px var(--body);padding:10px 16px;border-radius:999px;min-height:44px;cursor:pointer}
.petpick .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.polaroids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin:20px 0 28px}
@media (min-width:760px){.polaroids{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}}
.pol{display:block;background:#fff;padding:8px 8px 12px;border-radius:6px;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transform:rotate(var(--tilt,0deg));transition:transform .2s}
.pol:hover,.pol:focus-visible{transform:rotate(0) translateY(-3px)}
.pol .shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:#EFE2D0;border-radius:3px}
.pol .shot img,.pol .shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pol .shot video{opacity:0;transition:opacity .3s}.pol .shot video.on{opacity:1}
.pol .stk{position:absolute;left:8px;top:8px;background:#FFC83D;color:var(--ink);font:800 11px var(--body);padding:3px 8px;border-radius:999px}
.pol b{display:block;font:800 16px/1.2 var(--disp);margin:9px 2px 2px}
.pol small{display:block;color:var(--muted);font:600 13px var(--body);margin:0 2px}
@media (prefers-reduced-motion:reduce){.pol{transform:none}}

.kick{display:block;font:800 12px var(--body);letter-spacing:.08em;color:var(--pink-ink);margin-bottom:6px}
.howpets{background:#fff;border:2px solid var(--line);border-radius:18px;padding:18px 18px 8px;margin:8px 0 18px;max-width:760px}
.howpets ol{margin:0;padding-left:20px;font-size:16px;line-height:1.5}.howpets li{margin-bottom:6px}

/* ---- shared bits ---- */
.crumbs{font:700 13px var(--body);color:var(--muted);margin:6px 0 4px}.crumbs a{color:var(--pink-ink);text-decoration:none}
.petpick a.chip{display:inline-flex;align-items:center;text-decoration:none;border:2px solid var(--line2);background:#fff;color:var(--ink);font:800 15px var(--body);padding:10px 16px;border-radius:999px;min-height:44px}
.petpick a.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- home: who's starring ---- */
.pethero.starring{display:grid;gap:16px;max-width:none}
@media (min-width:900px){.pethero.starring{grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);align-items:end}}
.who-card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.who-card label,.pt-who label{font:800 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pink-ink)}
.who-card input,.pt-who input{font:700 18px var(--body);padding:12px 14px;border:2px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--ink);min-height:48px;width:100%;box-sizing:border-box}
.pet-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
@media (min-width:760px){.pet-links{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pl{display:flex;flex-direction:column;gap:2px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px;text-decoration:none;color:var(--ink)}
.pl b{font:800 16px var(--disp)}.pl small{color:var(--muted);font:600 13px var(--body)}
.pl:hover{border-color:var(--pink)}

/* ---- this week: a dated list ---- */
.weeklist{list-style:none;margin:18px 0 26px;padding:0;display:flex;flex-direction:column;gap:12px;max-width:820px;counter-reset:wk}
.weeklist li{counter-increment:wk}
.wl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px;text-decoration:none;color:var(--ink)}
.wl-shot{position:relative;width:96px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#EFE2D0}
.wl-shot img{width:100%;height:100%;object-fit:cover;display:block}
.wl-shot::before{content:counter(wk);position:absolute;left:6px;top:6px;z-index:1;background:#FFC83D;color:var(--ink);font:800 12px var(--body);width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.wl-txt{display:flex;flex-direction:column;gap:3px}.wl-txt b{font:800 17px var(--disp)}.wl-txt span{font-size:14px;color:var(--ink2);line-height:1.4}
.wl-txt small{color:var(--muted);font:700 12px var(--body)}

/* ---- trend page: its own layout ---- */
body.pets .layout.pt-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"title" "stage" "side" "seo"!important;grid-template-rows:auto!important;gap:16px!important;padding-top:6px}
@media (min-width:900px){body.pets .layout.pt-grid{grid-template-columns:minmax(300px,420px) minmax(0,1fr)!important;grid-template-areas:"stage title" "stage side" "seo seo"!important;grid-template-rows:auto 1fr auto!important;column-gap:36px!important}}
body.pets .pt-head{grid-area:title!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;color:var(--ink);padding:0;pointer-events:auto;align-self:start;gap:10px}
body.pets .pt-head h1{text-shadow:none;color:var(--ink);font:800 clamp(28px,6vw,46px)/1.06 var(--disp);letter-spacing:-.02em}
.pt-lead{font-size:18px;line-height:1.45;color:var(--ink2);margin:0;max-width:640px}
.pt-polaroid{margin:0;background:#fff;padding:10px 10px 14px;border-radius:6px;box-shadow:var(--shadow);transform:rotate(-1deg)}
body.pets .pt-polaroid .stage{border-radius:3px;aspect-ratio:1/1;max-height:none;box-shadow:none}
body.pets .stage[data-mode=trend]::after{display:none}
.pt-polaroid figcaption{display:flex;flex-direction:column;gap:2px;padding:10px 4px 0}
.pt-cap{font:800 18px var(--disp)}.pt-polaroid figcaption small{color:var(--muted);font:600 13px var(--body)}
body.pets .pt-maker{border:2px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.pt-who{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
body.pets .pt-drop{border:2px dashed var(--pink);background:var(--paper2);border-radius:16px}
.pt-share{font:700 14px var(--body);color:var(--muted);margin:10px 0 0}.pt-share a{color:var(--pink-ink)}
.pt-info{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:760px){.pt-info{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-card.wide{grid-column:1/-1}}
.pt-card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px 18px}
.pt-card h2{font:800 22px var(--disp);margin:2px 0 8px}.pt-card p{margin:0 0 8px;line-height:1.55}
.pt-ticks{margin:0;padding:0;list-style:none}.pt-ticks li{padding:6px 0 6px 28px;position:relative;line-height:1.4}
.pt-ticks li::before{content:"";position:absolute;left:4px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--rise)}
.pt-more{margin:30px 0 10px}.pt-more h2{font:800 24px var(--disp);margin:0 0 4px}
.pt-legal{margin:18px 0 0}

/* ---- questions: one plain list, the answer opens under its question ---- */
.petqa{max-width:760px;margin:6px 0 24px}
.pt-card.petqa{max-width:none;margin:0}
.petqa .kick{margin-bottom:4px}
.petqa details{border-bottom:1px solid var(--line2)}
.petqa details:last-child{border-bottom:0}
.petqa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font:800 17px/1.3 var(--disp);color:var(--ink);cursor:pointer;min-height:44px}
.petqa summary::-webkit-details-marker{display:none}
.petqa summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper2);color:var(--pink-ink);display:grid;place-items:center;font:800 18px/1 var(--body);transition:transform .2s}
.petqa details[open] summary::after{transform:rotate(45deg)}
.petqa details p{margin:0 0 14px;color:var(--ink2);line-height:1.55;max-width:640px}

/* ---- the paw meter: a trend's size, 1-5 paws + a rounded-down count ---- */
.pawm{display:inline-flex;align-items:center;gap:2px;margin:4px 0 0}
.pawm i{width:14px;height:14px;display:inline-block;background:var(--line2);
  -webkit-mask:url(/static/sites/pets/paw.svg) center/contain no-repeat;mask:url(/static/sites/pets/paw.svg) center/contain no-repeat}
.pawm i.on{background:var(--pink)}
.pawm b{font:800 13px var(--body);color:var(--ink);margin-left:6px}
.pol .pawm{margin:4px 2px 0}
.pt-card.size .pawm i{width:22px;height:22px}.pt-card.size .pawm b{font-size:20px}
.pt-card.size p{margin-top:8px;color:var(--ink2)}

/* ---- trend page: keep the maker in its own column at every stage (app.css moves it around after the preview) ---- */
body.pets .layout.pt-grid > .right{position:static!important;grid-area:side!important;grid-row:auto!important;grid-column:auto!important;top:auto!important;max-height:none!important;overflow:visible!important;z-index:auto!important}
body.pets .layout.pt-grid > .l-seo{grid-area:seo!important;grid-column:1/-1!important;position:static!important}
body.pets .layout.pt-grid > .l-stage{grid-area:stage!important;position:static}
@media (min-width:900px){body.pets .layout.pt-grid > .l-stage{position:sticky;top:12px;align-self:start}}
body.pets .layout.pt-grid > .pt-head{display:flex!important}
.wl-song{font:800 13px var(--body);color:var(--pink-ink)}

/* Pet name card: a friendly ask, then dog or cat. Sorting lives in the bar above the grid. */
.who-card label{font:800 22px var(--display,var(--body));letter-spacing:0;text-transform:none;color:var(--ink)}
.petkind{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.petkind button{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line2);background:var(--bg);color:var(--ink);font:800 18px var(--body);padding:12px;border-radius:14px;min-height:56px;cursor:pointer;transition:transform .12s}
.petkind button span{font-size:26px;line-height:1}
.petkind button:active{transform:scale(.97)}
.petkind button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.petsort{margin:22px 0 -4px}