/* ---------- Image Forge: a sandbox for painting with AI ---------- The Lounge is where you play; this is where you paint your crew into any era, any style. public/rooms/director.js draws it: one easel, no tabs. 50 style attributes to zero, from the room's Director days — still true, the sizes below still read off what actually rendered. SIZES READ OFF THE GLASS. What this room typed and what it rendered: written 34 -> 34 --t-room written 12.5 -> 13 --t-tiny written 22 -> 22 --t-head written 11.5 -> 13 --t-tiny written 14.5 -> 15 --t-body mono 7-9 -> 11 --t-label written 14 -> 15 --t-body written 13.5 -> 14 --t-small written 13 -> 14 --t-small Written 12.5 and 11.5 both land on 13 and written 13.5 and 13 both land on 14, so one class wears each pair. Corners: written 18 is --r-xl, written 15 and 14 are --r-lg, written 12 and 11 are --r-md, 100px is --r-pill. The room title's letterspacing snaps to --ls-head (-.028em written). Spacing is not swept. The two shadows stay literal: 0 18px 44px and 0 14px 32px are not any step of the depth scale. THE ROOMS-ACROSS-THE-TOP CLASSES ARE GONE with the tabs (Mark, 2026-09-03: Writers Room and Tree were named and never built; the rename to a sandbox dropped them rather than carrying them forward as SOON furniture). So is the tool rail under the assistant's old bench (dir-tool, dir-soon) and the bench itself (dir-bench, dir-log, dir-say, dir-box) — dead since the assistant moved to the right panel and never drawn by this room again. */ [data-render-phase="update"] .dir, [data-render-phase="update"] .dir-room{animation:none!important;} .dir{display:flex; flex-direction:column; gap:22px; padding:8px 18px 96px; animation:fadeUp .35s ease both;} .dir-head{display:flex; flex-direction:column; gap:9px;} .dir-title{font-size:var(--t-room); line-height:1.04; letter-spacing:var(--ls-head); font-weight:var(--w-semi);} .dir-sub{max-width:34ch; font-size:var(--t-body); line-height:1.5; color:var(--muted);} /* ---------- the easel ---------- */ .dir-room{display:flex; flex-direction:column; gap:24px; animation:fadeUp .3s ease both;} .dir-opening{padding:44px 18px; text-align:center; color:var(--muted); font-size:var(--t-small);} .dir-easel{display:flex; flex-direction:column; gap:10px;} .dir-plate{display:block; position:relative; width:100%; padding:0; overflow:hidden; border:var(--bd) solid var(--edge); border-radius:var(--r-xl); background:var(--panel); box-shadow:0 18px 44px var(--shad); cursor:zoom-in;} .dir-plate-img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;} .dir-plate-bar{display:flex; flex-wrap:wrap; align-items:center; gap:12px;} .dir-plate-note{font-size:var(--t-tiny); line-height:1.5; color:var(--muted);} .dir-easel-blank{display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; padding:20px; text-align:center; border:var(--bd) dashed var(--edge); border-radius:var(--r-xl); color:var(--muted); font-size:var(--t-small);} .dir-err{padding:11px 13px; border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset); font-size:var(--t-small); color:var(--ink2);} .dir-controls{display:flex; flex-direction:column; gap:18px;} .dir-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px;} .dir-block{display:flex; flex-direction:column; gap:9px;} .dir-select{padding:11px 13px; border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--inset); color:var(--ink); font-size:var(--t-small);} .dir-details{display:flex; align-items:center; gap:7px; padding:11px 13px; border:var(--bd) solid var(--edge); border-radius:var(--r-md);} .dir-cast-rail{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;} /* 74px and 56px are the size of a card and a face */ .dir-cast-btn{display:flex; flex-direction:column; align-items:center; gap:7px; width:74px; flex:none; opacity:.62;} .dir-cast-btn-on{opacity:1;} .dir-cast-face{width:56px; height:56px; overflow:hidden; border-radius:var(--r-round); border:2px solid transparent;} .dir-cast-face-on{border-color:var(--accent); box-shadow:0 0 16px var(--glow);} .dir-cast-img{width:100%; height:100%; object-fit:cover; object-position:50% 22%;} .dir-cast-name{font-size:var(--t-tiny); color:var(--muted);} .dir-cast-name-on{color:var(--accent);} /* THE NEW CHARACTER CHIP, same anatomy as a crew card so it reads as one more seat at the rail rather than a control bolted on the end. */ .dir-cast-new{opacity:1;} .dir-cast-face-plus{display:flex; align-items:center; justify-content:center; border-style:dashed; border-color:var(--edge); color:var(--muted); font-size:var(--t-head); line-height:1;} /* the style pack chips, one row, same grammar as the mood chips below */ .dir-styles{display:flex; flex-wrap:wrap; gap:7px;} .dir-style{padding:6px 13px; border-radius:var(--r-pill); border:var(--bd) dashed var(--edge); color:var(--muted); font-size:var(--t-tiny); text-transform:capitalize;} .dir-style-on{border-style:solid; border-color:var(--accent); color:var(--accent);} .dir-scene{width:100%; resize:vertical; padding:14px 15px; border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--inset); color:var(--ink); font-size:var(--t-body); line-height:1.55;} .dir-paint-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px;} .dir-moods{display:flex; flex-wrap:wrap; gap:7px;} .dir-mood{padding:6px 13px; border-radius:var(--r-pill); border:var(--bd) dashed var(--edge); color:var(--muted); font-size:var(--t-tiny);} .dir-mood-on{border-style:solid; border-color:var(--accent); color:var(--accent);} /* not ready is not "disabled grey": it is the edge colour, which is the room's own way of saying the button is waiting for you */ .dir-paint{margin-left:auto; padding:13px 26px; border-radius:var(--r-md); background:var(--edge); color:var(--muted);} .dir-paint-on{background:var(--accent); color:var(--onAccent);} /* THE PRICE ON THE BUTTON BEFORE IT IS PRESSED (Comic Forge's own law, kept here). It rides in the button's own text, muted a touch against the paint colour so the word PAINT still reads first. */ .dir-paint-price{opacity:.72; font-weight:400;} .dir-shelf{display:flex; flex-direction:column; gap:11px;} .dir-shelf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px;} /* THE FRAME HOLDS THE IMAGE, EDGE TO EDGE. dir-shelf-item is the clipped, rounded frame itself (position:relative so the delete cross can sit in its corner) — no padding, no gap, so the picture reaches every edge of the round rect rather than sitting square inside a lighter card. dir-shelf-open is the button that actually opens the plate; it carries none of the frame's own look, just fills it. */ .dir-shelf-item{position:relative; overflow:hidden; border-radius:var(--r-md); border:var(--bd) solid var(--edge); background:var(--panel); transition:transform var(--mo-fast), box-shadow var(--mo-fast);} .dir-shelf-item:hover{transform:translateY(-2px); box-shadow:0 10px 22px var(--shad);} .dir-shelf-open{display:block; width:100%; padding:0; margin:0; border:0; background:none; border-radius:inherit; cursor:zoom-in;} .dir-shelf-img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:inherit;} /* THE DELETE CROSS. Hidden until hover on a pointer that can hover; a touch device has no hover to reveal it on, so it stays visible there instead (Mark's ask: deletable, always reachable, never in the way on desktop). */ .dir-shelf-del{position:absolute; top:6px; right:6px; z-index:1; width:22px; height:22px; display:flex; align-items:center; justify-content:center; padding:0; border-radius:var(--r-round); border:var(--bd) solid var(--edge); background:var(--panel); color:var(--muted); opacity:0; transition:opacity var(--mo-fast), color var(--mo-fast), border-color var(--mo-fast);} .dir-shelf-item:hover .dir-shelf-del, .dir-shelf-del:focus-visible{opacity:1;} .dir-shelf-del:hover{color:var(--accent); border-color:var(--accent);} @media (hover: none){ .dir-shelf-del{opacity:1;} } /* ---------- the engine sheets ---------- 16 attributes. Title is written 24 / -.025em and renders at 22 / --ls-head. The -.025em to --ls-head is the declared snap. Shadow 0 30px 90px stays. */ .eng-scrim{position:fixed; inset:0; z-index:86; display:flex; align-items:center; /* under the house dialog's 95 — the law every scrim keeps (the camera broke it and every dialog word drew unseen) */ justify-content:center; padding:14px; pointer-events:none;} .eng-scrim>*{pointer-events:auto;} .eng{width:100%; max-width:660px; max-height:92vh; overflow-y:auto; display:flex; flex-direction:column; gap:18px; padding:22px; border:var(--bd) solid var(--edge); border-radius:var(--r-xl); background:var(--panel); box-shadow:0 30px 90px var(--shad);} .eng-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;} .eng-title{font-size:var(--t-head); font-weight:var(--w-semi); letter-spacing:var(--ls-head); margin-top:4px;} .eng-x{width:34px; height:34px; flex:none; border-radius:var(--r-md); border:var(--bd) solid var(--edge); color:var(--muted);} .eng-lines{display:flex; flex-direction:column; gap:13px;} .eng-line{display:flex; flex-direction:column; gap:3px;} .eng-line-body{font-size:var(--t-tiny); line-height:1.5; color:var(--ink2);} .eng-rule{height:1px; background:var(--edge);} .eng-block{display:flex; flex-direction:column; gap:8px;} .eng-block-body{font-size:var(--t-tiny); line-height:1.55; color:var(--ink2);} .eng-zoom-scrim{position:fixed; inset:0; z-index:88; display:flex; align-items:center; justify-content:center; padding:22px; pointer-events:none;} .eng-zoom-scrim>*{pointer-events:auto;} .eng-zoom-img{max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-lg); box-shadow:0 30px 90px var(--shad);} .eng-zoom-x{position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:var(--r-md); border:var(--bd) solid var(--edge); background:var(--panel); color:var(--muted); font-size:var(--t-sub); line-height:1;} /* ---------- THE REFERENCE CHIP, THE KEEPS, AND THE DROP ---------- Mark, 2026-09-03: the Keep is shared, and a picture drags onto the easel and a plate drags onto a folder. Tokens and the --t-* scale only, no mono type (Mark's standing ruling): the chip and the two keep links are the house face at the house sizes. */ .dir-plate-wrap{display:block; cursor:grab;} .dir-plate-wrap:active{cursor:grabbing;} .dir-ref{display:flex; align-items:center; gap:8px; padding:6px 8px; border:var(--bd) solid var(--edge); border-radius:var(--r-md); background:var(--panel);} .dir-ref-thumb{width:34px; height:34px; flex:none; object-fit:cover; border-radius:var(--r-sm);} .dir-ref-name{flex:1; min-width:0; font-size:var(--t-tiny); color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .dir-ref-x{width:22px; height:22px; flex:none; border-radius:var(--r-sm); border:var(--bd) solid var(--edge); color:var(--muted); background:transparent;} /* The easel says it will take what is over it, the same way a board does. */ .dir-easel-drop{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-lg);} .dir-keeps{display:flex; gap:14px; align-items:center;} .dir-keep-link{background:transparent; border:0; padding:0; cursor:pointer;} .dir-keep-link[disabled]{opacity:.4; cursor:default;} /* The Tool Box holds the Keep's own faces, so it gives them the height to be usable and lets the shared sheet (keep.css) do the rest. */ .house-toolbox-keep{display:flex; flex-direction:column; gap:8px; min-height:0; flex:1;} .house-toolbox-keep .keep-body{flex:1; min-height:0; overflow:auto;} /* ---------- THE CLIPBOARD FACE IS THE DRAWER, IN A NARROW PANEL ---------- 2026-09-03: the face stopped drawing its own folder column and became a mount on lib/drawer.js, so what needed styling changed with it. The old rule here squeezed a .keep-folders column the drawer does not draw, which would have been a rule aimed at nothing. THE RAIL GOES RATHER THAN SQUEEZES. keep.css gives the files face a fixed 190px tree beside the canvas and drops that rail below 900px, because a map you cannot read the names on is not a map. The right panel is narrower than that at every window size, so the drop is not a breakpoint here, it is the permanent answer: the crumb and the search are how you move in this panel, and both are already on the toolbar above the canvas. A MOUNT DOES NOT RESTYLE THE MACHINE IT MOUNTS, which is keep.css's own line, so nothing below reaches inside a drawer row: this sets the shape of the box the drawer stands in and stops there. */ .keep-files-narrow .keep-files-cols{grid-template-columns:minmax(0,1fr); gap:0;} .keep-files-narrow .keep-files-rail{display:none;}