/* v86 UI only: selectors intentionally exclude exported .slide artwork. */
.rail nav a{font-size:14px;text-transform:none;letter-spacing:0}
.ux-welcome{padding:10px 0 22px}.ux-welcome h2{font-size:28px;color:var(--main-blue);margin-bottom:9px}.ux-welcome p{color:#555c76;line-height:1.5}
.ux-actions .qbtn{min-height:135px;border-top:4px solid var(--main-blue);padding:22px}.ux-actions .qbtn b{font-size:18px;line-height:1.3;margin-bottom:12px}.ux-actions .qbtn span{font-size:14px;line-height:1.5}
.ux-section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:28px 0 14px}.ux-section-head h2,.ux-ready h2{font-size:20px;color:var(--main-blue)}
.ux-listings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ux-design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:18px}
.ux-design-card{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:white}.ux-cover{width:100%;height:145px;object-fit:cover;display:block}.ux-placeholder{display:flex;align-items:center;justify-content:center;background:var(--main-blue);color:white;font-weight:700}.ux-card-body{padding:16px}.ux-card-body>b{font-size:17px}.ux-card-body p{font-size:14px;margin:8px 0;line-height:1.4}.ux-card-body .row{margin-top:15px;flex-wrap:wrap}
.ux-workflow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;background:#eaecf7;border-radius:10px;color:#555c76;margin-bottom:12px;font-size:14px}.ux-workflow strong{color:var(--main-blue)}.ux-workflow .act{margin-left:auto}
.ux-edit-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);padding:12px 16px;border-radius:10px;margin-bottom:16px}.ux-edit-bar .row{flex-wrap:wrap}#uxSaveStatus{font-size:14px;color:#226239}.ux-error,#uxSaveStatus.ux-error{color:#a5222e;font-weight:600}
.ux-advanced{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.ux-advanced summary{font-size:15px;font-weight:700;color:var(--main-blue);cursor:pointer;padding:8px 0}.ux-advanced[open]>summary{margin-bottom:12px}
#sizeTextRow{margin-top:6px}.ux-txtlabel{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:10px 0 5px}
#sizeTextRow textarea,#sizeTextRow input[type=text]{width:100%;font-family:var(--font);font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
#sizeTextRow textarea{min-height:64px;resize:vertical}#sizeTextRow2{margin-top:2px}
#sizeTextOptions{margin-top:8px;padding-top:10px}#sizeTextOptions summary{font-size:14px}
/* Sales Meeting Listing Slide's 3 drafted bullets (see renderSmBullets) -
   sits in the header's own white band (top:14px, 202px tall - same box the
   address/price already live in, see .smcard .header in index.html's own
   stylesheet), well clear of x=1140px where the photos start, so this can
   never overlap a photo regardless of content. This DOES need to render
   into the exported PNG (unlike the rest of this stylesheet, which is
   editor-chrome only) - the export pipeline (shot(), see index.html)
   rasterizes the live DOM with html2canvas, so any loaded stylesheet
   (this one included) is picked up the same as index.html's own. */
.smcard .smbullets{position:absolute;top:14px;left:900px;right:40px;height:202px;
  display:flex;align-items:center;box-sizing:border-box;padding-left:24px}
.smcard .smbullets ul{margin:0;padding:0;list-style:none;width:100%}
.smcard .smbullets li{position:relative;padding-left:22px;margin:7px 0;
  font-size:var(--fsSmBullet,22px);line-height:1.28;color:var(--ink);font-weight:600}
.smcard .smbullets li::before{content:'';position:absolute;left:0;top:.5em;margin-top:-4.5px;
  width:9px;height:9px;border-radius:50%;background:var(--bright-red)}
#uxPhotoSlots .row{align-items:center;flex-wrap:wrap}#uxPhotoSlots p{line-height:1.5;margin:8px 0 12px}#uxSlotSelect{min-width:150px}
#thumbs button.thumb{padding:0;background:white;cursor:pointer;font:inherit;border:2px solid transparent}#thumbs button.thumb.assigned{border-color:var(--main-blue)}#thumbs .tag{font-size:11px}
.ux-stat-row{display:grid;grid-template-columns:70px 1fr auto;gap:7px;margin:8px 0}.ux-stat-row input{width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;padding:10px;font:inherit;font-size:14px}.ux-stat-row button{padding:8px;font-size:12px}
#editorBody .act,.ux-edit-bar .act,.ux-workflow .act,.ux-card-body .act{min-height:40px;letter-spacing:0;text-transform:none}#editorBody label.f{font-size:13px;letter-spacing:.01em;text-transform:none}
#editorBody input.f,#editorBody textarea.f,#editorBody select.f{font-size:16px}#editorBody .note{line-height:1.5}.ux-slide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.ux-style-select{min-height:40px;border:1px solid var(--line);border-radius:6px;padding:8px;color:var(--main-blue);background:white}
.ux-ready{scroll-margin-top:20px}.ux-ready h3{font-size:15px;margin:18px 0 10px}.ux-ready>p{margin:10px 0}.ux-download-actions{margin-top:18px;flex-wrap:wrap}#uxExportFeedback{margin-top:14px;font-size:14px;line-height:1.5;white-space:pre-wrap}
#afterDl{display:none}.ux-slide-nav{display:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #1338BE;outline-offset:3px}
[hidden]{display:none!important}
@media(max-width:760px){
 .shell{display:block}.rail,.rail.collapsed{width:100%;min-height:0;padding:14px 12px;position:relative}.rail .brand{padding:0 4px 10px;margin:0}.rail nav,.rail.collapsed nav{display:flex;flex-direction:row;overflow-x:auto;padding:8px 0 0;gap:4px}.rail nav a{white-space:nowrap;flex:none;padding:11px 13px}.rail .who{padding:8px 4px 0;margin:0;border:0}.railCollapseBtn{display:none}.rail.collapsed .brand,.rail.collapsed #signinBox,.rail.collapsed .who{display:block}.rail #signinBox{padding:12px 4px!important}.main{width:100%}.wrap{padding:16px!important}.topbar{padding:18px 16px}.ux-welcome h2{font-size:25px}.ux-actions{grid-template-columns:1fr 1fr}.ux-actions .qbtn{padding:16px;min-height:145px}.ux-actions .qbtn b{font-size:16px}.ux-actions .qbtn span{font-size:13px}
 .editor2{display:flex!important;flex-direction:column!important;gap:18px!important}.formcol,.formcol.collapsed{width:100%!important;min-width:0!important;max-height:none!important;position:static!important;flex:auto!important}.formcol.collapsed .formInner{display:block!important}.formCollapseBtn{display:none!important}.previewcol{width:100%!important;max-height:none!important;overflow:visible!important;position:static!important}.editor{display:block!important}
 .ux-edit-bar{position:sticky;top:0;z-index:20;padding:10px;box-shadow:0 2px 8px #06038d12}.ux-edit-bar .row{gap:5px}.ux-edit-bar .act{padding:9px;font-size:12px;min-height:44px}.ux-workflow{font-size:12px;gap:9px}.ux-workflow .act{margin-left:0}.ux-slide-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px}.ux-slide-nav button{white-space:nowrap}.ux-selected{background:var(--main-blue)!important;color:white!important}#previews>.pvcard:not(.ux-mobile-current){display:none}.ux-ready{margin-top:18px!important}.ux-download-actions .act{min-height:48px!important;flex:1}.ux-stat-row{grid-template-columns:65px 1fr auto}.ux-section-head h2{font-size:18px}.ux-design-grid{grid-template-columns:1fr}.ux-cover{height:190px}
 /* #previews' own CSS (index.html) is repeat(auto-fit,minmax(340px,1fr)) -
    fine on desktop where there's always at least 340px to give a column,
    but on a phone the real available width inside .previewcol/.ui-card's
    padding is well under 340px (as little as ~274px on a 390px-wide phone -
    confirmed by measuring it directly). Grid never shrinks a track below
    minmax()'s floor, so the single visible card (see #previews>.pvcard:
    not(.ux-mobile-current) above - only one shows at a time on mobile) gets
    forced to a fixed 340px track regardless of how much narrower its real
    container is, and everything in it - the image, and especially the
    "+ Add text"/"+ Add headshot"/"Remove gradient" .pvtools row below it -
    overflows off the right edge of the screen with no way to scroll to it.
    Only one card is ever shown on mobile anyway, so it never needed more
    than one flexible column here - 1fr alone (no minmax floor) lets the
    track match the real container width instead of a hardcoded floor.
    That alone isn't enough, though: oldPreview() (index.html) only ever
    explicitly sets pv/.pvcard's width when HEIGHT is the tighter constraint
    (its own scaleH<scaleW branch) - otherwise it clears any inline width
    and leaves sizing to CSS. On a phone, .previewcol no longer has a
    max-height (see .previewcol override just above), so height is rarely
    the tighter constraint anymore and that branch stops firing - meaning
    .pvcard's width is left to default grid/flex sizing. .pv is deliberately
    overflow:visible (index.html - so a slide dragged near an edge doesn't
    get clipped), and CSS Grid/Flexbox's automatic minimum size only ignores
    an item's content size when overflow is something OTHER than visible -
    with it visible, the un-transformed 1080px-wide slide clone inside .pv
    (a transform:scale() only changes how it PAINTS, never its real layout
    box size) counts as .pvcard's min-content width, so the grid track (and
    the 1fr fix above) gets stretched right back out to ~1080px anyway, the
    same overflow with an extra step. min-width:0 here is the standard fix
    for exactly this "flex/grid item blown out by an overflow:visible
    descendant's real layout size" case - it overrides that automatic
    minimum without having to change .pv's own overflow (and so without
    touching index.html's drag-clipping behavior at all). */
 .previews{grid-template-columns:1fr!important}
 .pvcard{min-width:0!important}
 /* .frame-toggle (Feed/Story/Square) is a plain non-wrapping flex row
    (index.html) - fine on desktop, but 3 buttons' worth of "1080x1350 Feed"/
    "1080x1920 Story"/"1080x1080 Square" text plus padding/gaps runs past a
    phone's width by a few px (confirmed by measuring it directly on a
    375px-wide screen). Wrapping it is the simplest fix that can't overflow
    regardless of label length or how many frame sizes a template offers. */
 .frame-toggle{flex-wrap:wrap}
}