/* 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}
/* DJ: "this top of the design page seems like alot of wasted space i need
   to tighten things up." .ux-workflow (breadcrumb) + .ux-edit-bar (save
   status/undo-redo) padding/margin trimmed down from 14px 18px/12px and
   12px 16px/16px - kept non-zero so text/buttons still have breathing
   room, just no longer eating a big chunk of vertical space before the
   actual design previews start. */
.ux-workflow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 14px;background:#eaecf7;border-radius:10px;color:#555c76;margin-bottom:8px;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:8px 14px;border-radius:10px;margin-bottom:10px}.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}
}
/* DJ (reference screenshot of his own "225 Chase Dr" Story design): "i want
   the words just listed to be bigger by default. i can make them bigger
   with the slider because it all the way up already." Turned out the
   per-box "Style text..." slider (index.html's #sizeSlider, min=12 max=200)
   was already sitting at its own ceiling with nothing changed: Classic New
   Listing's own template default (TEMPLATES['classic-new-listing'].vars.
   fsHead, index.html) is 200 - the exact same number as that slider's max -
   so a brand-new design opens with zero headroom before this even touches
   anything. Rather than lower that shared 200 (also used by Feed/Square,
   and other templates' own sliders) these two multipliers alone make that
   same 200 render bigger; addStoryHeroDefaults/the openTextStyleEditor
   override (usability.js) separately widen the SLIDER's ceiling specifically
   for these two boxes so 200 lands at ~50% of the new range, giving DJ real
   room to push it further himself. !important because these override
   index.html's own <style> rules for the exact same selectors (.62/.84
   there), same reasoning as every other override above. */
.story.hero .kick{font-size:calc(var(--fsHead,125px) * .85)!important}
.story.hero .head{font-size:calc(var(--fsHead,125px) * 1.15)!important}
/* index.html's own .story.hero .logo-wrap{bottom:110px} was tuned for the
   OLD, much smaller/higher default headshot (addStoryHeroDefaults used to
   set hero.fg to size:320/bottom:380 - see usability.js) - centered
   horizontally, it cleared that box by sitting in the same low band but off
   to the side. DJ's reference headshot is bigger and anchored further left,
   bleeding to the slide's true bottom edge (usability.js's new hero.fg
   defaults) - left at bottom:110px the centered logo would now land right
   on top of the headshot/agent-name, which is exactly the overlap DJ's
   reference doesn't have (logo sits well above/clear of the headshot
   there). !important for the same reason as the two rules above - same
   selector index.html's own <style> already sets. */
.story.hero .logo-wrap{bottom:480px!important}
/* New agent-name label for the Story hero's default headshot (see
   addStoryHeroDefaults/the renderHeroContent override in usability.js) -
   same look as the Sales Meeting recap slide's own .smcard .agentname
   (index.html) just scoped to the Story hero instead. Position (left/
   bottom) is set inline per-design, computed from that slide's own fg
   geometry, so it always lands beside wherever the headshot actually is. */
.hero.story .agentname{position:absolute;color:#fff;font-weight:700;
  font-size:var(--fsStoryAgentName,36px);text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* ---- "Featured Listing" (new template - see registerFeaturedListingTemplate,
   usability.js, for the full context/DJ quotes). First pass used a custom
   wave-shaped scrim; DJ's follow-up ("i need it to look more like the
   gradient image designs we use on Just Listed Posts") asked for the SAME
   plain top-to-bottom gradient every other hero slide already uses instead
   - so there's no scrim override here at all anymore, just the left-align.
   .featured.hero .scrim now falls straight through to the base .hero .scrim
   rule (index.html) - the exact same gradient Sold/Under Contract/Classic
   New Listing's own cover already renders, so "Featured Listing" reads as
   the same family of design instead of a one-off. Only the text stays
   left-aligned (matching DJ's own reference images) instead of centered -
   that's a layout choice, not a gradient one, and he didn't ask to change
   it. !important because these still have to win over index.html's own
   inline <style> rules for the shared .hero/.pad selectors regardless of
   load order, same as every other override in this file. */
.featured.hero .pad{align-items:flex-start!important;justify-content:flex-end!important;
  text-align:left!important;padding-bottom:230px!important}
.hero.story.featured .pad{align-items:flex-start!important;justify-content:flex-end!important;
  text-align:left!important;padding-bottom:60px!important}
.featured.hero .kick,.featured.hero .head,.featured.hero .addr{text-align:left!important}
/* The agent-card page used to get its own full-bleed photo variant here
   (.card.featured .shotbox) - DJ's follow-up ("i need there name card to
   look exactly like the just listed name card design") asked for the exact
   same agent card Classic New Listing already uses instead, so that
   override is gone and the slide's own class list dropped "featured" (see
   registerFeaturedListingTemplate, usability.js) - it's now plain .card,
   picking up .card .shotbox (index.html) completely unmodified. */