/* The picker chrome is independent of the pay-stub document styles. */
#template-dialog[open],#preview-dialog[open]{display:flex;flex-direction:column;overflow:hidden;padding:0;width:min(1180px,calc(100% - 40px));max-height:calc(100dvh - 40px)}
#template-dialog[open]{height:min(800px,calc(100dvh - 40px))}
#template-dialog .gallery-header,#preview-dialog .dialog-header{flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 24px;margin:0;border-bottom:1px solid var(--line)}
#template-dialog .gallery-header h2{font-size:25px;line-height:1.3;margin:0 0 5px;max-width:none}
#template-dialog .gallery-header p{font-size:14px;line-height:1.7;color:#68615a}
#template-dialog .icon-button,#preview-dialog .icon-button{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center}
#template-dialog .gallery-body{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:22px;padding:20px 24px;flex:1 1 auto;min-height:0;overflow:hidden;background:#fff}
.gallery-showcase{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.gallery-thumbnails{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:2px;flex:0 0 auto}
.gallery-thumb{min-width:0;border:1px solid #ede0da;border-radius:8px;background:#fff;padding:10px 5px 8px;color:#645d56;font-size:12px;font-weight:650;line-height:1.6}
.gallery-thumb[aria-pressed=true]{border-color:#cc5b23;box-shadow:0 0 0 1px #cc5b23;background:#fff0e2;color:#a94b1d}
.gallery-thumb:hover{border-color:#c99673;background:#fff7ed}.gallery-thumb:focus-visible{outline:2px solid #e48658;outline-offset:2px}
.gallery-thumb-paper{display:block;height:48px;margin-bottom:5px;pointer-events:none;background:#fff}
.gallery-thumb-paper .template-viewport{height:100%!important}
.gallery-preview-frame{display:flex;flex:1 1 auto;min-height:0;min-width:0;padding:18px;background:#f5f0e8;border:1px solid #e0d4c4;border-radius:10px;overflow:hidden}
#template-dialog .gallery-paper{display:block;position:relative;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;box-shadow:none;overflow:hidden}
.gallery-paper .template-viewport{height:100%!important;overflow:hidden}
.gallery-paper .template-document{box-shadow:0 3px 14px #64372110}
.gallery-preview-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:0 0 auto;min-width:0}
#template-dialog #gallery-preview-label{margin:0;border:0;padding:0;background:none;font-size:13px;color:#6f655b;line-height:1.6}
#gallery-enlarge{flex-shrink:0;min-height:44px;font-size:13px;padding:5px 0}
#template-dialog .gallery-design{display:block;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;width:auto;padding:16px;background:#faf6ef;border:1px solid #e0d4c4;border-radius:10px;align-self:stretch}
.gallery-design-heading .overline{display:block;font:700 10px/1.6 var(--body);letter-spacing:.08em;color:#856449;margin-bottom:9px}
#gallery-selected-name{font-size:24px;line-height:1.3;font-weight:650;letter-spacing:-.5px;color:#242b36;margin:0 0 8px}
#gallery-selected-description{font-size:14px;line-height:1.75;color:#68615a}
.gallery-price{display:flex;align-items:baseline;gap:8px;margin:10px 0}
#gallery-selected-price{font-size:25px;font-weight:700;color:#9d461b;line-height:1.3}
.gallery-price span{font-size:13px;color:#75685a;white-space:nowrap}
#template-dialog .compatibility-note{font-size:13px;line-height:1.75;color:#68615a;margin:0 0 12px}
#template-dialog .appearance{margin:0;border-top:1px solid #e0d4c4}
#template-dialog .appearance>summary{padding:12px 0 10px;font-size:14px;line-height:1.5}
#template-dialog .appearance>summary span{font-size:12px}
#template-dialog .appearance>summary small{display:none}
#template-dialog .appearance-body{display:flex;flex-direction:column;gap:10px;padding:4px 0 0}
#template-dialog .appearance-body .field{margin:0}
#template-dialog .color-field{margin:0;padding:0;border:0;min-width:0}
#template-dialog .color-field legend{font-size:14px;margin-bottom:10px}
#template-dialog .color-field legend span{font-size:12px}
#template-dialog .swatches{gap:8px;flex-wrap:wrap}
#template-dialog .color-swatch{width:40px;height:40px;min-width:40px;font-size:15px}
#template-dialog #more-colors{margin-top:6px;min-height:44px;font-size:13px}
#template-dialog #extra-colors{margin-top:10px}
#template-dialog .appearance-body label{font-size:14px}
#template-dialog .appearance-body select{height:48px;font-size:15px;padding-left:10px;padding-right:32px}
#template-dialog #reset-appearance{align-self:flex-start;font-size:13px;padding:0;min-height:44px}
#template-dialog .gallery-footer,#preview-dialog .preview-footer{position:static;flex:0 0 auto;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 24px;background:#fff;border-top:1px solid var(--line)}
#template-dialog .gallery-footer strong{font-size:14px}
#template-dialog .gallery-footer>div>span{font-size:13px;margin-top:3px}
#template-dialog .gallery-footer .primary{font-size:14px;min-height:46px;padding:12px 20px}
#preview-dialog .preview-footer{justify-content:flex-end}
#preview-dialog .preview-scroll-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 28px;scrollbar-gutter:stable}
#preview-dialog .dialog-header h2{max-width:none;font-size:25px}
#preview-dialog .preview-note{margin-top:18px}
#preview-dialog .dialog-paper{padding:18px}
@media(max-width:800px){#template-dialog[open],#preview-dialog[open]{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}#template-dialog .gallery-header,#preview-dialog .dialog-header{padding:16px 18px 13px}#template-dialog .gallery-header h2,#preview-dialog .dialog-header h2{font-size:22px}#template-dialog .gallery-header p{font-size:14px;max-width:90%}#template-dialog .gallery-body{display:flex;flex-direction:column;gap:20px;overflow-y:auto;padding:18px;overscroll-behavior:contain}.gallery-showcase{flex:none;gap:12px}.gallery-thumbnails{gap:7px}.gallery-thumb{font-size:12px;padding:8px 4px}.gallery-thumb-paper{height:38px}.gallery-preview-frame{flex:none;height:300px;padding:14px}#template-dialog .gallery-paper{height:100%}#template-dialog .gallery-design{overflow:visible;min-height:auto;flex:none;padding:18px;scrollbar-gutter:auto}#template-dialog .appearance-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}#template-dialog #reset-appearance{grid-column:1/-1;justify-self:start}#template-dialog .gallery-footer,#preview-dialog .preview-footer{padding:12px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom))}#template-dialog .gallery-footer>div>span{font-size:12px}#template-dialog .gallery-footer strong{font-size:14px}#template-dialog .gallery-footer .primary{font-size:13px;padding:11px 15px;gap:14px}#preview-dialog .preview-scroll-body{padding:18px 14px}#preview-dialog .dialog-paper{padding:6px}}
@media(max-width:480px){.gallery-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-thumb{font-size:13px;padding:8px 5px}.gallery-thumb-paper{height:34px;margin-bottom:3px}.gallery-preview-frame{height:260px;padding:12px}#template-dialog .appearance-body{grid-template-columns:1fr}#template-dialog .gallery-header p{max-width:none}#template-dialog .gallery-preview-caption{align-items:flex-start;gap:10px}#template-dialog #gallery-preview-label{font-size:12px}#template-dialog #gallery-enlarge{font-size:13px;min-height:44px}#template-dialog .gallery-footer>div{max-width:150px}#template-dialog .gallery-footer .primary{font-size:14px;padding:12px 14px;gap:10px}}
@media(max-height:600px) and (min-width:801px){#template-dialog .gallery-header{padding:12px 20px}#template-dialog .gallery-header h2{font-size:22px}#template-dialog .gallery-body{padding:14px 20px;gap:16px}.gallery-thumb-paper{height:32px}.gallery-showcase{gap:10px}.gallery-preview-frame{padding:10px}#template-dialog .gallery-footer,#preview-dialog .preview-footer{padding:10px 20px}}

/* Dialog chrome follows the website; document colors and fonts remain customer choices. */
#template-dialog,#preview-dialog{font-family:var(--body);color:#242b36;border-color:#d9cbbb;box-shadow:0 24px 80px #242b3633}#template-dialog::backdrop,#preview-dialog::backdrop{background:#242b3670;backdrop-filter:blur(4px)}
.gallery-kicker{display:block;margin-bottom:7px;color:#a34824;font:700 10px/1.6 var(--body);letter-spacing:.09em}#template-dialog .gallery-header{background:#fffdf9}#template-dialog .gallery-header h2{font-family:var(--heading);color:#242b36;font-size:28px;font-weight:600;letter-spacing:-.035em}#template-dialog .icon-button,#preview-dialog .icon-button{background:#f3ede3;color:#3d4145;border:1px solid #e0d4c4;border-radius:50%;font-size:26px}#template-dialog .icon-button:hover,#preview-dialog .icon-button:hover{background:#eadccd;border-color:#ba8d6a}#template-dialog .gallery-footer{background:#fffdf9}#template-dialog .gallery-design{padding:20px}#template-dialog .appearance>summary{font-size:15px}#template-dialog .appearance>summary span{font-size:12px}#template-dialog .gallery-footer strong{color:#242b36}#template-dialog .gallery-footer>div>span{color:#68615a}#template-dialog .appearance-body select{font-family:var(--body)}
@media(max-width:480px){#template-dialog .gallery-header h2{font-size:24px}.gallery-kicker{font-size:9px;max-width:235px}#template-dialog .gallery-body{padding:16px;gap:18px}#template-dialog .gallery-preview-caption{flex-wrap:wrap;align-items:center}#template-dialog .gallery-footer{gap:12px}#template-dialog .gallery-footer>div{min-width:0;max-width:145px}#template-dialog .gallery-footer>div>span{font-size:12px;line-height:1.6}#template-dialog .gallery-footer .primary{min-height:48px;gap:9px;flex-shrink:0}#template-dialog .gallery-design{padding:18px}}