/* A quiet comparison instrument between the expressive studio and the editor. */
.collection-section{color:#1c3555}.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px;padding-top:26px;border-top:1px solid #91b3cf}.collection-heading h2{font:600 clamp(27px,3vw,38px)/1.15 'Segoe UI',sans-serif;letter-spacing:-1.4px;margin:12px 0 0;color:#1a3353}.collection-heading>p{margin:0;font-size:11px;line-height:1.8;color:#4b6887;max-width:285px}.collection-browser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #9dbdd5;border-radius:12px;overflow:hidden;background:#ecf7ff73}.collection-index{padding:20px 22px 12px;min-width:0}.collection-index .template-filters{display:flex;flex-wrap:nowrap;gap:4px;margin:0 0 15px;padding:4px;background:#cee3f4;border-radius:7px}.collection-index .template-filters button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:44px;padding:7px 8px;background:transparent;border:0;border-radius:5px;font-size:11px;color:#3c5c7c;white-space:nowrap}.collection-index .template-filters button span{font-size:9px;opacity:.65}.collection-index .template-filters [aria-pressed="true"]{background:#fff;color:#193a68;box-shadow:0 2px 6px #24496c14}.collection-section .collection-gallery{display:flex;flex-direction:column;gap:0}.collection-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 11px;min-height:61px;text-align:left;color:#244463;background:transparent;border:0;border-bottom:1px solid #bed4e5;isolation:isolate}.collection-row:last-child{border-bottom-color:transparent}.collection-row:before{content:'';position:absolute;inset:0;z-index:-1;background:#254cc9;border-radius:5px;opacity:0;transform:scaleX(.96);transform-origin:left;transition:opacity .18s,transform .25s}.collection-row-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;transition:translate .22s}.collection-row-copy strong{font-size:16px;font-weight:550;letter-spacing:-.3px}.collection-row-copy small{font-size:10px;color:#53718c;line-height:1.4}.collection-row-tag{font-size:8px;white-space:nowrap;color:#52718c}.collection-row[aria-pressed="true"]{color:white;border-bottom-color:transparent}.collection-row[aria-pressed="true"]:before{opacity:1;transform:scaleX(1)}.collection-row[aria-pressed="true"] small,.collection-row[aria-pressed="true"] .collection-row-tag{color:#e1ecff}.collection-row[aria-pressed="true"] .collection-row-copy{translate:3px 0}.collection-row:focus-visible{outline:3px solid #b96234;outline-offset:-3px;border-radius:5px}.collection-viewer{display:flex;flex-direction:column;min-width:0;padding:21px 28px 18px;background:#c5def2;border-left:1px solid #9dbdd5}.collection-canvas{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:430px;padding:20px 0 28px;background:transparent;border:0;cursor:zoom-in;overflow:hidden}.collection-canvas img{display:block;width:auto;height:auto;max-width:100%;width:290px;box-shadow:0 12px 24px #20486c23;border:1px solid #b9d0e1}.collection-zoom{position:absolute;bottom:12px;right:0;display:flex;align-items:center;min-height:36px;padding:5px 10px;font-size:10px;border:1px solid #93b2d0;border-radius:4px;background:#e7f4ff;color:#345779;transition:background .2s}.collection-canvas:hover .collection-zoom{background:white}.collection-viewer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #9cbdd7;padding-top:17px}.collection-viewer-bottom h3{font-size:20px;letter-spacing:-.5px;margin:0 0 5px;font-weight:600}.collection-viewer-bottom p{font-size:10px;line-height:1.6;color:#476787;margin:0;max-width:200px}.collection-use{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:47px;flex-shrink:0;padding:11px 14px;border:1px solid #213b60;border-radius:5px;background:#213b60;color:white;font-size:11px;font-weight:600}.collection-use span{font-size:17px}.collection-use:hover{background:#294cc2;border-color:#294cc2}.collection-use:disabled{opacity:.45;cursor:not-allowed}.collection-photo-warning{font-size:11px;line-height:1.5;color:#7b3a1c;margin:10px 0 0}.example-actions{position:sticky;bottom:-25px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:15px 0 5px;background:#eff8fff5;border-top:1px solid #afc9df;z-index:2}#example-dialog{background:#eff8ff}#example-dialog .dialog-header{gap:12px}#example-dialog .dialog-header h2{font-size:23px;letter-spacing:-.5px}#example-dialog #example-template{width:100%;margin-top:8px;background:#fff;border-radius:5px}#close-example{min-width:44px;min-height:44px}.example-actions .button{font-size:12px;min-height:46px;padding:11px 15px;gap:12px}.example-actions .quiet{font-size:10px}
@media(max-width:1000px){.collection-viewer{padding:21px 20px 18px}.collection-index{padding:17px 14px 12px}.collection-row{gap:10px;padding:12px 8px}.collection-row-copy strong{font-size:14px}.collection-row-copy small{font-size:9px}.collection-row-tag{font-size:7px}.collection-viewer-bottom{align-items:stretch;flex-direction:column;gap:13px}.collection-use{width:100%}.collection-canvas img{width:250px}.collection-canvas{min-height:410px}.collection-index .template-filters button{font-size:10px;gap:5px}}
@media(max-width:640px){.collection-heading{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:20px;padding-top:20px}.collection-heading h2{font-size:29px;letter-spacing:-1px}.collection-heading>p{font-size:11px;max-width:none}.collection-browser{display:flex;flex-direction:column}.collection-index{padding:12px 12px 0}.collection-index .template-filters{margin-bottom:12px}.collection-section .collection-gallery{display:flex;flex-direction:row;gap:7px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#7397c3 transparent;padding:3px 1px 10px}.collection-row{width:auto;flex-shrink:0;min-height:47px;scroll-snap-align:start;gap:8px;padding:10px 12px;border:1px solid #9fbcd3;border-radius:5px}.collection-row-copy strong{font-size:13px;white-space:nowrap}.collection-row-copy small,.collection-row-tag{display:none}.collection-row[aria-pressed="true"]{border-color:#254cc9}.collection-row[aria-pressed="true"] .collection-row-copy{translate:0 0}.collection-row:last-child{border-bottom-color:#9fbcd3}.collection-viewer{padding:17px 20px;border-left:0;border-top:1px solid #9dbdd5}.collection-canvas{min-height:0;padding:20px 0 40px}.collection-canvas img{width:245px;max-width:100%}.collection-viewer-bottom{flex-direction:row;align-items:center;gap:10px}.collection-viewer-bottom h3{font-size:18px}.collection-viewer-bottom p{font-size:9px}.collection-use{width:auto;font-size:10px;min-height:46px;padding:9px 10px;gap:8px}.collection-zoom{bottom:7px}.example-actions{flex-direction:column;align-items:stretch}.example-actions .button{width:100%;white-space:nowrap;font-size:11px}.example-actions .quiet{font-size:10px}}
@media(max-width:359px){.collection-viewer{padding:15px}.collection-viewer-bottom{align-items:stretch;flex-direction:column}.collection-use{width:100%}.collection-heading h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.collection-section *,.collection-section *:before{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Let names, previews and actions carry the comparison. */
.collection-heading h2{margin:0}
.collection-row-copy small,.collection-viewer-bottom p{font-size:12px}
.collection-row-tag{font-size:11px}
.collection-canvas{padding-top:8px}
@media(max-width:640px){.collection-canvas{padding-top:4px}.collection-viewer-bottom p{font-size:11px}}

.mobile-model-picker{display:none}
.collection-index .template-filters button{font-size:13px}
@media(max-width:640px){
 .collection-section .collection-gallery{display:none}
 .mobile-model-picker{display:block;font-size:13px;color:#244463;margin:14px 0 17px;font-weight:600}
 .mobile-model-picker select{display:block;width:100%;min-height:48px;border:1px solid #93b3cf;border-radius:5px;background:#fff;color:#1c3555;font:400 16px 'Segoe UI',sans-serif;margin-top:8px;padding:10px 12px}
 .collection-index .template-filters button{font-size:13px;padding:8px 5px}
}

/* Seven complete choices remain visible; the remaining layouts scroll inside the list. */
.collection-section .collection-gallery{max-height:546px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#7397c3 #d9eaf7;scrollbar-gutter:stable}
.collection-row{height:78px;min-height:78px;flex:0 0 78px}
.collection-canvas{min-height:0;padding:8px 0 48px}
.collection-canvas img{width:380px;max-width:100%;height:auto}
@media(min-width:641px) and (max-width:1000px){.collection-canvas img{width:330px}}
@media(max-width:640px){
 .mobile-model-picker{display:none}
 .collection-section .collection-gallery{display:flex;flex-direction:column;gap:0;max-height:336px;padding:0;scroll-snap-type:none}
 .collection-row{width:100%;height:48px;min-height:48px;flex:0 0 48px;border:0;border-bottom:1px solid #bed4e5;border-radius:0;padding:10px 12px}
 .collection-row-copy strong{white-space:normal}
 .collection-row:last-child{border-bottom-color:transparent}
 .collection-canvas img{width:330px}
}

.collection-paper{position:relative;display:block;width:380px;max-width:100%;isolation:isolate}
.collection-canvas .collection-paper img{width:100%;max-width:100%;height:auto}
.collection-paper .collection-preview-outgoing{position:absolute;inset:0;pointer-events:none}
@media(min-width:641px) and (max-width:1000px){.collection-paper{width:330px}}
@media(max-width:640px){.collection-paper{width:330px}}

/* At either end of the list, a swipe must continue scrolling the page. */
@media(max-width:640px),(hover:none) and (pointer:coarse){
 .collection-section .collection-gallery{overscroll-behavior-y:auto}
}