/* Birth and studio use the same native controls at every viewport. */
.pet-studio-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin-bottom:24px;background:var(--night);color:var(--surface);border-radius:12px}
.pet-studio-entry p{margin:5px 0 0;color:#bec7d1;font-size:13px}.pet-studio-entry .secondary{flex-shrink:0;background:var(--lime);color:var(--night);border:0}
.pet-studio-modal{width:min(880px,calc(100vw - 32px));max-width:880px;overscroll-behavior:contain}
.studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.studio-head h2{margin:8px 0}.studio-head>button{flex-shrink:0}.studio-head p{font-size:14px}
.studio-tabs{display:flex;gap:8px;background:var(--surface-muted);padding:5px;border-radius:10px;margin:20px 0 28px}.studio-tabs button{flex:1;min-height:44px;background:transparent;color:var(--muted);border:0;border-radius:7px;font-weight:700}.studio-tabs .selected{background:var(--night);color:white}
.trait-groups{display:grid;gap:28px;margin:28px 0}.trait-group{margin:0;padding:0;border:0;min-width:0}.trait-group legend{font-size:16px;font-weight:750;display:flex;align-items:center;gap:9px;padding:0}.trait-number{color:var(--muted);font:600 12px var(--display)}.trait-hint{font-size:12px;color:var(--muted);margin:7px 0 11px;line-height:1.5}
.trait-options{display:flex;flex-wrap:wrap;gap:8px}.trait-chip{position:relative;display:block;cursor:pointer}.trait-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.trait-chip>span{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 13px;border:1px solid #adb6c0;border-radius:9px;background:var(--surface);font-size:14px;color:var(--ink);transition:background-color 120ms,border-color 120ms}.trait-chip b{font-size:12px;width:12px;visibility:hidden}.trait-chip input:checked+span{background:#edf5d4;border-color:#52682c;font-weight:700}.trait-chip input:checked+span b{visibility:visible}.trait-chip input:focus-visible+span{outline:3px solid #52682c;outline-offset:3px}.trait-chip input:disabled+span{opacity:.55;cursor:default}.trait-swatch{height:16px;width:16px;border-radius:50%;background:var(--swatch);border:1px solid #0003;flex-shrink:0}
.trait-summary{display:flex;gap:6px;flex-wrap:wrap;padding:16px 0 4px}.trait-summary span{background:var(--surface-muted);color:var(--ink);border-radius:4px;padding:5px 8px;font-size:12px}.trait-feedback{color:var(--green);font-size:13px;line-height:1.6;margin:10px 0}.trait-feedback:empty{display:none}.pet-letter{border-top:1px solid var(--line);padding-top:18px}.pet-letter summary{cursor:pointer;min-height:44px;font-weight:600;font-size:14px}.pet-letter summary small{font-weight:400;margin-inline-start:6px}.pet-letter .field{margin-top:12px}.design-submit{margin-top:20px}.design-submit>small{display:block;font-size:12px;margin-bottom:10px}.pet-design-form input[name="name"],.pet-design-form textarea{font-size:16px}.birth-preview .secondary{margin-top:20px}
.pet-sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pet-sample{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}.sample-stage{min-height:220px;display:grid;place-items:center;background:var(--paper);padding:12px}.sample-stage img{width:192px;height:192px;object-fit:contain;max-width:100%;image-rendering:auto}.sample-info{padding:16px}.sample-info h3{margin:6px 0}.sample-info>small{font:600 10px var(--display);letter-spacing:1px}.sample-info p{font-size:12px;line-height:1.7;min-height:60px}.sample-info button{width:100%;font-size:12px;min-height:44px}.studio-note{font-size:12px;color:var(--muted);margin-top:20px}.studio-tabs~[hidden]{display:none}
@media(max-width:760px){.pet-studio-entry{align-items:stretch;flex-direction:column;gap:12px;padding:18px}.pet-studio-entry .secondary{align-self:flex-start}.pet-studio-modal{padding:20px 16px;max-height:calc(100dvh - 24px)}.studio-head{gap:10px}.studio-head h2{font-size:21px}.studio-head>button{padding:10px;min-height:44px}.trait-options{gap:8px}.trait-chip>span{padding:10px;font-size:13px}.pet-sample-grid{grid-template-columns:1fr}.pet-sample{display:grid;grid-template-columns:minmax(110px,40%) minmax(0,1fr)}.sample-stage{min-height:175px;padding:8px}.sample-stage img{width:144px;height:144px}.sample-info{padding:14px}.sample-info p{min-height:0}.birth-preview .pet-scene{min-height:140px}.birth-preview .pet-scene .egg{transform:scale(.8)}.pet-design-form .design-submit{padding-bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){.trait-chip>span{transition:none}}
@media(forced-colors:active){.trait-chip input:checked+span{outline:2px solid Highlight}.trait-chip input:focus-visible+span{outline-color:Highlight}.trait-swatch{forced-color-adjust:none}}
.pet-studio-modal[open]{display:flex;flex-direction:column;padding:0;overflow:hidden;max-height:calc(100dvh - 32px)}
.studio-chrome{padding:24px 24px 0;background:var(--surface);border-bottom:1px solid var(--line);flex-shrink:0}
.studio-chrome .studio-tabs{margin:18px 0 16px}.studio-body{padding:24px;overflow:auto;overscroll-behavior:contain;min-height:0}.studio-body[hidden]{display:none}
.studio-body .design-submit{position:sticky;bottom:-24px;margin:20px -24px -24px;padding:14px 24px 20px;background:var(--surface);border-top:1px solid var(--line);z-index:2;box-shadow:0 -6px 20px #181c2108}
.studio-body .pet-design-form{padding-bottom:0}.studio-tabs button{transition:none}
@media(max-width:760px){.pet-studio-modal[open]{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.studio-chrome{padding:18px 16px 0}.studio-head h2{font-size:20px;line-height:1.4}.studio-head p{font-size:13px}.studio-body{padding:20px 16px}.studio-body .design-submit{bottom:-20px;margin-inline:-16px;margin-bottom:-20px;padding:12px 16px max(16px,env(safe-area-inset-bottom))}}
.sample-review{grid-column:1/-1;padding:0 16px 12px;border-top:1px solid var(--line)}.sample-review summary{min-height:44px;align-content:center;cursor:pointer;font-size:12px;font-weight:650}.sample-review fieldset{border:0;padding:0;margin:10px 0 14px}.sample-review legend{font-size:12px;margin-bottom:5px}.sample-review fieldset>div{display:flex;gap:8px;flex-wrap:wrap}.sample-review label{display:flex;align-items:center;gap:5px;min-height:36px;font-size:12px;cursor:pointer}.sample-review input{accent-color:var(--green);width:16px;height:16px;margin:0}.sample-review-status{font-size:12px;color:var(--green)}.review-export{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:20px}.review-export p{font-size:12px;color:var(--muted)}.review-export button{flex-shrink:0;min-height:44px}@media(max-width:760px){.review-export{align-items:flex-start;flex-direction:column}}
.native-comparison{grid-column:1/-1;padding:0 16px 12px;border-top:1px solid var(--line)}.native-comparison summary{cursor:pointer;min-height:44px;align-content:center;font-size:12px;font-weight:650}.native-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}.native-pair figure{margin:0;text-align:center;background:var(--paper);border-radius:6px;padding:8px 4px}.native-pair img{display:block;width:96px;height:96px;max-width:100%;object-fit:contain;margin:auto}.native-pair img.native-sprite{image-rendering:pixelated}.native-pair figcaption{font-size:11px;margin-top:8px;color:var(--muted)}.native-comparison p{font-size:12px;line-height:1.7;color:var(--muted)}
.native-pair img{width:64px;height:64px}
@media(max-width:760px){.sample-review label{min-height:44px}}

.personality-preview{margin-top:14px;padding:14px 16px;background:#eaf0df;border:1px solid #c3ceb3;border-radius:8px;color:#293721;font-size:13px;line-height:1.65}.personality-preview-label{display:block;margin-bottom:4px;color:#50623d;font-size:11px;font-weight:700}.personality-preview q{quotes:none}

.sample-info p,.studio-head p,.studio-note,.personality-preview q{word-break:keep-all;overflow-wrap:anywhere}
@media(max-height:560px){.studio-chrome{padding-top:10px}.studio-head .eyebrow,.studio-head p{display:none}.studio-head h2{font-size:18px;line-height:1.35;margin:4px 0}.studio-chrome .studio-tabs{margin:10px 0}.studio-body{padding-top:16px}}

.sample-filters{display:flex;gap:12px}.sample-filters label{flex:1;min-width:0;font-size:12px;color:var(--muted)}.sample-filters select{display:block;width:100%;margin-top:6px;min-height:44px;font-size:14px}.sample-filter-status{font-size:12px;color:var(--muted);margin:12px 0 18px}.pet-sample[hidden]{display:none}

.sample-original{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:12px;color:var(--muted);margin-top:4px;text-decoration:underline;text-underline-offset:3px}

/* PT-mon family specimens: keep original sheet pixels and reveal one third. */
.ptmon-stage{height:260px;display:flex;justify-content:center;background:#e4e3df;overflow:hidden}.ptmon-specimen{height:100%;aspect-ratio:var(--ratio);max-width:100%;background-image:var(--sheet);background-size:300% 100%;background-position:var(--position) center;background-repeat:no-repeat}.sample-filters{flex-wrap:wrap}.sample-filters label{min-width:0;flex:1}.sample-filters select{width:100%}.pet-sample[hidden]{display:none!important}

.ptmon-specimen{flex:none;width:min(100%,calc(240px * var(--ratio)));height:auto;aspect-ratio:var(--ratio);align-self:center}.ptmon-stage{align-items:center}