bar floating in the middle. Make them a clean
dark LIST of short full-width rows, one per clip, and dark-tint the native player
so it stops reading as a white block on the horror theme. */
body.create-ui-unified #page-audio #audio-gallery-host .gallery{
--gal-cell:100%;grid-template-columns:1fr;gap:8px;
}
body.create-ui-unified #page-audio #audio-gallery-host .card{
aspect-ratio:auto!important;min-height:0;height:auto;
display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start;gap:10px;
padding:8px 10px;border-radius:8px;
background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
}
/* The unconditional display:flex!important above beat applyGalleryTabFor()'s
inline style.display="none" (JS's type filter, e.g. hiding image/video cards
on this audio-only list) - hidden cards rendered anyway since the stylesheet
won the specificity fight. One extra class selector outranks it. */
body.create-ui-unified #page-audio #audio-gallery-host .card.gal-type-hidden{
display:none!important;
}
body.create-ui-unified #page-audio #audio-gallery-host .card::before{
content:"";flex:0 0 3px;align-self:stretch;border-radius:2px;background:var(--acid);opacity:.55;
}
body.create-ui-unified #page-audio #audio-gallery-host .card.audio-voice::before{background:#d13049}
body.create-ui-unified #page-audio #audio-gallery-host .card.audio-music::before{background:#c68a3a}
body.create-ui-unified #page-audio #audio-gallery-host .card.audio-sfx::before{background:#7d94a4}
body.create-ui-unified #page-audio #audio-gallery-host .card{min-height:0!important}
body.create-ui-unified #page-audio #audio-gallery-host .card audio{width:100%;height:40px!important;margin:0}
body.create-ui-unified #page-audio #audio-gallery-host .card audio::-webkit-media-controls-enclosure{background:#171214;border-radius:8px}
body.create-ui-unified #page-audio #audio-gallery-host .card audio::-webkit-media-controls-panel{background:#171214}
body.create-ui-unified #page-audio #audio-gallery-host .gallery-audio-player-slot{flex:1 1 auto;min-width:0}
body.create-ui-unified #page-audio #audio-gallery-host .gallery-audio-player-slot .dd-audio-player{width:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
/* the per-clip kind tag we stamp on in JS */
body.create-ui-unified #page-audio #audio-gallery-host .card .audio-card-kind{
flex:0 0 auto;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
font-family:var(--label);color:var(--muted);min-width:34px;
}
/* 12. Voice chips: sleeker, less blocky. Delivery chips are multi-select toggles
(broad emotions, not horror-only); the inline-beat chips are quieter. */
body.create-ui-unified #page-audio .audio-chip-bank{
display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 12px;
}
body.create-ui-unified #page-audio .audio-tag-chip{
border:1px solid rgba(255,255,255,.1);
background:rgba(0,0,0,.22);
color:var(--muted);
border-radius:6px;
padding:4px 9px;
font-size:11px;line-height:1.2;
cursor:pointer;
transition:border-color .12s ease,color .12s ease,background .12s ease;
}
body.create-ui-unified #page-audio .audio-tag-chip:hover{
border-color:rgba(209,48,73,.45);color:var(--text);
}
body.create-ui-unified #page-audio .audio-tag-chip.on{
border-color:var(--acid);color:#fff;
background:linear-gradient(180deg,rgba(209,48,73,.85),rgba(140,24,38,.85));
}
body.create-ui-unified #page-audio .audio-tag-chip.subtle{
font-size:10px;padding:3px 8px;opacity:.9;
}
/* Voice picker + Preview button on one line */
body.create-ui-unified #page-audio .voice-pick-row{display:flex;gap:6px;align-items:stretch}
body.create-ui-unified #page-audio .voice-pick-row select{flex:1 1 auto;min-width:0}
body.create-ui-unified #page-audio .voice-preview-btn{
flex:0 0 auto;font-size:10px;letter-spacing:.04em;padding:0 12px;border-radius:7px;white-space:nowrap;
border-color:var(--border-2);
}
body.create-ui-unified #page-audio .voice-preview-btn:hover:not(:disabled){border-color:var(--acid);color:var(--text);background:rgba(209,48,73,.08)}
/* Separation filter chips above the results */
body.create-ui-unified #page-audio .audio-filter-row{
display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap;
}
body.create-ui-unified #page-audio .audio-filter-chip{
border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.24);
color:var(--muted);border-radius:999px;padding:5px 12px;font-size:11px;cursor:pointer;
transition:border-color .13s ease,color .13s ease,background .13s ease;
}
body.create-ui-unified #page-audio .audio-filter-chip:hover{border-color:rgba(209,48,73,.4);color:var(--text)}
body.create-ui-unified #page-audio .audio-filter-chip.active{
border-color:var(--acid);color:#fff;background:rgba(209,48,73,.14);
}
/* ===== 2026-07 design pass: status light, generate dominance, curated chrome ===== */
/* Section step numbers: statically wrong (dup 03) + skip when sections hide — retired */
.create-section-num{display:none}
/* Status pill -> traffic-light chip */
.status{display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;cursor:pointer}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#d7b743;box-shadow:0 0 8px #d7b743;animation:dd-status-pulse 1.6s ease-in-out infinite}
.status.ok::before{background:var(--ok);box-shadow:0 0 8px rgba(87,196,107,.8);animation:none}
.status.bad::before{background:#ff4444;box-shadow:0 0 8px #ff4444;animation:none}
@keyframes dd-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Generate sits under the prompt — full-width, impossible to miss after typing */
#page-generate #go,
body.create-ui-unified #page-generate #go{
display:block !important;
width:100% !important;
margin:10px 0 12px !important;
padding:16px 20px !important;
font-size:17px !important;
font-weight:800 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
border-radius:10px !important;
opacity:1 !important;
cursor:pointer !important;
pointer-events:auto !important;
position:relative !important;
z-index:80 !important;
box-shadow:0 0 22px rgba(209,48,73,.4), inset 0 0 0 1px rgba(209,48,73,.7) !important;
}
#page-generate #go:disabled,
body.create-ui-unified #page-generate #go:disabled{
opacity:1 !important;
cursor:pointer !important;
filter:none !important;
}
.create-generate-bar .genrow.prompt-gen{
grid-template-columns:minmax(160px,220px) auto !important;
}
/* Gore stack chips: give the signature feature some blood */
.gore-stack-chip{position:relative;border-left:3px solid rgba(209,48,73,.35);transition:border-color .15s, box-shadow .15s}
.gore-stack-chip:hover{box-shadow:0 0 12px rgba(209,48,73,.25)}
.gore-stack-chip[data-gore-stack="practical_fx"],
.gore-stack-chip[data-gore-stack="body_horror"]{border-left-color:rgba(255,68,68,.55)}
.gore-stack-chip.active{border-left-color:var(--acid);box-shadow:0 0 14px rgba(209,48,73,.3)}
.gore-stack-chip[data-gore-stack="body_horror"].active,
.gore-stack-chip[data-gore-stack="practical_fx"].active{border-left-color:#ff4444;box-shadow:0 0 14px rgba(255,68,68,.35)}
/* Empty state -> showcase wall */
.empty{display:flex;flex-direction:column;align-items:center;gap:18px;padding:34px 18px}
.dd-showcase-head{letter-spacing:.18em;text-transform:uppercase;font-size:12px;opacity:.75}
.dd-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;width:100%;max-width:960px}
.dd-showcase-card{position:relative;border:1px solid rgba(209,48,73,.25);border-radius:8px;overflow:hidden;cursor:pointer;
aspect-ratio:16/10;background-size:cover;background-position:center;transition:border-color .15s, box-shadow .15s, transform .12s;text-align:left}
.dd-showcase-card:hover{border-color:rgba(209,48,73,.8);box-shadow:0 0 22px rgba(209,48,73,.25);transform:translateY(-2px)}
.dd-showcase-card .sc-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.88) 100%)}
.dd-showcase-card .sc-label{position:absolute;left:12px;bottom:30px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff0f5;text-shadow:0 1px 6px #000}
.dd-showcase-card .sc-use{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.1em;color:var(--acid);opacity:.9}
.dd-showcase-hint{font-size:11px;opacity:.55;letter-spacing:.08em}
/* Gate showcase strip */
.gate-showcase{width:100%;max-width:560px;margin:22px auto 0;text-align:center}
.gate-showcase-head{font-size:10px;letter-spacing:.25em;opacity:.6;margin-bottom:10px}
.gate-showcase-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gate-showcase-img{aspect-ratio:1/1;background-size:cover;background-position:center;border:1px solid rgba(209,48,73,.22);border-radius:6px;filter:saturate(.9);transition:filter .2s,border-color .2s}
.gate-showcase-img:hover{filter:saturate(1.15);border-color:rgba(209,48,73,.7)}
.gate-showcase-sub{font-size:11px;letter-spacing:.06em;opacity:.55;margin-top:10px}
/* ===== Canvas mode: haunted-CRT create page ===== */
.cv-toggle{margin-left:10px;font-size:10px;letter-spacing:.1em;padding:4px 10px;opacity:.8}
body.dd-canvas #page-generate .create-split{display:none}
#cv-root{display:none}
body.dd-canvas #cv-root{display:grid;grid-template-rows:auto minmax(340px,58vh) auto auto auto;gap:14px;max-width:1500px;margin:0 auto;padding:10px 18px 26px}
/* Rails: film-language strips */
#cv-rails{display:grid;gap:8px}
#cv-rails .opt-picker-block{margin:0}
#cv-rails .opt-picker-heading{font-size:10px;letter-spacing:.22em;opacity:.6}
#cv-rails .opt-picker-host{display:flex;gap:8px;overflow-x:auto;padding:6px 2px;scrollbar-width:thin}
#cv-rails .opt-picker-host>*{flex:0 0 auto}
/* The CRT stage */
.cv-stage{position:relative;display:flex;flex-direction:column;min-height:0}
.cv-screen{position:relative;flex:1;min-height:0;border:1px solid rgba(209,48,73,.35);border-radius:10px;background:#020302;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 80px rgba(0,0,0,.9), 0 0 30px rgba(209,48,73,.08)}
.cv-media{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:2}
.cv-scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.cv-static{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:repeating-conic-gradient(#111 0% .0001%, #2a2a2a .0002% .0003%, #050505 .0004% .0005%);background-size:171px 133px}
.cv-screen.tuning .cv-static{opacity:.5;animation:cv-static-jump .18s steps(2) infinite}
@keyframes cv-static-jump{0%{background-position:0 0}50%{background-position:-83px 47px}100%{background-position:61px -29px}}
@media (prefers-reduced-motion: reduce){.cv-screen.tuning .cv-static{animation:none;opacity:.3}}
.cv-stage-meta{padding:8px 4px 0;font-size:11px;letter-spacing:.08em;opacity:.65;min-height:20px;text-align:center}
/* Reel: results as a filmstrip */
#cv-reel .create-results-col{margin:0}
#cv-reel .panel-gallery{padding-top:8px}
#cv-reel .gallery{display:flex!important;gap:10px;overflow-x:auto;padding:6px 2px;scrollbar-width:thin}
#cv-reel .gallery .card{flex:0 0 auto;width:150px!important;max-width:150px}
#cv-reel .empty{padding:12px}
#cv-reel .dd-showcase{grid-template-columns:repeat(4,minmax(150px,1fr))}
#cv-reel .dd-showcase-card{aspect-ratio:16/9}
/* Dock: the control desk */
#cv-dock{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;border:1px solid rgba(209,48,73,.25);border-radius:10px;padding:12px;background:rgba(13,18,12,.7)}
#cv-dock .prompt-drop-zone{grid-column:1;grid-row:1}
#cv-dock #create-generate-bar{grid-column:2;grid-row:1;display:flex;align-items:stretch}
#cv-dock .genrow{display:flex;gap:8px;align-items:stretch}
#cv-dock #prompt{min-height:64px}
.cv-advanced-btn{justify-self:center;font-size:10px;letter-spacing:.18em;padding:8px 22px;opacity:.75}
.cv-advanced-btn:hover{opacity:1}
.cv-drawer{border:1px solid rgba(209,48,73,.2);border-radius:10px;padding:10px}
.cv-drawer .create-controls-col{max-width:none}
@media(max-width:900px){
body.dd-canvas #cv-root{grid-template-rows:auto minmax(240px,44vh) auto auto auto;padding:8px 8px 20px}
#cv-dock{grid-template-columns:1fr}
#cv-dock #create-generate-bar{grid-column:1;grid-row:2}
}
/* Canvas mode refinements: compact rails, full-height desk, stage empty statement */
body.dd-canvas #cv-root{grid-template-rows:auto minmax(0,1fr) auto auto auto;height:calc(100dvh - 76px);padding:8px 18px 12px;gap:10px}
#cv-rails .opt-picker-hero-wrap,#cv-rails .opt-picker-hero,#cv-rails .opt-picker-meta,#cv-rails .opt-picker-desc,#cv-rails .opt-picker-counter{display:none!important}
#cv-rails .opt-picker-strip{display:flex!important;grid-template-columns:none!important;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px 2px;max-height:118px;scrollbar-width:thin}
#cv-rails .opt-picker-strip>*{flex:0 0 132px}
#cv-rails .opt-picker-tabs{display:flex;gap:6px;flex-wrap:wrap}
#cv-rails .opt-picker-tabs button{font-size:10px;letter-spacing:.14em;padding:5px 14px}
#cv-rails #create-look-pickers{display:grid;gap:6px;margin:0}
#cv-rails .hint{display:none}
.cv-screen:not(.tuning):not(:has(.cv-media))::before{content:"LOAD A NIGHTMARE";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3vw,34px);letter-spacing:.4em;opacity:.25;z-index:2}
.cv-screen.tuning::before{content:"RECEIVING TRANSMISSION";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2vw,22px);letter-spacing:.35em;color:var(--acid);opacity:.7;z-index:4;animation:cv-static-jump 1.2s steps(3) infinite}
#cv-reel .panel-gallery{max-height:190px;overflow:hidden}
/* Canvas: force rails visible, compact reel to pure filmstrip */
body.dd-canvas #cv-rails #create-look-pickers{display:grid!important}
body.dd-canvas #cv-rails [hidden]{display:none}
#cv-reel .gal-head .gal-size,#cv-reel .gal-head .gal-select-toggle,#cv-reel .gal-search-row,#cv-reel .gal-sort,#cv-reel input[type="search"],#cv-reel #gal-search{display:none!important}
#cv-reel .panel-gallery{max-height:230px;display:flex;flex-direction:column}
#cv-reel #create-gallery-slot{flex:1;min-height:0;overflow:hidden}
body.dd-canvas #cv-root{grid-template-rows:auto minmax(300px,1fr) auto auto auto auto;height:calc(100vh - 76px)}
/* Canvas polish: tab sizing, scrollbars, centering, tighter strips */
#cv-rails .opt-picker-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#cv-rails .opt-picker-tabs button{flex:0 0 auto;min-width:110px;max-width:180px}
#cv-rails .opt-picker-strip{max-height:104px}
#cv-rails .opt-picker-strip>*{flex:0 0 118px}
#cv-rails .opt-picker-strip::-webkit-scrollbar,#cv-reel .gallery::-webkit-scrollbar{height:6px}
#cv-rails .opt-picker-strip::-webkit-scrollbar-thumb,#cv-reel .gallery::-webkit-scrollbar-thumb{background:rgba(209,48,73,.35);border-radius:3px}
#cv-rails .opt-picker-strip::-webkit-scrollbar-track,#cv-reel .gallery::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.cv-screen:not(.tuning):not(:has(.cv-media))::before{text-indent:.4em;text-align:center}
#cv-reel .gal-head{padding:4px 8px}
#cv-reel .gal-head~*:not(#create-gallery-slot){display:none}
/* Mobile nav: one swipeable row instead of a stacked pill blob */
@media(max-width:640px){
.dd-nav{display:flex!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:6px;padding:4px 2px}
.dd-nav::-webkit-scrollbar{display:none}
.dd-nav>*{flex:0 0 auto}
}
/* Member/Friend badge + Go Member CTA in header */
.dd-plan-tag{margin-left:8px;font-size:9px;letter-spacing:.14em;padding:2px 7px;border-radius:3px;background:rgba(209,48,73,.16);color:var(--acid);border:1px solid rgba(209,48,73,.4)}
.dd-go-member{margin-left:8px;font-size:10px;letter-spacing:.06em;padding:4px 12px;border-radius:4px;background:var(--acid);color:#0a0a0a;font-weight:700;border:none;cursor:pointer;box-shadow:0 0 12px rgba(209,48,73,.4)}
.dd-go-member:hover{box-shadow:0 0 20px rgba(209,48,73,.7)}
/* ===== Readability lift (2026-07): bump the text people actually read =====
Monospace + letter-spacing reads small; nudge functional text up ~2px. */
label{font-size:11.5px!important;letter-spacing:.14em}
.hint,.create-section-hint,.create-mode-hint{font-size:12px!important;line-height:1.55;opacity:.95}
.opt-picker-desc{font-size:11.5px!important;line-height:1.5}
.opt-picker-title{font-size:13px!important}
.opt-picker-heading{font-size:11px!important}
.btn,.clear,button.clear,.gore-stack-chip{font-size:12px!important}
#prompt,#create-vprompt,textarea.create-resize-ta,.prompt-drop-zone textarea{font-size:14px!important;line-height:1.5}
select,input[type="text"],input[type="email"],input[type="password"],input[type="number"]{font-size:13px!important}
.dd-nav>*{font-size:12px!important}
.gal-tab,.gal-tab .cnt{font-size:12px!important}
.gate-hint{font-size:13px!important}
.gate-tag{font-size:12.5px!important}
.gate-form label{font-size:12px!important}
.gate-form input{font-size:14px!important}
#gate-submit,.gate-mode-btn{font-size:13px!important}
.model-row .hint,#modelinfo{font-size:11.5px!important}
@media(max-width:640px){
.hint,.create-section-hint{font-size:12.5px!important}
label{font-size:12px!important}
}
/* === Home: fill the viewport — no dead band under the cards (2026-07-13).
Desktop only; mobile keeps its natural scrolling layout. Rows stretch to
share the leftover height, so the card thumbnails simply show more image. */
@media(min-width:1101px){
#page-home .home-wrap{
min-height:calc(100vh - 68px);
display:flex;
flex-direction:column;
}
#page-home .home-grid{
flex:1;
grid-auto-rows:minmax(200px,1fr);
}
}
/* ── READY pill retired 2026-07-14 ─────────────────────────────────────────────
Jared: "if you can log into the site, it's ready." HIDDEN, not deleted —
dd-app.js writes st.textContent/st.className UNGUARDED in connect() (~7337 and
~7357), so removing #status from the markup makes $("status") return null,
connect() throws, its catch throws again on the same null, and
$("go").disabled=false never runs — Generate would stay dead forever. Hiding
lets every write land harmlessly on a hidden node.
MUST live at the end of the file: `.app-status .status` is also set at line
~686 with display:inline-block at the SAME specificity (0,2,0), so an earlier
copy of this rule loses on source order. Position is doing the work here, not
!important. Scoped to .app-status so the Settings status grid
(.status-row/.status-dot) is untouched.
Trade-off: also hides the click-to-reconnect target (dd-app.js ~18163);
ComfyUI-offline still shows via #modelinfo + a disabled Generate button.
Revert = delete this block. */
.app-status .status{display:none}
/* Local-only controls dimmed while a deliberate CLOUD engine is picked (2026-07-17):
cloud APIs take prompt text only — no LoRA socket — so Gore intensity / Second
pass / Character can't apply. Toggled by syncCloudOnlyDim() in dd-app.js.
Revert = delete this block + the syncCloudOnlyDim calls. */
.cloud-na{opacity:.45;pointer-events:none}
/* === HOME DIRECTION A (poster wall) — approved 2026-07-23. Images lifted, overlay only in the
caption zone, bone titles + red tick, descriptors back. Additive override block scoped to
#page-home; revert = delete this block + the descriptor lines in digital-decay.html. === */
#page-home .home-card-img{filter:saturate(1.05) contrast(1.02) brightness(1.05)}
#page-home .home-card:hover .home-card-img{filter:saturate(1.1) contrast(1.02) brightness(1.14);transform:scale(1.06)}
#page-home .home-card::after{background:linear-gradient(180deg,rgba(6,8,6,0) 0%,rgba(6,8,6,0) 46%,rgba(6,8,6,.38) 68%,rgba(6,8,6,.9) 100%)}
#page-home .home-card-body h3{color:#eae4d8;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#page-home .home-card-body h3::before{content:"";display:inline-block;width:3px;height:.78em;background:var(--acid);margin-right:10px}
#page-home .home-card:hover .home-card-body h3{color:#fff}
#page-home .home-card-body p{display:block;margin:2px 0 0 13px;font-size:12px;letter-spacing:.02em;color:#b7aaae;text-shadow:0 1px 4px rgba(0,0,0,.9)}
#page-home .home-splash-img{filter:brightness(1.05) saturate(1.05)}
#page-home .home-splash::after{background:linear-gradient(180deg,rgba(6,8,6,0) 0%,rgba(6,8,6,0) 44%,rgba(6,8,6,.4) 68%,rgba(6,8,6,.9) 100%)}
#page-home .home-splash-body h3{color:#eae4d8;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#page-home .home-splash-body h3::before{content:"";display:inline-block;width:3px;height:.78em;background:var(--acid);margin-right:9px}
#page-home .home-splash-body p{margin:1px 0 0 12px;font-size:11.5px;color:#b7aaae;text-shadow:0 1px 4px rgba(0,0,0,.9)}
#page-home .home-mini-img{opacity:1;filter:brightness(1.05) saturate(1.05)}
#page-home .home-mini::after{background:linear-gradient(180deg,transparent 42%,rgba(6,8,6,.86) 100%)}
#page-home .home-mini>span:last-child{color:#eae4d8;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#page-home .home-mini>span:last-child::before{content:"";display:inline-block;width:3px;height:.72em;background:var(--acid);margin-right:8px}
/* === MOBILE PAGE TITLES — More-page kicker style, approved 2026-07-23 (Jared: Create and
Assistant pages had no title on phone; unify every mobile page title with the More page
look). Mobile-only via body.dd-mobile — PC pages unchanged. html prefix beats
dd-mobile.css !important rules by specificity. Revert = delete this block. === */
html body.dd-mobile .page-head h2{
font-family:inherit !important;
font-size:11px !important;
font-weight:600 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
color:var(--acid) !important;
margin:0 0 4px !important;
}
html body.dd-mobile #page-supercomputer .page-head{display:block !important;padding:0 0 2px !important;order:-1}
html body.dd-mobile #page-supercomputer .page-head p{display:none !important}
html body.dd-mobile #page-generate .create-shell::before{
content:"Create";display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--acid);margin:2px 0 6px;
}
/* ============================================================================
PC VIEWPORT LOCK — Jared 2026-07-25
"Every page contained on one screen; the red scrollbar only for images, chat,
gallery, videos and audio." Desktop only: gated at min-width:933px so it can
never reach dd-mobile.css's territory (which tops out at 932px).
Revert = delete this whole block.
========================================================================== */
@media (min-width:933px){
/* --- Compact page headers ---------------------------------------------
The big display title + subtitle + divider cost ~90px of every page's
vertical budget. Same information, ~45px. */
.dd-page .page-shell>.page-head{
margin:0 0 10px;
padding:0 0 8px;
}
.dd-page .page-shell>.page-head h2{font-size:clamp(20px,2.05vw,28px);line-height:1}
.dd-page .page-shell>.page-head p{margin:3px 0 0;font-size:11.5px;line-height:1.4;max-width:70em}
/* --- SETTINGS: two-column card layout, whole page on one screen --------- */
#page-settings.dd-page.active{overflow:hidden}
#page-settings .page-shell{
max-width:1180px;
height:100%;
min-height:0;
padding:12px 16px 10px;
display:flex;
flex-direction:column;
overflow:hidden;
}
/* `.wrap{display:grid}` was beating the global [hidden] rule, so the logged-out
account bar still ate 169px of the page. */
#page-settings [hidden]{display:none !important}
/* Account + Plan bars sat stacked (123px). One row on PC. */
#page-settings #settings-account-bar{display:flex !important;gap:10px;align-items:stretch}
#page-settings #settings-account-bar>.panel{flex:1 1 0;min-width:0;padding:9px 14px !important}
#page-settings #settings-plan-bar{margin-top:0 !important}
#page-settings .page-head{margin:0 0 10px;padding:0 0 8px}
#page-settings .page-head h2{font-size:clamp(22px,2.1vw,30px)}
#page-settings .page-head p{margin:4px 0 0;font-size:11.5px}
#page-settings .wrap.single{margin:0 0 10px !important;flex:0 0 auto}
#page-settings .wrap.single:last-child{
flex:1 1 auto;min-height:0;margin-bottom:0 !important;display:flex;
}
/* CSS columns rather than grid: hidden owner-only cards collapse cleanly and
the two columns re-balance themselves when a opens. */
#page-settings .panel.settings-grid{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
columns:2;
column-gap:20px;
padding:16px 18px !important;
scrollbar-width:thin;
scrollbar-color:rgba(209,48,73,.45) transparent;
}
#page-settings .settings-card{
break-inside:avoid;
-webkit-column-break-inside:avoid;
display:inline-block;
width:100%;
margin:0 0 9px;
}
#page-settings .settings-card:last-child{margin-bottom:0}
#page-settings .settings-section:not(:first-child){margin-top:0;padding-top:0;border-top:0}
#page-settings .settings-card .settings-section{margin:0 0 6px}
#page-settings .settings-card .hint{line-height:1.5;font-size:11px}
#page-settings .settings-card label{margin-top:8px}
#page-settings .owner-pony-list{max-height:min(200px,26vh)}
/* --- ASSISTANT: chat column fills the screen instead of overrunning it ---
.sc-chat-log had min-height:360px + max-height:62vh, so on a laptop the
panel was taller than the page and the whole page scrolled. Let the log be
the flexible element like every other page's main pane. */
#page-supercomputer.dd-page.active{overflow:hidden}
#page-supercomputer .page-shell{height:100%;min-height:0;overflow:hidden;padding-bottom:12px}
#page-supercomputer .wrap.sc-layout{flex:1 1 auto;min-height:0;align-items:stretch}
#page-supercomputer .sc-chat-panel{height:100%;min-height:0;overflow:hidden}
#page-supercomputer .sc-chat-log{
flex:1 1 auto;
min-height:0 !important;
max-height:none !important;
}
#page-supercomputer .sc-side{max-height:100%;overflow-y:auto;scrollbar-width:thin}
/* --- IMAGES: "Selected image" box locked to the screen ----------------- */
/* Fixed chrome + one flexible element (the preview) that absorbs whatever
height is left, so the box fits exactly at any window height. */
.image-page-split{grid-template-columns:minmax(300px,368px) minmax(0,1fr)}
.image-page-tools{overflow:hidden}
.image-page-tools>.panel{
height:100%;
min-height:0;
display:flex;
flex-direction:column;
padding:14px 16px;
box-sizing:border-box;
}
.image-page-tools>.panel>*{flex:0 0 auto}
.image-page-tools #img-edit-upload{margin-bottom:8px !important;padding:8px !important}
.image-page-tools .img-edit-preview{
flex:1 1 auto;
min-height:84px;
margin-top:6px;
}
.image-page-tools .img-edit-preview img{max-height:100%}
.image-page-tools .settings-section{margin:10px 0 2px !important}
.image-page-tools label{margin-top:6px}
.image-page-tools #i2i-prompt{min-height:42px !important;height:42px}
.image-page-tools #img-edit-engine-hint{max-height:2.9em;overflow:hidden}
.image-page-tools #img-page-tools-hint{max-height:1.5em;overflow:hidden}
.image-page-tools .hint{font-size:10.5px;line-height:1.4;margin-top:4px !important}
.image-page-tools #img-edit-quality-row{margin-top:6px !important}
.image-page-tools #i2i-go{margin-top:8px !important;padding:10px}
/* Enhance + Open in Studio were two full-width stacked buttons. */
.image-page-tools .img-tools-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.image-page-tools .img-tools-row>button{width:100% !important;margin-top:0 !important;padding:8px 6px !important}
.image-page-tools #img-page-tools-hint{margin-top:6px !important}
/* --- AUDIO: left column fits, no red scrollbar ------------------------- */
/* The column is 390-500px wide but stacked everything in one narrow run.
Two columns for the secondary controls; the script/prompt and the action
row stay full width. `html body.create-ui-unified` to beat the existing
audio restyle block's specificity. */
html body.create-ui-unified #page-audio .audio-controls-col{overflow:hidden}
html body.create-ui-unified #page-audio .audio-studio-stack{
display:flex;flex-direction:column;min-height:0;height:100%;gap:8px;
}
html body.create-ui-unified #page-audio .audio-subtabs{flex:0 0 auto}
html body.create-ui-unified #page-audio .audio-studio-card{
flex:1 1 auto;
min-height:0;
display:grid;
grid-template-columns:1fr 1fr;
align-content:start;
gap:5px 10px;
padding:9px 12px 10px;
box-sizing:border-box;
overflow:hidden;
}
/* Everything is full width by default — narrow cells make the chip banks and
the voice list wrap TALLER, which is the opposite of the point. Only the
two collapsed disclosures below get paired. */
html body.create-ui-unified #page-audio .audio-studio-card>*{grid-column:1 / -1;min-width:0}
html body.create-ui-unified #page-audio .audio-studio-card>#voice-design-panel,
html body.create-ui-unified #page-audio .audio-studio-card>#voice-settings-details{
grid-column:auto;
}
html body.create-ui-unified #page-audio .audio-prompt-ta{min-height:54px;resize:vertical}
html body.create-ui-unified #page-audio .audio-gen-btn{min-height:36px}
/* Long tip line ran 3 lines; full text stays available as the tooltip. */
html body.create-ui-unified #page-audio .audio-card-desc{
font-size:10.5px;line-height:1.35;margin:0;
max-height:1.4em;overflow:hidden;
}
/* Sub-hints inside the voice picker were a 3-line paragraph each. */
html body.create-ui-unified #page-audio #voice-eleven-wrap .hint{
max-height:1.4em;overflow:hidden;
}
html body.create-ui-unified #page-audio #voice-preview-text,
html body.create-ui-unified #page-audio #music-final-prompt{
max-height:1.4em;overflow:hidden;
}
/* Audio page shell was 6px taller than the viewport. */
html body.create-ui-unified #page-audio.dd-page.active{overflow:hidden}
html body.create-ui-unified #page-audio .page-shell{
height:100%;min-height:0;display:flex;flex-direction:column;
overflow:hidden;padding-bottom:10px;
}
html body.create-ui-unified #page-audio .audio-split{flex:1 1 auto;min-height:0;padding-bottom:0}
/* Belt-and-braces against stills/clips flashing into the audio results while
the JS filter is still catching up. Needs the extra .card class to outrank
the audio list's own `display:flex!important`. */
html body.create-ui-unified #page-audio #audio-gallery-host .card.card[data-type="image"],
html body.create-ui-unified #page-audio #audio-gallery-host .card.card[data-type="video"]{display:none !important}
/* --- VIDEO: whole control column on one screen ------------------------- */
#page-video .video-controls-col{overflow:hidden}
/* Narrower than the 480 first pass — the gallery wants the room and the
controls don't need it once the prompt stops ballooning. */
#page-video .video-split{grid-template-columns:minmax(370px,420px) minmax(0,1fr)}
#page-video .video-controls-col>.panel{
height:100%;
min-height:0;
display:flex;
flex-direction:column;
gap:4px;
padding:11px 13px;
box-sizing:border-box;
/* Fits with Shot settings collapsed (the default). Expanding it is a
deliberate act, so scroll rather than clip the controls away. */
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:thin;
scrollbar-color:rgba(209,48,73,.45) transparent;
}
/* The prompt used to absorb ALL leftover height (283px on a tall window),
which shoved the engine picker, shot settings and reference trays down past
the fold — "I can't even go down to the other options". Fixed, modest box;
the slack now stays at the bottom of the panel where it belongs. */
#page-video .video-controls-col>.panel>#vprompt{
flex:0 0 auto;
height:76px !important;
min-height:76px !important;
max-height:76px;
resize:vertical;
}
#page-video .video-controls-col>.panel{justify-content:flex-start}
#page-video .video-controls-col>.panel>*{flex:0 0 auto;margin-top:0}
/* Order: frames -> prompt -> Generate -> reference -> everything else.
dd-mobile.js already hoists the frame pair/prompt/Generate on PC; this only
pulls the reference tray up so it sits with them instead of further down. */
#page-video .video-controls-col>.panel>*{order:5}
#page-video .video-controls-col>.panel>.m-frame-pair{order:1}
#page-video .video-controls-col>.panel>label[for="vprompt"]{order:2}
#page-video .video-controls-col>.panel>#vprompt{order:3}
#page-video .video-controls-col>.panel>#vimageclip{order:4}
/* All the reference inputs group with the frames under Generate — the audio
and motion-video trays used to fall to the very bottom, under Shot
settings, so "reference video" was the hardest thing on the page to find. */
#page-video .video-controls-col>.panel>#vref-wrap,
#page-video .video-controls-col>.panel>#vaudio-wrap,
#page-video .video-controls-col>.panel>#vmotionvid-wrap{order:4}
/* Long explanatory hints were 3-5 lines each; clamp them, keep full text on hover. */
#page-video #videohint,
#page-video #video-safety-note,
#page-video #video-premium-note{
max-height:2.9em;overflow:hidden;font-size:10.5px;line-height:1.4;margin:0;
}
#page-video #vdurationhint{max-height:1.5em;overflow:hidden}
#page-video #video-premium-note,
#page-video #video-safety-note{max-height:1.5em}
#page-video #videohint{max-height:1.5em}
#page-video .video-controls-col label[for="vcam"]{
max-height:1.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
/* Length / Resolution / Aspect / Motion was a 3-wide grid holding 4 cells, so
it wrapped to two rows. Four across, one row. */
#page-video .video-shot-settings>.row{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6px !important}
#page-video .video-shot-settings>.row label{font-size:9.5px}
#page-video .vmode-bar{gap:4px;padding:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#page-video .vmode-bar::-webkit-scrollbar{display:none}
#page-video .vmode-bar button{padding:5px 7px;font-size:9px;white-space:nowrap;flex:0 0 auto}
/* "Also using:" attachment chips sit with Generate, not adrift at the bottom
of the ordered control stack — this bar is the thing that makes a stale end
frame / reference visible before it silently lands in a render. */
#page-video .video-controls-col>.panel>#vattach-bar{order:4}
#page-video #vattach-bar{margin:6px 0 0 !important}
/* --- VIDEO (PC): fit the control stack, smaller controls ----------------
Jared 2026-07-25: "make the buttons a little smaller... easier to deal
with". Measured before this block at 1440x900: the controls pane held 734px
of content in 668px, so the last ~68px (Generate button included) sat below
an internal scroll. Trimming the oversized rows brings it inside the pane.
Nothing is hidden — only tightened. */
#page-video .video-controls-col select,
#page-video .video-controls-col input[type="text"]{
min-height:30px;height:auto;padding:4px 8px;font-size:11px;
}
#page-video #video-shot-settings{padding:7px 9px}
#page-video #video-shot-settings>summary{font-size:10px;margin-bottom:4px}
#page-video #video-shot-settings>.row{gap:5px !important}
#page-video #video-shot-settings>.row label{font-size:9px;gap:2px}
#page-video #video-shot-settings>label{font-size:9.5px;margin:6px 0 2px}
#page-video #vcam{min-height:30px}
#page-video #create-stack-toggle{margin:5px 0 0;font-size:10px}
#page-video #vprompt{min-height:58px}
/* The recent-images strips under Start/End frame are a convenience, not the
primary input — cap them so they can't push Generate off the pane. */
#page-video .endframe-pick{max-height:46px;overflow-y:auto;scrollbar-width:thin}
#page-video #vimageclip{min-height:32px;padding:7px 12px;font-size:11.5px}
#page-video .video-controls-col>.panel>*{margin-top:6px}
/* --- GALLERY: page locked to the screen, only the grid scrolls -----------
Jared 2026-07-25: "I also want the gallery page to be locked to the page as
well. Not have to scroll all the way down." The page-head + tab row are
fixed chrome; the thumbnail grid is the one flexible element that absorbs
the remaining height and owns the red scrollbar. Same shape as the Settings
and Assistant locks above. */
#page-gallery.dd-page.active{overflow:hidden}
#page-gallery .page-shell{
height:100%;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
padding-bottom:12px;
}
#page-gallery .wrap.single{
flex:1 1 auto;
min-height:0;
margin-bottom:0 !important;
display:flex;
}
#page-gallery .panel-gallery{
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
}
#page-gallery .gal-head,
#page-gallery .gal-browse-bar{flex:0 0 auto}
/* The grid is the ONLY scroller. #gallery-slot is the host that exists in the
markup; the .gallery grid is injected into it at runtime (measured 2026-07-25
— the slot is what actually scrolls), so style both or the red scrollbar
lands on an element that isn't the scroller. */
#page-gallery #gallery-slot,
#page-gallery .gallery{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
align-content:start;
scrollbar-width:thin;
scrollbar-color:rgba(209,48,73,.45) transparent;
}
#page-gallery #gallery-slot::-webkit-scrollbar,
#page-gallery .gallery::-webkit-scrollbar{width:9px}
#page-gallery #gallery-slot::-webkit-scrollbar-thumb,
#page-gallery .gallery::-webkit-scrollbar-thumb{
background:rgba(209,48,73,.45);border-radius:6px;
}
#page-gallery #gallery-slot::-webkit-scrollbar-track,
#page-gallery .gallery::-webkit-scrollbar-track{background:transparent}
/* Start / End / Reference drop boxes: one tight row instead of tall stacked
panels. Header collapses to a single line, frame boxes are shorter. */
#page-video .m-frame-pair{gap:8px}
#page-video .m-frame-pair .startend-panel{margin:0;padding:7px 8px}
#page-video .startend-header{margin:0 0 4px;display:flex;align-items:baseline;gap:6px}
#page-video .startend-header h4{margin:0;font-size:10px}
#page-video .startend-header .hint{
max-height:1.3em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
font-size:9px;min-width:0;
}
#page-video .startend-frames{min-height:0}
#page-video .startend-frame{height:72px;min-height:0;max-height:72px}
/* Reference trays (image refs, motion-reference video, S2V audio) sit right
under Generate with the frames — make them read as one compact group
instead of three loose stacked panels. */
#page-video #vref-wrap .startend-panel{padding:7px 8px}
#page-video #vref-wrap .startend-frame{height:60px;max-height:60px}
#page-video #vref-wrap .ref-frames{display:flex;flex-wrap:wrap;gap:6px}
#page-video #vaudio-wrap,
#page-video #vmotionvid-wrap{
border:1px solid var(--border-2);border-radius:8px;
padding:7px 9px;background:rgba(255,255,255,.02);
}
#page-video #vaudio-wrap label,
#page-video #vmotionvid-wrap label{font-size:9.5px;margin:0 0 4px}
#page-video .studio-upload{padding:8px 10px;font-size:10px;min-height:0}
#page-video #vaudio-hint,
#page-video #motion-camera-hint{max-height:2.9em;overflow:hidden;font-size:10px}
#page-video .camera-recorder{margin-top:6px}
/* defaults to a 300x150 intrinsic box even with no stream. */
#page-video .camera-recorder video{height:96px !important;max-height:96px;width:100%;object-fit:cover}
#page-video .camera-actions{gap:5px}
#page-video .camera-actions button{padding:5px 7px;font-size:9px}
#page-video #vmotionvid-wrap select{font-size:11px;padding:5px 6px}
/* Start-frame recent-images strip (#vsource-pick), mirrors the end-frame one. */
#page-video .startend-panel .endframe-pick{
max-height:44px;gap:4px;margin-top:5px;
}
#page-video .startend-panel .endframe-pick img{width:34px;height:34px}
#page-video .startend-panel .endframe-pick:empty{display:none}
#page-video #vimageclip{margin-top:0 !important;padding:10px}
/* --- CREATE: de-bunch the image + cinema options ----------------------- */
/* More width (the results gallery still gets ~800px), so the option rows
stop being a narrow crammed stack. */
/* Jared 2026-07-26: "go back to the side panel, just give more space to the
gallery." Same two-column page, narrower control rail - the gallery gains
~120px. Revert = restore minmax(420px,520px). */
#page-generate .create-split{grid-template-columns:minmax(376px,400px) minmax(0,1fr)}
/* `html body.create-ui-unified` — the unified-UI block sets overflow:visible /
flex:0 0 auto on these and outranks a plain #page-generate selector. */
html body.create-ui-unified #page-generate .create-panel-split{
flex:1 1 auto;min-height:0;overflow:hidden;
display:flex;flex-direction:column;
}
html body.create-ui-unified #page-generate .generate-dock{flex:0 0 auto;min-height:0}
/* Options are the flexible area: the column itself never scrolls, the option
list does, and only when a section is expanded past the space available. */
html body.create-ui-unified #page-generate .create-controls-col{overflow:hidden}
html body.create-ui-unified #page-generate .create-options-scroll{
flex:1 1 auto;min-height:0;
overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:rgba(209,48,73,.45) transparent;
padding-right:4px;
}
#page-generate .create-options-stack{flex:1 1 auto;min-height:0}
/* Sections were rendering 01 -> 07 -> 02 -> 03. Put them in their numbered
order so the panel reads the way it's labelled. */
#page-generate #create-image-options{display:flex;flex-direction:column;gap:3px}
#page-generate #create-output-section{order:1}
#page-generate #create-simple-options{order:2}
#page-generate #create-gore-section{order:3}
#page-generate #create-look-section{order:4}
#page-generate #create-character-section{order:5}
#page-generate #art-style-section{order:6}
#page-generate #create-neg-section{order:7}
#page-generate #more-options-section{order:8}
/* Cinema options: nine label/thumb/select rows stacked in one narrow run was
the "bunched up" part. Two across, tighter rows. */
#page-generate #create-simple-dropdowns{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:5px 10px;
align-content:start;
}
#page-generate .create-dd-row{min-width:0;min-height:0}
#page-generate .create-dd-row .create-dd-thumb{width:24px;height:24px}
#page-generate .create-dd-row label{font-size:9.5px;letter-spacing:.06em}
#page-generate .create-dd-row select{font-size:11px;padding:3px 6px}
#page-generate .create-simple-preview{margin-bottom:4px !important}
/* Section chrome: quieter, shorter summaries so four collapsed headers don't
eat the panel. */
#page-generate .create-section-card{margin:0 !important}
#page-generate .create-section-card>summary{
padding:5px 8px;font-size:10px;letter-spacing:.1em;margin-bottom:0 !important;
}
#page-generate .create-section-card[open]>summary{margin-bottom:6px !important}
/* Hints in the generator row were 3-5 lines each. */
#page-generate #modelinfo,
#page-generate #create-render-style-hint,
#page-generate #gore-look-hint,
#page-generate #chaos-hint{
max-height:2.9em;overflow:hidden;font-size:10.5px;line-height:1.4;
}
#page-generate .create-model-row{margin-top:6px}
#page-generate .create-render-style-row{margin-top:6px !important}
#page-generate .create-mode-bar{padding:2px 0}
#page-generate .create-mode-hint{font-size:10.5px}
/* rows="3" gave the prompt a 73px intrinsic height regardless of min-height. */
#page-generate #prompt{height:52px;min-height:44px}
#page-generate #go{margin-top:6px !important;padding:9px 14px}
/* Generator + Render style side by side instead of two stacked label/select
pairs with a paragraph under each. */
#page-generate .create-model-row{
display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;align-items:start;
}
#page-generate .create-model-row>label[for="model"]{grid-column:1;grid-row:1}
#page-generate .create-model-row>#model{grid-column:1;grid-row:2}
#page-generate .create-model-row>#modelinfo{grid-column:1;grid-row:3;max-height:2.9em;overflow:hidden}
#page-generate .create-render-style-row{
grid-column:2;grid-row:1 / span 3;margin-top:0 !important;min-width:0;
}
#page-generate #create-imgref-wrap{grid-column:1 / -1}
#page-generate .create-model-row>select{min-width:0}
#page-generate #create-refiner>summary{padding:5px 8px;font-size:10px}
#page-generate .create-stack-toggle{font-size:10.5px}
/* Render-style hint was a 3-line paragraph under a select. */
#page-generate #create-render-style-hint{max-height:1.5em}
/* Nine dropdown rows: shorter so two columns of five clear the panel. */
#page-generate .create-dd-row{min-height:0}
#page-generate .create-simple-preview{max-height:26px;overflow:hidden}
/* 01 Output hides its own summary (it used to be permanently expanded). Now
that only one section is open at a time it needs a visible, clickable
header like the rest, or collapsing it strands the aspect/size controls. */
#page-generate #create-output-section>summary{display:block}
/* Uniform summary height — they were rendering 14 / 36 / 37px. */
#page-generate .create-section-card>summary{min-height:0;line-height:1.4}
#page-generate #create-neg-section>summary,
#page-generate #create-gore-section>summary{padding:5px 8px !important;margin:0 !important}
/* --- GALLERY CARDS: uniform video box, compact audio ------------------- */
/* Every clip sits in the same 9:16 box whatever it was generated at, so the
grid stops going ragged. object-fit:contain already letterboxes rather than
cropping, so a 16:9 clip is still shown whole. */
.card.video-card{aspect-ratio:9/16 !important}
.card.video-card video{object-fit:contain;background:#0a0c0a}
/* Audio cards were 132px tall with a 46px waveform — far more room than an
audio clip needs next to the stills. */
.card.audio-card{min-height:0}
.card.audio-card audio{min-height:0;padding:8px 10px}
.card.audio-card .badge{padding:5px 9px}
.card.audio-card .card-meta{padding:6px 9px 8px}
.card.audio-card .dd-audio-player .dap-wave{height:22px}
.card.audio-card .dd-audio-player .dap-head{margin-bottom:4px}
.card.audio-card .dd-audio-player .dap-row{margin-top:4px;gap:8px}
.card.audio-card .dd-audio-player .dap-play{width:30px;height:30px}
.card.audio-card .dd-audio-player .dap-stop{width:26px;height:26px}
/* The standalone players (Audio page, lightbox) come down too, just less. */
.dd-audio-player .dap-wave{height:32px}
/* Collapsible shot settings (desktop only — see #video-shot-settings in JS) */
#page-video .video-shot-settings{
border:1px solid var(--border-2);border-radius:8px;
padding:6px 9px;background:rgba(255,255,255,.02);
}
#page-video .video-shot-settings>summary{
cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--acid-dim);list-style:none;
}
#page-video .video-shot-settings>summary::-webkit-details-marker{display:none}
#page-video .video-shot-settings>summary::after{content:" ▸";color:var(--muted)}
#page-video .video-shot-settings[open]>summary::after{content:" ▾"}
#page-video .video-shot-settings[open]{padding-bottom:9px}
#page-video .motion-camera-details>summary{
cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
text-transform:uppercase;color:var(--acid-dim);list-style:none;padding:4px 0;
}
#page-video .motion-camera-details>summary::-webkit-details-marker{display:none}
#page-video .motion-camera-details>summary::after{content:" ▸";color:var(--muted)}
#page-video .motion-camera-details[open]>summary::after{content:" ▾"}
/* These five had been orphaned outside the media query by an earlier edit,
which leaked them onto phones. Back inside the PC-only block. */
html body.create-ui-unified #page-audio .audio-studio-card .hint{font-size:10.5px;line-height:1.35}
html body.create-ui-unified #page-audio .audio-studio-card label{margin:0}
html body.create-ui-unified #page-audio .audio-studio-card .audio-status:empty{display:none}
html body.create-ui-unified #page-audio .audio-studio-card summary{padding:4px 8px;font-size:10.5px}
html body.create-ui-unified #page-audio .audio-studio-card .endframe-row button{padding:6px;font-size:9px}
}
/* The Shot settings group ships `open` so phones keep the flat layout they had
before it existed — hide only its summary row there. */
@media (max-width:932px){
#page-video .video-shot-settings>summary,
#page-video .motion-camera-details>summary{display:none}
#page-video .video-shot-settings{border:0;padding:0;background:none}
/* The start-frame recent-images strip is a PC ask (2026-07-25) — keep phones
exactly as they were. Delete this line to turn it on for mobile too. */
#page-video #vsource-pick{display:none}
}
/* ---- Cult in the main nav, red (Jared 2026-07-26) ---------------------------
One deletable block. Cult is a destination, not a sixth utility, so it reads
in the acid red the account row already used for it. */
.dd-nav a.dd-nav-cult{color:var(--acid);font-weight:600}
.dd-nav a.dd-nav-cult:hover,
.dd-nav a.dd-nav-cult:focus-visible{color:#f0546b}
/* ---- end Cult nav block ---------------------------------------------------- */
/* ==== CREATE ELEMENTS PANEL ===============================================
Twin of the CREATE ELEMENTS PANEL block at the end of dd-app.js.
Desktop only. ONE deletable block. */
@media (min-width:933px){
#page-generate #create-elements-panel{
margin:10px 0 4px; padding:9px 10px 10px;
border:1px solid var(--border); border-radius:var(--radius,4px);
background:rgba(0,0,0,.22);
}
#page-generate #create-elements-panel .ce-title{
margin:0; font-size:11px; font-weight:700; letter-spacing:.18em;
text-transform:uppercase; color:var(--acid);
}
#page-generate #create-elements-panel .ce-sub{
margin:2px 0 8px; font-size:10.5px; line-height:1.35; color:var(--muted);
}
#page-generate #create-elements-body{min-height:0}
/* the tray labels itself via the panel heading now */
#page-generate #create-elements-body .create-vupload-label{display:none}
#page-generate #create-elements-body .hint{display:none}
#page-generate #create-elements-body .ref-frames{
grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important;
}
#page-generate #create-elements-body.ce-off{display:none}
/* The rail is 400px now, and the base 2-across cinema grid overlaps its own
labels below ~470px. One row per category at this width. */
#page-generate #create-simple-dropdowns{
grid-template-columns:minmax(0,1fr) !important;
}
#page-generate .create-dd-row{min-width:0}
#page-generate .create-dd-select{min-width:0;width:100%}
#page-generate #create-elements-panel .ce-note{
margin:6px 0 0; font-size:10.5px; line-height:1.4; color:var(--muted);
}
}
/* ==== end CREATE ELEMENTS PANEL ========================================= */
/* ==== CREATE RAIL =========================================================
Jared 2026-07-26: "aspect, resolution, and generations front and centre and
not under an accordion", "Cinema Options easier to get to", "all on one
screen, no scrolling". Desktop only. ONE deletable block (JS twin at the end
of dd-app.js). Two-column page is unchanged - this only changes what the
left rail contains. */
@media (min-width:933px){
#page-generate #create-rail-top{display:flex;flex-direction:column;gap:7px}
/* Output promoted out of its accordion: real section, summary hidden. */
#page-generate .cr-promoted{
border:1px solid var(--border-2) !important; border-radius:var(--radius,4px);
background:rgba(0,0,0,.22); padding:8px 10px !important; margin:0 !important;
}
#page-generate .cr-promoted > summary{display:none !important}
#page-generate .cr-promoted .row{gap:8px}
/* One tap to the sheet, thumbnail on the face - the mobile pattern. */
#page-generate .cr-box{
display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer;
background:var(--field); border:1px solid var(--border); border-radius:var(--radius,4px);
padding:7px 10px; min-width:0; color:var(--text); font:inherit;
}
#page-generate .cr-box:hover{border-color:var(--border-2);background:#1b1517}
#page-generate .cr-box:focus-visible{outline:2px solid var(--acid);outline-offset:1px}
#page-generate .cr-box-hero{background:#1a1214;border-color:var(--border-2)}
#page-generate .cr-box-hero .cr-k{color:var(--acid)}
#page-generate .cr-box-thumb{padding:6px 10px}
#page-generate .cr-img{
flex:0 0 auto;width:40px;height:40px;border-radius:3px;overflow:hidden;
background:#0f0c0d;border:1px solid var(--border);
}
#page-generate .cr-img > *{width:100%;height:100%;object-fit:cover;display:block}
#page-generate .cr-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
#page-generate .cr-k{
font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.3;
}
#page-generate .cr-v{font-size:12px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
#page-generate #create-setup-boxes{display:flex;flex-direction:column;gap:6px}
/* the whole point: with the stack gone the rail fits, so it must not scroll */
html body.create-railed #page-generate #create-options-scroll{overflow:visible}
}
/* popup */
#page-generate .cr-tucked,
.cr-tucked{display:none !important}
.cr-veil{
position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
background:rgba(5,4,4,.72);backdrop-filter:blur(2px);
}
.cr-veil.on{display:flex}
.cr-sheet{
width:min(880px,92vw);max-height:84vh;background:var(--panel);
border:1px solid var(--border-2);border-radius:var(--radius,4px);
display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.8);
}
.cr-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--border)}
.cr-head .cr-title{margin:0;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.cr-head .cr-sp{flex:1}
.cr-x{
background:none;border:1px solid var(--border);color:var(--muted);
width:26px;height:26px;border-radius:var(--radius,4px);cursor:pointer;font:inherit;line-height:1;
}
.cr-x:hover{color:var(--text);border-color:var(--border-2)}
.cr-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 13px}
.cr-body .cr-hosted{border:0;background:none;padding:0;margin:0;max-height:none;display:block !important}
.cr-body .cr-hosted > summary{display:none}
/* The sheet is OUTSIDE #page-generate, so every `#page-generate #x` base rule
stops matching once a section is moved in. Restate what it needs. */
.cr-body #create-simple-dropdowns{
display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px 14px !important;
}
.cr-body .create-dd-row{min-width:0}
.cr-body .create-dd-select{min-width:0;width:100%}
.cr-body .create-model-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cr-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 13px;border-top:1px solid var(--border)}
.cr-foot .cr-hint{flex:1;font-size:11px;color:var(--muted)}
.cr-foot .cr-done{width:auto;flex:0 0 auto;padding:6px 18px;font-size:12px}
/* ==== end CREATE RAIL ==================================================== */
/* ==== Render style retired from public view - Jared 2026-07-26 ===========
The generator row was a 2-up grid (Generator | Render style): on PC via the
min-width:933px block, and again inside the Create-bench popup (.cr-body,
which sits OUTSIDE #page-generate so it needs its own rule). With the render
style column hidden, both go back to a single column so the generator select
isn't left sitting in half a row. Delete this block if the picker comes back.
====================================================================== */
@media (min-width:933px){
#page-generate .create-model-row{grid-template-columns:1fr}
}
.cr-body .create-model-row{grid-template-columns:1fr}
/* ==== Cinema tile + inline dropdowns - Jared 2026-07-26 =================
"Instead of displaying the cinema options as a small thumbnail, do a
bigger thumbnail and have the drop down menus come from the thumbnail."
The Cinema box becomes a large preview tile (the Shot option's visual)
with its label and current picks overlaid, and clicking it expands the
REAL #create-simple-options in a slot underneath instead of opening the
sheet. Cinema only - Gore/Look/Negative/Scene keep box + sheet.
Why the inline panel scrolls itself: the railed rail is deliberately
overflow:visible (it must not scroll), and at 400px the cinema grid is
forced to ONE column (2-across overlaps its own labels below ~470px), so
nine rows would otherwise be clipped by .create-controls-col.
JS twin lives in the CREATE RAIL block at the end of dd-app.js.
===================================================================== */
@media (min-width:933px){
#page-generate .cr-box-tile{
position:relative; flex-direction:column; justify-content:flex-end;
align-items:stretch; gap:0; padding:0; overflow:hidden; min-height:124px;
}
#page-generate .cr-box-tile .cr-img{
position:absolute; inset:0; width:100%; height:100%;
border:0; border-radius:0; background:#0f0c0d;
}
#page-generate .cr-box-tile .cr-txt{
position:relative; z-index:1; flex-direction:row; align-items:baseline;
gap:7px; padding:18px 10px 7px;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.86) 62%);
}
/* .cr-txt carries flex:1 in the base box rule - left alone it fills the
whole tile and the caption floats in the middle of the picture. */
#page-generate .cr-box-tile .cr-txt{flex:0 0 auto}
#page-generate .cr-box-tile .cr-k{flex:0 0 auto}
#page-generate .cr-box-tile .cr-v{flex:1 1 auto;min-width:0}
#page-generate .cr-box.cr-open{border-color:var(--acid)}
/* Open = the tile hands its height to the dropdowns and becomes a slim
header again (the panel's own first row shows the same shot thumb). */
#page-generate .cr-box-tile.cr-open{
min-height:0; flex-direction:row; align-items:center; gap:9px; padding:6px 10px;
}
#page-generate .cr-box-tile.cr-open .cr-img{
position:relative; inset:auto; width:40px; height:40px;
border:1px solid var(--border); border-radius:3px; flex:0 0 auto;
}
#page-generate .cr-box-tile.cr-open .cr-txt{
flex:1 1 auto; flex-direction:column; align-items:flex-start;
gap:1px; padding:0; background:none;
}
#page-generate .cr-inlined{
border:1px solid var(--border-2) !important; border-radius:var(--radius,4px);
background:rgba(0,0,0,.22); padding:8px 10px !important; margin:0 !important;
max-height:min(38vh,300px); overflow-y:auto; scrollbar-width:thin;
scrollbar-color:rgba(209,48,73,.45) transparent;
}
#page-generate .cr-inlined > summary{display:none !important}
}
/* ==== Rail locked to the column - Jared 2026-07-26 ======================
"Make sure it all fits on the screen... gore kinda sticks down a little
too far. And negative. Make sure it is all perfectly locked."
MEASURED before this block (1440x900): the rail ran 61px past the bottom
of .create-controls-col with everything closed, and 354px past it with
Cinema open - .create-controls-col is overflow:hidden, so those boxes were
half-cut, not merely low. Three things fix it:
1. the railed scroller was overflow:visible (from the original 'the rail
fits so it must not scroll' rule) - content past the bottom simply
spilled. It is now a flex column that scrolls itself, so nothing can
ever hang past the panel on any viewport height;
2. the four text boxes go two-across, and the tile loses 20px, which is
what actually buys the closed rail its ~100px back so no scrolling is
needed in the normal case;
3. the generator hint is capped at one line inside the deck.
Revert = delete this block (the rail spills again, it does not break).
===================================================================== */
@media (min-width:933px){
html body.create-railed #page-generate #create-options-scroll{
display:flex; flex-direction:column; min-height:0;
overflow-y:auto; overflow-x:hidden;
scrollbar-width:thin; scrollbar-color:rgba(209,48,73,.45) transparent;
}
/* Every rail child keeps its natural height. Without this the new flex
column SHRINKS them to fit: opening Cinema squashed the whole
Aspect/Resolution/Batch row down to 18px, and it also poisoned
fitInline() - it measured a rail that was already being crushed. */
html body.create-railed #page-generate #create-options-scroll > *,
#page-generate #create-rail-top,
#page-generate #create-rail-top > *{flex:0 0 auto}
/* Two-across; Cinema (tile or not) and its inline panel span the row. */
#page-generate #create-setup-boxes{
display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start;
}
#page-generate #create-setup-boxes > [data-box="create-simple-options"],
#page-generate #cr-inline-slot{grid-column:1 / -1}
#page-generate .cr-box-tile{min-height:104px}
#page-generate #create-model-live #modelinfo{max-height:1.45em;overflow:hidden}
}
/* ==== Cinema visual option browser - Jared 2026-07-26 ===================
"I want a better way to see the thumbnails." Category chips + a grid of
~110px tiles replace the nine 24px-thumb dropdown rows while the Cinema
panel is open. The rows are HIDDEN, not removed - the selects are still
the source of truth. JS twin: buildVisual() in the CREATE RAIL block.
===================================================================== */
@media (min-width:933px){
#page-generate .cr-inlined.cr-visual-on #create-simple-dropdowns,
#page-generate .cr-inlined.cr-visual-on .create-simple-preview,
#page-generate .cr-inlined.cr-visual-on .create-section-hint{display:none !important}
#page-generate #cr-visual{
display:flex; flex-direction:column; gap:6px; min-height:0; height:100%;
}
#page-generate .cr-chips{
display:flex; gap:4px; flex:0 0 auto; overflow-x:auto; overflow-y:hidden;
padding-bottom:2px; scrollbar-width:none;
}
#page-generate .cr-chips::-webkit-scrollbar{display:none}
#page-generate .cr-chip{
flex:0 0 auto; display:flex; align-items:center; gap:5px; cursor:pointer;
background:var(--field); border:1px solid var(--border); border-radius:999px;
padding:3px 9px; font:inherit; font-size:9px; letter-spacing:.1em;
text-transform:uppercase; color:var(--muted); line-height:1.6;
}
#page-generate .cr-chip i{
font-style:normal; text-transform:none; letter-spacing:0; font-size:10.5px;
color:var(--text); max-width:84px; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap;
}
#page-generate .cr-chip.on{border-color:var(--acid); color:var(--acid)}
#page-generate .cr-tiles{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
flex:1 1 auto; min-height:0; overflow-y:auto; align-content:start;
scrollbar-width:thin; scrollbar-color:rgba(209,48,73,.45) transparent;
}
#page-generate .cr-tile{
display:flex; flex-direction:column; padding:0; cursor:pointer; min-width:0;
background:var(--field); border:1px solid var(--border); border-radius:4px;
overflow:hidden; color:var(--text); font:inherit; text-align:left;
}
#page-generate .cr-tile:hover{border-color:var(--border-2)}
#page-generate .cr-tile.on{border-color:var(--acid)}
#page-generate .cr-tile-img{
display:block; aspect-ratio:1/1; background:#0f0c0d; overflow:hidden;
}
#page-generate .cr-tile-img > *{
width:100%; height:100%; object-fit:cover; display:block;
}
/* the 'None' option renders as a text placeholder, not a picture */
#page-generate .cr-tile-img .picker-none{
display:flex !important; align-items:center; justify-content:center;
width:100%; height:100%; font-size:10px; color:var(--muted);
}
/* the placeholder already says None; the tile label says it again */
#page-generate .cr-tile-img .picker-none span{display:none}
#page-generate .cr-tile-lab{
font-size:9.5px; line-height:1.25; padding:3px 4px 4px; color:var(--muted);
overflow:hidden; overflow-wrap:anywhere;
}
}
/* ==== Cult back in the MOBILE header - Jared 2026-07-27 =================
"Bring back CULT link to mobile menu." The account-row link is created
again in ddSyncSessionUi; this is the half that keeps PC honest - PC
already has Cult last-and-red in `.dd-nav`, so the account-row copy is
hidden there and shown only under body.dd-mobile, the exact condition
under which dd-mobile.css hides `.dd-nav`. Red to match the nav entry.
===================================================================== */
#dd-nav-cult-link{display:none}
body.dd-mobile #dd-nav-cult-link{display:inline;color:var(--acid);font-weight:600}
body.dd-mobile #dd-nav-cult-link:hover{color:#f0546b}
/* ==== Account-row order - Jared 2026-07-27 =============================
"Switch LOG OUT with SETTINGS, put CULT after LOG OUT" (mobile), then
"for the PC version also make it SUBSCRIBE, ACCOUNT, SETTINGS, LOGOUT".
Both surfaces want the SAME sequence, so the flex `order` overrides that
used to live here are DELETED: ddSyncSessionUi builds the row in that
order and the DOM is the single source of truth. Cult is still last and
still shows only under body.dd-mobile (PC has it in `.dd-nav`).
The #dd-nav-account-btn / -settings-btn / -logout-btn ids stay as handles.
===================================================================== */
/* ==== Cinema opens in the SHEET - Jared 2026-07-28 ======================
"Make the cinema settings on the PC version pop up just like the other
settings. It's very difficult to see them."
Cinema was the one box that did NOT open .cr-veil - it expanded an inline
slot under its tile, and fitInline() handed that panel whatever the rail
had left over (floor 180px). Inside a 400px rail at 3 columns that is about
three half-rows of 110px thumbnails, which is exactly the complaint.
It now goes through openBox() like Gore/Look/Negative/Scene, and the tile
browser is built INSIDE the sheet.
The sheet is appended to , i.e. OUTSIDE #page-generate, so every
`#page-generate #cr-visual` rule in the block above stops matching once the
section is hosted here - they are restated against .cr-body.
Then: "make it so there doesn't have to be a scroll bar. make it fit in
there." The grid no longer carries a size at all - fitTiles() in dd-app.js
solves for the tile width and column count that make N options cover the
sheet exactly, and feeds them in as --cr-cols / --cr-tw / --cr-lab / --cr-fs.
Nothing here may reintroduce a scroller: .cr-body is overflow:hidden in wide
mode and the grid uses a FIXED column width (repeat(cols, TW)) - switch that
to 1fr and the floor'd column count widens the real column past TW, the rows
grow, and the overflow comes straight back.
JS twin: openBox()/closeBox()/fitTiles() in the CREATE RAIL block.
Revert = delete this block and restore the toggleInline() branch.
===================================================================== */
.cr-veil.cr-wide .cr-sheet{width:min(1280px,95vw);height:92vh}
.cr-veil.cr-wide .cr-body{overflow:hidden}
/* the nine 24px-thumb rows are the thing the grid replaces - hide them while
the browser is up, exactly as the inline version did */
.cr-body .cr-hosted.cr-visual-on #create-simple-dropdowns,
.cr-body .cr-hosted.cr-visual-on .create-simple-preview,
.cr-body .cr-hosted.cr-visual-on .create-section-hint{display:none !important}
.cr-body #cr-visual{display:block}
.cr-body .cr-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.cr-body .cr-chip{
display:flex;align-items:center;gap:6px;cursor:pointer;
background:var(--field);border:1px solid var(--border);border-radius:999px;
padding:4px 11px;font:inherit;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);line-height:1.6;
}
.cr-body .cr-chip i{
font-style:normal;text-transform:none;letter-spacing:0;font-size:11.5px;
color:var(--text);max-width:130px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;
}
.cr-body .cr-chip.on{border-color:var(--acid);color:var(--acid)}
/* fixed column width, centred - see the header note on why not 1fr */
.cr-body .cr-tiles{
display:grid;grid-template-columns:repeat(var(--cr-cols,7),var(--cr-tw,136px));
gap:8px;align-content:start;justify-content:center;overflow:hidden;
}
.cr-body .cr-tile{
display:flex;flex-direction:column;padding:0;cursor:pointer;min-width:0;
background:var(--field);border:1px solid var(--border);border-radius:4px;
overflow:hidden;color:var(--text);font:inherit;text-align:left;
}
.cr-body .cr-tile:hover{border-color:var(--border-2)}
.cr-body .cr-tile.on{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid) inset}
.cr-body .cr-tile-img{display:block;aspect-ratio:1/1;background:#0f0c0d;overflow:hidden}
.cr-body .cr-tile-img > *{width:100%;height:100%;object-fit:cover;display:block}
/* the "None" option renders a text placeholder, not a picture */
.cr-body .cr-tile-img .picker-none{
display:flex !important;align-items:center;justify-content:center;
width:100%;height:100%;font-size:10px;color:var(--muted);
}
.cr-body .cr-tile-img .picker-none span{display:none}
/* the label box is part of the height fitTiles() solved for, so it is a HARD
height, clamped to the line count that height allows */
.cr-body .cr-tile-lab{
height:var(--cr-lab,26px);font-size:var(--cr-fs,10px);line-height:1.2;
padding:3px 5px;color:var(--muted);overflow:hidden;overflow-wrap:anywhere;
display:-webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp:var(--cr-lines,2);
}
/* ── Moodboard picker (Create § 09) ────────────────────────────────────────
Additive only. Boards read as thumbnails so you can see what a board is
made of before applying it. */
.mb-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:10px;
margin:8px 0 4px;
}
.mb-card{
display:flex; flex-direction:column; gap:6px;
padding:8px; text-align:left; cursor:pointer;
background:var(--field); color:var(--text);
border:1px solid var(--border); border-radius:var(--radius);
transition:border-color .12s ease, background .12s ease;
}
.mb-card:hover{ border-color:var(--accent); }
.mb-card.is-active{ border-color:var(--accent); background:var(--panel); }
.mb-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.mb-strip img{
width:100%; aspect-ratio:1/1; object-fit:cover;
border-radius:3px; display:block; background:var(--bg);
}
.mb-name{
font-size:.86rem; font-weight:600; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mb-meta{ font-size:.72rem; color:var(--muted); }
.mb-meta.mb-warn{ color:var(--accent); }
.mb-toggle{
display:flex; align-items:flex-start; gap:8px;
margin-top:8px; font-size:.82rem; cursor:pointer;
}
.mb-toggle input{ margin-top:3px; flex:0 0 auto; }
/* ==== ELEMENTS BIN - Jared 2026-07-28 ==================================
"reference images need to be easily able to add together." A named,
persistent library above the reference tray: fill it once, click an
element to drop it into the current shot. Chips are square thumbnails so
a full bin reads as a contact sheet, not a list.
Sits INSIDE #create-elements-panel, which lives in the 400px rail - so
everything here is sized for that width, not for a page column.
JS twin: the ELEMENTS BIN block at the end of dd-app.js.
Revert = delete this block + that one.
===================================================================== */
@media (min-width:933px){
#ce-bin{margin:0 0 8px}
#ce-bin .ce-els{
display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
gap:5px;align-content:start;
}
#ce-bin .ce-el{
position:relative;display:block;padding:0;cursor:pointer;min-width:0;
aspect-ratio:1/1;background:var(--field);border:1px solid var(--border);
border-radius:4px;overflow:hidden;color:var(--text);font:inherit;
}
#ce-bin .ce-el img{width:100%;height:100%;object-fit:cover;display:block}
#ce-bin .ce-el:hover{border-color:var(--border-2)}
/* in this shot */
#ce-bin .ce-el.on{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid) inset}
/* the tray is full, so this one cannot be added - say so quietly */
#ce-bin .ce-el.full{opacity:.45}
#ce-bin .ce-el-n{
position:absolute;left:0;right:0;bottom:0;padding:6px 3px 2px;
font-size:8.5px;line-height:1.25;color:#fff;text-align:left;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88) 55%);
}
#ce-bin .ce-el.on .ce-el-n{color:var(--acid)}
#ce-bin .ce-el-x{
position:absolute;top:2px;right:2px;width:15px;height:15px;line-height:14px;
text-align:center;font-size:13px;border-radius:3px;color:#fff;
background:rgba(0,0,0,.62);opacity:0;transition:opacity .12s;
}
#ce-bin .ce-el:hover .ce-el-x{opacity:1}
#ce-bin .ce-el-x:hover{background:var(--acid)}
#ce-bin .ce-add{
display:flex;align-items:center;justify-content:center;
font-size:19px;color:var(--muted);border-style:dashed;
}
#ce-bin .ce-add:hover{color:var(--acid);border-color:var(--acid)}
/* naming row - appears under the grid while an image waits for a name */
#ce-bin .ce-name{
display:flex;align-items:center;gap:6px;margin-top:6px;padding:5px;
background:var(--field);border:1px solid var(--border-2);border-radius:4px;
}
#ce-bin .ce-name img{
width:30px;height:30px;object-fit:cover;border-radius:3px;flex:0 0 auto;
}
#ce-bin .ce-name input{
flex:1 1 auto;min-width:0;background:var(--panel);color:var(--text);
border:1px solid var(--border);border-radius:3px;padding:4px 7px;
font:inherit;font-size:11px;
}
#ce-bin .ce-name .ce-save{
width:auto;flex:0 0 auto;padding:4px 11px;font-size:10px;
}
#ce-bin .ce-cancel{
flex:0 0 auto;background:none;border:0;color:var(--muted);cursor:pointer;
font:inherit;font-size:10px;padding:2px 4px;
}
#ce-bin .ce-cancel:hover{color:var(--text)}
#ce-bin .ce-binnote{
margin:6px 0 0;font-size:10px;line-height:1.35;color:var(--muted);
}
/* only shown when the picked generator ignores references */
#ce-bin .ce-fix{
display:block;width:100%;margin:6px 0 0;padding:5px 9px;cursor:pointer;
background:none;border:1px solid var(--acid);border-radius:3px;
color:var(--acid);font:inherit;font-size:10px;letter-spacing:.09em;
text-transform:uppercase;
}
#ce-bin .ce-fix:hover{background:var(--acid);color:#fff}
/* ---- rail fit tiers - Jared 2026-07-28 ------------------------------
"get all the options on the screen so you don't have to use a scroll
bar." fitRail() adds these one at a time, cheapest first, ONLY while
#create-options-scroll still overflows - and clears them all first on
every pass, so the rail relaxes again the moment content shrinks.
Nothing here is a permanent look change: on a tall window no tier is on.
Order matters - prose first, then picture sizes, then chrome padding. */
/* T1: the panel's own prose. The bin note already says what the subtitle
said, so it is the first thing that should go. */
body.cr-tight1 #create-elements-panel .ce-sub{display:none}
body.cr-tight1 #ce-bin{margin-bottom:5px}
body.cr-tight1 #ce-bin .ce-binnote,
body.cr-tight1 #create-elements-note{margin-top:4px;line-height:1.28}
/* T2: the two grids of pictures - the bin chips and the reference tray
below it. Both shrink; neither disappears. */
body.cr-tight2 #ce-bin .ce-els{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
body.cr-tight2 #create-elements-panel .ref-frames{
grid-template-columns:repeat(auto-fill,minmax(56px,1fr)) !important;
}
body.cr-tight2 #ce-bin .ce-el-n{font-size:7.5px;padding-top:5px}
/* T3: chrome padding. Last because it is the least visible saving and the
most likely to look cramped. GENERATE is deliberately NOT touched. */
body.cr-tight3 #page-generate .generate-dock{gap:7px}
body.cr-tight3 #create-refiner{padding-top:5px;padding-bottom:5px}
body.cr-tight3 #create-elements-panel{padding-top:7px;padding-bottom:7px}
/* T4/T5 reach INSIDE the scroller. T1-T3 only shrink the dock, which raises
the scroller's height but never lowers what it has to hold - so on a short
window the last of the overflow can only come from here. */
/* T4: the generator hint is advisory prose ("Auto picks the best generator
for your prompt...") sitting under a select that already says the answer. */
body.cr-tight4 #page-generate #create-model-live #modelinfo{display:none}
body.cr-tight4 #page-generate #create-setup-boxes{gap:5px}
body.cr-tight4 #page-generate .cr-box{padding-top:5px;padding-bottom:5px}
/* T5: the reference tray, ONLY while it is a literal repeat of the bin above
it (.ce-dupe, set from JS - it is a data question, not a CSS one). ~76px,
the single biggest saving here, and nothing is lost: the bin shows the same
images with their @names and an acid border for what is in the shot, and
its "+" uploads too. Drag an image straight into the tray and .ce-dupe
drops, so the tray comes back. */
body.cr-tight5 #create-elements-panel.ce-dupe #create-elements-body{display:none}
body.cr-tight5 #create-elements-panel.ce-dupe #create-elements-note{display:none}
/* T6: the promoted Aspect / Resolution / Batch row. Last resort - this is the
row Jared asked to be front and centre, so it shrinks, never hides. */
body.cr-tight6 #page-generate #create-output-live .cr-promoted{padding:4px 0 0}
body.cr-tight6 #page-generate #create-output-live label{font-size:9px}
body.cr-tight6 #page-generate #create-output-live select,
body.cr-tight6 #page-generate #create-output-live input{padding-top:4px;padding-bottom:4px}
/* T7: only reachable when the tray CANNOT be hidden because it holds an image
that is not in the bin - so T5 saved nothing and the last ~21px has to come
from the two grids themselves plus the bin's helper line. */
body.cr-tight7 #ce-bin .ce-binnote{display:none}
body.cr-tight7 #create-elements-panel .ref-frames{
grid-template-columns:repeat(auto-fill,minmax(44px,1fr)) !important;
}
body.cr-tight7 #ce-bin .ce-els{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
/* T8/T9 are only reachable on a genuinely short window - at 1366x768 the
control column is 659px, against 791px at 1440x900, and everything above
has already been spent. */
/* T8: the "CREATE - type a prompt and hit Generate" hint bar. Pure
instruction prose, and the prompt box below it says the same thing in its
own placeholder. 24px. */
body.cr-tight8 #page-generate #create-mode-bar{display:none}
/* T9: GENERATE loses a little padding - NOT its width, colour or type size.
Deliberately dead last: the slab is load-bearing for the page's look, so
it is only ever touched when the alternative is the scrollbar Jared asked
to get rid of, on a window too short for anything else to be left. */
body.cr-tight9 #page-generate #go{padding-top:12px;padding-bottom:12px}
}
/* ==== Moodboard framing toggle - bugfix, Jared 2026-07-28 ================
PRE-EXISTING, found while giving #moodboard-section a value box. The app's
global `textarea, input, select{width:100%}` outranks `.mb-toggle input`,
which only sets `flex:0 0 auto` and never a width - so the framing checkbox
stretches to the whole flex row (MEASURED 837px inside the 880px popup) and
pushes its own label outside the box, where it renders as a one-letter-wide
vertical column. Equally wrong in the rail, just narrower and less obvious.
Unscoped on purpose: it should be right everywhere, mobile included.
===================================================================== */
.mb-toggle input[type="checkbox"]{width:auto;flex:0 0 auto}
.mb-toggle > span{flex:1 1 auto;min-width:0}