/* ═══ Showcase · roomy Texts layout (build 306) ═══
   When "More texts" is open and has texts, the right panel glides wider so every control has room.
   It glides back by itself when another section opens. One text is edited at a time (numbered chips),
   so ten or twenty texts never turn into one long scroll. */
@media (min-width:861px){
  .spp-overlay .spp-body{grid-template-columns:minmax(0,1fr) auto}
  .spp-overlay .spp-side{width:352px;transition:width .55s var(--sp-ease)}
  .spp-overlay.sp-xt-wide .spp-side,.spp-overlay.sp-ph-wide .spp-side,.spp-overlay.sp-mo-wide .spp-side{width:min(560px,52vw)}
  /* build 307: Motion picks show 4 across, so the whole list is in view without long scrolling */
  .spp-overlay.sp-mo-wide #sppFMotionSeg.spp-c3,.spp-overlay.sp-mo-wide #sppMotionSeg.spp-c3{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* build 307: same glide for photos. Bigger thumbnails, presets and layouts in columns, so all of it is in view */
  .spp-overlay.sp-ph-wide .spp-thumbs{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .spp-overlay.sp-ph-wide .spp-reels{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .spp-overlay.sp-ph-wide #sppGalSeg.spp-c2,.spp-overlay.sp-ph-wide #sppCutStyleSeg.spp-c2{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* chips: pick which text you are editing */
.spp-xt-nav{margin:0 0 12px}
.spp-xt-navtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px}
.spp-xt-cap{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--sp-ink2)}
.spp-xt-wbtn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;border:1px solid var(--sp-line);background:transparent;color:var(--sp-ink2);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.spp-xt-wbtn:hover{background:var(--sp-fill2);color:var(--sp-ink);border-color:var(--sp-line2)}
.spp-xt-wbtn svg{display:block}
.spp-xt-chips{display:flex;flex-wrap:wrap;gap:6px}
.spp-xt-chip{min-width:34px;height:34px;padding:0 10px;border-radius:11px;border:1px solid var(--sp-line2);background:var(--bg2);color:var(--sp-ink2);font-family:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .25s,background .25s,color .25s,box-shadow .25s,transform .25s var(--sp-ease)}
.spp-xt-chip:hover{border-color:var(--sp-cy);color:var(--sp-ink);transform:translateY(-1px)}
.spp-xt-chip.on{border-color:var(--sp-cy);background:var(--sp-cyfill);color:var(--sp-acc);box-shadow:0 0 0 3px var(--sp-cyfill);font-weight:700}
.spp-xt-chip.empty:not(.on){border-style:dashed;opacity:.8}
.spp-xt-chip.add{border-style:dashed;color:var(--sp-acc);font-size:15px;font-weight:500}
.spp-xt-track i{opacity:.45}
.spp-xt-track i:hover{opacity:.9}
.spp-xt-track i.on{opacity:1;box-shadow:inset 0 0 0 1.5px var(--sp-ink)}

/* the text being edited */
.spp-xt-ed{padding-bottom:6px}
.spp-xt-ed.spp-xt-in{animation:sppXtIn .32s var(--sp-ease)}
@keyframes sppXtIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.spp-xt-ed .spp-xt-h{padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--sp-line)}
.spp-xt-ed .spp-xt-h b{font-size:12.5px}
.spp-xt-ed .spp-xt-h button{width:28px;height:28px;border-radius:9px}
/* Fields flow into columns by themselves: one column while the panel is narrow, two once it has glided wider */
.spp-xt-grid,.spp-xt-ed .spp-grp>.spp-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:18px;align-items:start}
.spp-xt-ed .spp-grp>.spp-in{padding-left:0;padding-right:0}
.spp-xt-when>.spp-row:first-child{margin-top:0}
.spp-xt-words input[type=text]:last-child{margin-bottom:0}

/* start options: what you see first when you open More texts */
.spp-xt-intro{margin:2px 0 16px;font-size:12.5px;line-height:1.6;color:var(--sp-ink2)}
.spp-xt-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 6px}
.spp-xt-opt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:14px 14px 13px;border-radius:14px;border:1px solid var(--sp-line2);background:var(--bg2);color:var(--sp-ink);font-family:inherit;cursor:pointer;box-sizing:border-box;transition:border-color .25s,background .25s,transform .25s var(--sp-ease)}
button.spp-xt-opt:hover{border-color:var(--sp-cy);background:var(--sp-cyfill);transform:translateY(-1px)}
.spp-xt-opt .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--sp-cyfill);color:var(--sp-acc);margin-bottom:3px;flex-shrink:0}
.spp-xt-opt b{font-size:12.5px;font-weight:650}
.spp-xt-opt small{font-size:11px;line-height:1.5;color:var(--sp-ink2);font-weight:400}
.spp-xt-split{cursor:default}
.spp-xt-split .sr{display:flex;gap:6px;align-items:center;width:100%;margin-top:6px}
.spp-xt-split .sr select{width:auto;flex:1;min-width:0;padding:7px 24px 7px 10px}
.spp-xt-split .sr .spp-link{width:auto;margin:0;padding:7px 12px;flex-shrink:0}
/* once texts exist the same options shrink into a slim "Add more" row */
.spp-xt-start.has-texts .spp-xt-opt{flex-direction:row;align-items:center;gap:8px;padding:8px 11px;border-radius:11px}
.spp-xt-start.has-texts .ic{width:22px;height:22px;border-radius:7px;margin:0}
.spp-xt-start.has-texts small{display:none}
.spp-xt-start.has-texts .spp-xt-split{grid-column:1/-1;flex-wrap:nowrap}
.spp-xt-start.has-texts .spp-xt-split .sr{margin:0 0 0 auto;flex:1;max-width:210px}

.spp-xt-hint{margin:0 0 14px;padding:9px 12px;border-radius:11px;background:var(--sp-fill);font-size:11.5px;line-height:1.55;color:var(--sp-ink2)}
#sppMainText .spp-grp>.spp-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:18px;align-items:start;padding-left:0;padding-right:0}
@media (max-width:860px){#sppMainText .spp-grp>.spp-in{display:block}}
@media (max-width:860px){.spp-xt-grid,.spp-xt-ed .spp-grp>.spp-in{display:block}}
/* Format stays pinned at the top of the panel: switch 16:9 / 9:16 / 1:1 any time, whichever section is open */
.spp-fmtbar{padding:14px 20px 14px;border-bottom:1px solid var(--sp-line);background:var(--bg2);flex-shrink:0}
.spp-fmthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px}
.spp-fmtloops{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;color:var(--sp-ink2)}
.spp-overlay .spp-side .spp-fmtloops select{width:auto;padding:5px 24px 5px 10px;font-size:11.5px;border-radius:9px}
/* switches show their colour when they are on (they used to stay grey) */
.spp-overlay .spp-modal input[type=checkbox]:checked{background:var(--sp-cy)}
@media (prefers-reduced-motion:reduce){.spp-overlay .spp-side{transition:none}}