/* ============================================================
   Showengine.io's screens, on the house stylesheet (temple.css; the rules are in DESIGN.md).

   Made for someone in front of a client: readable type, big enough targets, one brass accent
   for "this is the one", nothing that only shows on hover, nothing that needs dragging.
   ============================================================ */

:root{--gut:clamp(16px,3vw,32px)}
.wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

/* ---------- the top bar ---------- */
.topbar{display:flex;align-items:center;gap:6px;min-height:56px;padding:8px var(--gut);border-bottom:1px solid var(--line);background:rgba(14,14,16,.86);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.topbar .brand{font-size:1.0625rem;margin-right:14px}
.topbar .brand span{font-size:.875rem}
.topbar .spacer{flex:1}
.topbar .who{color:var(--paper-dim);font-size:.9rem;white-space:nowrap}
.saved{font-size:.8125rem;color:var(--paper-dim);min-width:4.5em;text-align:right;padding:0 6px;font-variant-numeric:tabular-nums}
.saved.bad{color:var(--danger)}

.steps{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.steps button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px 0 6px;border-radius:var(--r-pill);border:0;background:none;color:var(--paper-dim);cursor:pointer;font-size:.875rem;font-weight:500;transition:background .15s,color .15s}
.steps button:hover{background:var(--surface-2);color:var(--paper)}
.steps button b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font-weight:600;font-size:.6875rem;font-variant-numeric:tabular-nums}
.steps button[aria-current="step"]{color:var(--paper);background:var(--surface-2)}
.steps button[aria-current="step"] b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- text buttons (the rest of the buttons are temple.css's) ---------- */
.link{background:none;border:0;color:var(--paper-dim);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;cursor:pointer;padding:8px 2px;font-size:.875rem;transition:color .15s,text-decoration-color .15s}
.link:hover{color:var(--paper);text-decoration-color:currentColor}

/* ---------- pages ---------- */
.page{width:100%;max-width:1200px;margin:0 auto;padding:40px var(--gut) 120px}
.page.narrow{max-width:760px}
.page h1{font-size:clamp(1.75rem,3vw,2.25rem);margin:0 0 8px}
.page .lead{font-size:1rem;color:var(--paper-dim);margin:0 0 32px;max-width:62ch}
.section{margin:0 0 48px}
.section > h2{font-size:1.25rem;margin:0 0 4px}
.section > .help{color:var(--paper-dim);margin:0 0 16px;font-size:.875rem;max-width:68ch}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nextbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.nextbar .count{font-size:1rem;color:var(--paper-dim)}

/* ---------- fields ---------- */
.field{display:grid;gap:6px;margin-bottom:16px}
.field > span{font-size:.8125rem;font-weight:500;color:var(--paper-dim)}
.field input[type=text],.field input[type=email],.field input[type=password],.field textarea,.field select,
.big-input{width:100%;font:inherit;font-size:1rem;color:var(--paper);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:10px 12px;outline:none;min-height:var(--tap);font-family:var(--sans);transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:110px;resize:vertical;line-height:1.4}
.field input:focus,.field textarea:focus,.field select:focus,.big-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
select{font:inherit;color:var(--paper);background-color:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:0 32px 0 12px;min-height:var(--tap);font-size:.9375rem;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a3a29c' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
select:hover{border-color:rgba(255,255,255,.24)}
select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
select option{background:#1b1b1e;color:var(--paper)}
.pw{position:relative}
.pw input{padding-right:96px}
.pw .show{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-height:40px}
.error{color:var(--danger);font-size:.875rem;margin:6px 0 12px;min-height:1.4em}

/* option grids (temple.css .opt, bigger) */
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.optgrid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.opt{min-height:var(--tap)}
/* .opt .mark and .opt .sub: temple.css */

.seg-big{display:flex;flex-wrap:wrap;gap:4px}
.seg-big button{min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--paper-dim);cursor:pointer;font-size:.875rem;font-weight:500;transition:background .15s,border-color .15s,color .15s}
.seg-big button:hover{background:var(--surface-2);color:var(--paper)}
.seg-big button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3);color:var(--paper)}


/* ---------- the list of shows ---------- */
.shows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}
.showcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color .2s}
.showcard:hover{border-color:var(--line-strong)}
.showcard .open{all:unset;cursor:pointer;display:block}
.showcard .open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.montage{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:1px;aspect-ratio:16/9;background:#000}
.montage img{width:100%;height:100%;object-fit:cover;display:block}
.montage img:first-child{grid-row:1/3}
.montage .none{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;color:var(--paper-dim);font-size:.875rem;background:var(--surface-2)}
.showcard .body{padding:14px 16px 4px}
.showcard h3{font-size:1.0625rem;margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.showcard .meta{color:var(--paper-dim);font-size:.8125rem;line-height:1.5}
.showcard .foot2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding:8px 10px 8px 16px;color:var(--paper-dim);font-size:.75rem}
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:48px 24px;text-align:center;color:var(--paper-dim);font-size:1rem;margin-top:20px}

/* ---------- the evening ---------- */
.doors{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:.9375rem}
.parts{display:grid;gap:6px}
.part{display:grid;grid-template-columns:36px 96px minmax(160px,1fr) auto auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.part.dark{opacity:.72}
.part .t{font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums}
.part .t small{display:block;font-size:.75rem;font-weight:400;color:var(--paper-dim)}
.part input.name{font:inherit;font-size:.9375rem;color:var(--paper);background:transparent;border:1px solid transparent;border-radius:var(--r-pill);padding:0 10px;min-height:var(--tap);width:100%;transition:border-color .15s,background .15s}
.part input.name:hover{border-color:var(--line-strong);background:var(--surface-2)}
.part input.name:focus{border-color:var(--accent);outline:none;background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-tint)}
.part .moves{display:flex;gap:2px}
.iconbtn{min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-pill);border:1px solid transparent;background:none;color:var(--paper-dim);cursor:pointer;font-size:1rem;display:inline-grid;place-items:center;padding:0 8px;transition:background .15s,color .15s}
.iconbtn:hover{background:var(--surface-2);color:var(--paper)}
.iconbtn:disabled{opacity:.25;cursor:default;background:none}
.iconbtn.x:hover{color:var(--danger)}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.875rem;color:var(--paper-dim);min-height:32px;padding:0 4px;user-select:none}
.toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.addpart{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.addpart select{min-width:min(100%,280px)}
.total{margin-top:16px;font-size:.9375rem;color:var(--paper-dim);font-variant-numeric:tabular-nums}
/* A part stacks when the evening's own column is narrow (beside the room, or on a small screen). */
.parts{container-type:inline-size}
@container (max-width:820px){
  .part{grid-template-columns:36px 1fr auto;grid-template-areas:"grip t moves" "grip name name" "grip len dark"}
  .part .grip{grid-area:grip}
  .part .t{grid-area:t}.part .name{grid-area:name}.part .len{grid-area:len}.part .toggles{grid-area:dark}.part .moves{grid-area:moves}
}
@supports not (container-type:inline-size){
  @media (max-width:1300px){
    .part{grid-template-columns:36px 1fr auto;grid-template-areas:"grip t moves" "grip name name" "grip len dark"}
    .part .grip{grid-area:grip}
    .part .t{grid-area:t}.part .name{grid-area:name}.part .len{grid-area:len}.part .toggles{grid-area:dark}.part .moves{grid-area:moves}
  }
}
/* "Walls dark" and "Logo" share one cell of the row. */
.part .toggles{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.part .toggles .toggle{padding:0 3px;gap:8px;min-height:28px}
.toggle:has(input:disabled){opacity:.45;cursor:default}
.toggle input:disabled{cursor:default}

/* ---------- the room and the pictures ---------- */


/* One column that can never grow past the page: the strip's long row of parts scrolls inside it. */

.stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#000}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage .now{position:absolute;z-index:2;left:14px;bottom:14px;right:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;pointer-events:none}
.stage .now span{pointer-events:auto;background:rgba(14,14,16,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-pill);padding:5px 10px;font-size:.8125rem}
.stage .now .part-name{font-weight:600}
.stage .loading{position:absolute;z-index:3;inset:0;display:grid;place-items:center;color:var(--paper-dim);font-size:.9375rem;background:#000}
body.fill .stage{position:fixed;inset:0;max-height:none;aspect-ratio:auto;border-radius:0;border:0;z-index:50}
body.fill .fillbar{position:fixed;right:18px;top:18px;z-index:60;display:flex;gap:10px}
.fillbar{display:none}

.cams{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.cams .label{color:var(--paper-dim);font-size:.8125rem;font-weight:500;margin-right:6px;min-width:3.4em}
.cams button{min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--paper-dim);cursor:pointer;font-size:.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.cams button:hover{background:var(--surface-2);color:var(--paper)}
.cams button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3);color:var(--paper)}
.cams button .ico{font-size:.9rem}

.transport{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.transport .grow{flex:1}
.transport .hold{display:flex;align-items:center;gap:6px;color:var(--paper-dim);font-size:.8125rem;flex-wrap:wrap}

/* the evening as a strip: parts in order, their pictures in order */
.strip-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:14px 0 8px}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px 10px;gap:8px 12px;flex-wrap:wrap}
.strip-head h2{font-size:1.0625rem;font-weight:600}
.strip-head .hint{color:var(--paper-dim);font-size:.8125rem}
.strip{position:relative;display:flex;gap:10px;overflow-x:auto;padding:4px 16px 12px;scroll-behavior:smooth;scrollbar-width:thin}
/* The strip scrolls by the bar over it (app.js syncStripBar): its own bar at the foot is hidden; a finger or a wheel still scrolls it */
.strip{scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip-bar{overflow-x:auto;overflow-y:hidden;height:14px;margin:0 16px 6px;scrollbar-width:thin;scrollbar-color:rgba(236,236,232,.35) transparent}
.strip-bar > div{height:1px}
.strip-bar[hidden]{display:none}
.col{flex:none;width:224px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);display:flex;flex-direction:column;cursor:pointer;transition:border-color .2s,background .2s}
.col:hover{border-color:var(--line-strong)}
.col.sel{border-color:var(--accent);background:#1e1d1c;box-shadow:0 0 0 1px var(--accent) inset}
.col.dark{opacity:.7}
.col .head{padding:10px 12px 6px;border:0;background:none;color:var(--paper);text-align:left;cursor:pointer}
.col .head .when{font-size:.75rem;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.col .head .nm{font-size:.9375rem;font-weight:600;line-height:1.2;display:block;margin-top:2px}
.col .clips{display:grid;gap:6px;padding:6px 8px 8px;grid-auto-rows:140px}
/* Tiles get their height from the grid rows (grid-auto-rows), the picture laid over them. Chrome sized
   the rows from each button's empty min-content (every child is absolute), so aspect-ratio and padding
   spacers both came out a few pixels tall. */
.clip{position:relative;display:block;border-radius:8px;overflow:hidden;border:2px solid transparent;background:#000}
.clip .see{position:absolute;top:0;left:0;right:0;bottom:50px;width:100%;padding:0;border:0;background:none;color:var(--paper);cursor:pointer;text-align:left;overflow:hidden}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clip.now{border-color:var(--accent)}
.clip .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:.75rem;background:linear-gradient(to top,rgba(0,0,0,.82),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip .tools{position:absolute;left:3px;right:3px;bottom:3px;display:flex;gap:8px;justify-content:space-between;pointer-events:none}
.clip .tools button{pointer-events:auto;width:36px;height:36px;border-radius:7px;border:0;background:rgba(14,14,16,.82);color:var(--paper);cursor:pointer;font-size:.875rem;display:grid;place-items:center}
@media (pointer:coarse){.clip .tools button{width:44px;height:44px}}
.clip .tools button.x{color:var(--danger);margin-left:auto}
.clip .tools button:disabled{opacity:.35}
.clip .ceiltoo{position:absolute;left:6px;bottom:30px;font-size:.6875rem;padding:2px 7px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);font-weight:600}
.clip .num{position:absolute;top:6px;left:6px;min-width:22px;height:22px;border-radius:11px;background:rgba(14,14,16,.82);display:grid;place-items:center;font-size:.6875rem;font-weight:600;padding:0 6px;font-variant-numeric:tabular-nums}
.col .add{margin:0 8px 8px;min-height:36px;border-radius:var(--r-pill);border:1px dashed var(--line-strong);background:none;color:var(--paper-dim);cursor:pointer;font-size:.8125rem}
.col .add:hover{border-color:var(--paper-dim);color:var(--paper)}
.col .darknote{margin:0 10px 12px;color:var(--paper-dim);font-size:.8125rem}

/* Files from the computer onto a part (app.js filesToPart): its two add buttons side by side, those on their way,
   and its Layers row (pictures laid over its walls). */
.col .adds{display:flex;flex-direction:column;gap:6px;margin:0 8px 8px}
.col .adds .add{margin:0;display:grid;place-items:center;padding:0 10px;text-align:center}
.col .adds .add.from{position:relative;min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem}
.col .lib-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.col.filedrop{border-color:var(--accent);background:rgba(201,174,124,.14);box-shadow:0 0 0 1px var(--accent) inset}
.col.filedrop .adds .add.from{border-style:solid;border-color:var(--accent);color:var(--paper)}
.col .pending{display:grid;gap:6px;margin:0 8px 8px}
.col .pending[hidden]{display:none}
.col .pend{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;padding:7px 8px 7px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(14,14,16,.55);font-size:.75rem}
.col .pend .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--paper)}
.col .pend .what{grid-column:1/-1;color:var(--paper-dim);line-height:1.3}
.col .pend .lib-bar{grid-column:1/-1;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.col .pend .lib-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.col .pend .x{grid-row:1;grid-column:2;width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--paper-dim);cursor:pointer}
.col .pend .x:hover{color:var(--danger)}
.col .pend .link{justify-self:start;grid-column:1/-1}
.col .pend.bad{border-color:rgba(214,110,98,.6)}
.col .pend.bad .what{color:var(--danger)}
.col .layers{display:flex;flex-direction:column;gap:6px;margin:2px 8px 10px;padding:6px 8px 8px;border:1px dashed var(--line);border-radius:10px;transition:border-color .2s,background .2s}
.col .layers.has{border-style:solid;background:rgba(14,14,16,.4)}
.col .layers.filedrop,.col .layers.drop-ok{border-color:var(--accent);border-style:solid;background:rgba(201,174,124,.18)}
.col .layers .layer{display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto auto;gap:2px 8px;align-items:center}
.col .layers .layer img,.col .layers .layer .noimg{grid-row:1/3;width:44px;height:32px;object-fit:cover;border-radius:6px;display:block;background:#000}
/* A see-through layer's picture over a checkerboard, as an editor shows transparency. */
.col .layers .layer img.see{background:repeating-conic-gradient(#3a3a40 0 25%,#1e1e22 0 50%) 0 0/10px 10px}
.col .layers .layer .nm{min-width:0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .layers .layer .chip{margin-left:6px;font-size:.625rem;padding:1px 5px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--paper-dim)}
.col .layers .layer input[type=range]{grid-column:2;width:100%;min-width:0;accent-color:var(--accent)}
.col .layers .layer .x{grid-row:1/3;grid-column:3;width:30px;height:30px;border:0;border-radius:7px;background:none;color:var(--paper-dim);cursor:pointer}
.col .layers .layer .x:hover{color:var(--danger)}
.col .layers .addlayer{position:relative;align-self:flex-start;min-height:28px;display:inline-grid;place-items:center;padding:0 12px;border-radius:var(--r-pill);border:1px dashed var(--line-strong);color:var(--paper-dim);font-size:.75rem;cursor:pointer}
.col .layers .addlayer:hover{border-color:var(--paper-dim);color:var(--paper)}
.col .layers:not(.has){flex-direction:row;align-items:center;justify-content:space-between}

/* The ceiling row: at the top of each part what is overhead during it, then a small "Walls" caption
   over its pictures (with the logo switch). Not a .col and no data-part: see renderStrip. */
.col .ceilslot{position:relative;display:flex;align-items:stretch;margin:2px 10px 6px;min-height:56px;border:1px solid var(--line);border-radius:10px;background:rgba(14,14,16,.55);overflow:hidden;transition:border-color .2s,background .2s}
.col .ceilslot:hover{border-color:rgba(236,236,232,.45)}
.col .ceilslot.none{border-style:dashed;background:none}
.col .ceilslot .pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px 8px;border:0;background:none;color:var(--paper);font:inherit;text-align:left;cursor:pointer}
.col .ceilslot .pick:focus-visible,.col .ceilslot .off:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.col .ceilslot img{flex:none;width:58px;height:40px;object-fit:cover;border-radius:7px;display:block}
.col .ceilslot .txt{min-width:0;display:flex;flex-direction:column;line-height:1.15;padding:0 2px}
.col .ceilslot .lbl,.col .lanecap{font-size:.68rem;letter-spacing:.01em;text-transform:none;color:var(--paper-dim)}
.col .ceilslot .nm{font-size:.92rem;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.col .ceilslot .hint{font-size:.76rem;color:var(--paper-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .ceilslot .off{flex:none;width:44px;border:0;border-left:1px solid var(--line);background:rgba(14,14,16,.4);color:var(--paper-dim);font:inherit;font-size:.95rem;cursor:pointer}
.col .ceilslot .off:hover{color:var(--danger)}
.col .ceilslot.dark{align-items:center;padding:6px 10px;border-style:dashed;background:none;cursor:default}
.col .ceilslot.dark .nm{font-style:normal;color:var(--paper-dim)}
.col .ceilslot.choosing{border-color:var(--accent);border-style:solid;background:rgba(201,174,124,.14);box-shadow:0 0 0 1px var(--accent) inset}
.col .ceilslot.drop-ok{border-color:var(--accent);border-style:solid;background:rgba(201,174,124,.22)}
.col .lane{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;padding:0 10px 0 12px}
.col .clips{padding-top:4px}
.logopill{min-height:28px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:none;color:var(--paper-dim);font:inherit;font-size:.75rem;cursor:pointer}
.logopill[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3);color:var(--paper)}
.strip-head .hint{flex:1 1 260px}
.strip-head .btn[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3)}

/* the pictures, beside the room */
.picker{overflow-y:auto;position:sticky;top:calc(var(--topbar,57px) + 12px);max-height:calc(100vh - var(--topbar,57px) - 24px);max-height:calc(100dvh - var(--topbar,57px) - 24px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.picker .ph{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.picker .ph h2{font-size:1.0625rem;font-weight:600;line-height:1.25}
.picker .ph .for{color:var(--paper-dim);font-size:.8125rem;margin-top:2px;font-variant-numeric:tabular-nums}
.picker .ph .seg-big{margin-top:10px}
.picker .ph .seg-big button{min-height:32px;padding:0 10px;font-size:.8125rem}
.picker .search{margin-top:10px}
.picker .grid{overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:116px;gap:8px;align-content:start}
.picker .grid > .more,.picker .grid > .nothing{height:auto;align-self:start}
.pic{position:relative;display:block;border-radius:8px;overflow:hidden;border:2px solid transparent;background:#000;cursor:pointer;padding:0;color:var(--paper);text-align:left}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pic .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:.75rem;line-height:1.25;background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.pic .badge{position:absolute;top:6px;left:6px;max-width:calc(50% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.6875rem;padding:2px 6px;border-radius:var(--r-sm);background:rgba(14,14,16,.8)}
.pic .inshow{position:absolute;top:6px;right:6px;max-width:calc(50% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.6875rem;padding:2px 6px;border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-weight:600}
.pic[aria-pressed="true"]{border-color:var(--accent)}
.picker .more{margin:6px 12px 14px}
/* Choosing a ceiling: the pictures panel says so plainly, in gold. */
.picker.choosing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.picker.choosing .ph{background:rgba(201,174,124,.10)}
.addbar{border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface)}
.addbar .what{flex:1;min-width:160px;font-size:.8125rem;color:var(--paper-dim)}
.addbar .what b{color:var(--paper);font-weight:600;display:block}
.nothing{padding:24px 16px;color:var(--paper-dim);font-size:.9375rem;grid-column:1/-1}

/* ---------- sign in ---------- */
.gate{min-height:100vh;display:grid;place-items:center;padding:32px var(--gut);position:relative}
.gate .pane{width:100%;max-width:400px;padding:32px;background:var(--surface)}
.gate h1{font-size:1.75rem;margin:0 0 6px}
.gate .lead{color:var(--paper-dim);font-size:.9375rem;margin:0 0 24px}
.gate .brand{display:block;margin-bottom:32px;font-size:1rem}

/* ---------- messages ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;gap:12px;align-items:center;background:var(--paper);color:var(--ink);border-radius:var(--r-md);padding:8px 8px 8px 16px;box-shadow:0 18px 50px -12px rgba(0,0,0,.7);font-size:.875rem;font-weight:500;max-width:calc(100vw - 32px)}
.toast .btn{min-height:32px;background:transparent;color:var(--ink);border-color:rgba(14,14,16,.2)}
.toast .btn:hover{background:rgba(14,14,16,.06);color:var(--ink)}
dialog{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);color:var(--paper);padding:24px;max-width:480px;width:calc(100vw - 32px);box-shadow:0 30px 80px -20px #000}
dialog::backdrop{background:rgba(0,0,0,.66)}
dialog h2{font-size:1.25rem;margin:0 0 8px}
dialog p{color:var(--paper-dim);margin:0 0 20px;font-size:.9375rem}
dialog .row{justify-content:flex-end}
.spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--paper-faint);border-top-color:var(--accent);animation:spin 1s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}.strip{scroll-behavior:auto}}

/* ---------- added 30 Sep: floors, brightness, the ceiling picture, ready-made evenings ---------- */
.floors .label{min-width:3.2em}
.tonebar,.logobar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass-strong)}
.tonebar:empty,.logobar:empty{display:none}
.tonebar .label,.logobar .label{color:var(--paper-dim);font-size:.95rem}
.tonebar .tone-word{min-width:8.5em;text-align:center;font-family:var(--serif);font-size:1.2rem}
.tonebar .help,.logobar .help{color:var(--paper-dim);font-size:.88rem}

/* ---------- added 5 Oct: their logo (step 1, and the bar under the room) ---------- */
.logobar .grow{flex:1}
.logobar .grp{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.logobar .seg-big{gap:6px}
.logobar .seg-big button{min-height:44px;padding:6px 14px;font-size:.9rem}
.logo-thumb{position:relative;display:inline-block;flex:none;width:84px;height:44px;border-radius:8px;border:1px solid var(--line);background:#0a0a0b;overflow:hidden}
.logo-thumb > img{position:absolute;left:4px;top:4px;width:calc(100% - 8px);height:calc(100% - 8px);display:block;object-fit:contain}
/* A real file box, out of sight but still reachable with the keyboard, behind a big button. */
.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
label.btn{position:relative;cursor:pointer}
label.btn:focus-within,.logodrop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.logodrop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:24px;border:2px dashed var(--line);border-radius:var(--r-lg);background:var(--glass);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.logodrop:hover{border-color:var(--accent);background:rgba(201,174,124,.08)}
.logodrop .big{font-family:var(--serif);font-size:1.125rem;color:var(--paper)}
.logodrop .small{max-width:46ch;color:var(--paper-dim);font-size:.95rem}
.logobusy{display:flex;align-items:center;justify-content:center;gap:8px;min-height:150px;margin:0;border:2px dashed var(--line);border-radius:var(--r-lg);color:var(--paper-dim);font-family:var(--serif);font-style:normal;font-size:1.2rem}
.logonote{margin:0 0 16px;padding:10px 14px;border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(201,174,124,.08);color:var(--paper);font-size:.98rem}
.logosec.drop-ok .logodrop,.logosec.drop-ok .logoview .box{border-color:var(--accent);border-style:solid}
.logoview{display:flex;flex-wrap:wrap;gap:14px}
.logoview figure{margin:0;display:grid;gap:6px;flex:1 1 280px;max-width:560px}
.logoview .box{position:relative;aspect-ratio:2.25;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.logoview .wall{background:#0a0a0b}
/* The pixel guide's front wall (2700 x 1200 at 940,5200 of the 4580 x 6400 guide; the file is a quarter of it), faded back so the logo stands out */
.logoview .wall::before{content:"";position:absolute;inset:0;background:url(/img/tth-pixel-guide.png) 50% 100%/169.63% auto no-repeat;opacity:.6}
.logoview .box img{position:absolute;left:22%;top:18%;width:56%;height:64%;display:block;object-fit:contain}
.logoview figcaption{color:var(--paper-dim);font-size:.88rem}
.logoctl{display:grid;gap:16px;margin-top:18px}
.logoctl .field{margin:0}
.logoctl .help{color:var(--paper-dim);font-size:.92rem}
.logoparts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.logoparts .chip{font-size:.95rem;padding:10px 16px;min-height:44px}
.picker .ph .kinds{margin-top:8px}
.picker .ph .kinds button{min-height:40px;padding:6px 14px;font-size:.88rem}
.picker .ph,.picker .addbar{flex-shrink:0}
.picker .grid{flex:1 1 auto;min-height:230px}
.picker .addbar{position:sticky;bottom:0;z-index:2;background:#151517}
.addbar{flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px}
.addbar .what{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.addbar .what b{display:inline}
.addbar .row{gap:8px}
.addbar .toggle{color:var(--paper);font-size:.95rem;min-height:44px}
.count-note{display:inline-block;color:var(--accent);font-size:.9rem;margin:-8px 0 12px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.preset{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px 18px;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);color:var(--paper);cursor:pointer;font:inherit}
.preset:hover{border-color:rgba(236,236,232,.45)}
.preset b{font-family:var(--serif);font-weight:500;font-size:1rem}
.preset span{color:var(--paper-dim);font-size:.92rem}
.preset .len{color:var(--accent);font-size:.85rem}
/* The example text in the boxes is the only hint of what to type: readable, not a whisper. */
input::placeholder,textarea::placeholder{color:rgba(236,236,232,.55)}

/* ---------- People (admins) ---------- */
.people-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start;margin-top:26px}
@media (max-width:1000px){.people-grid{grid-template-columns:1fr}}
.people{display:grid;gap:12px}
.person{display:grid;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass-strong)}
.person.off{opacity:.7}
.person h3{font-size:1.0625rem;display:flex;gap:10px;align-items:center}
.person .meta{color:var(--paper-dim);font-size:.95rem}
.person .acts{display:flex;flex-wrap:wrap;gap:8px}
.invite h2,.linkbox h2{font-size:1.25rem;margin-bottom:6px}
.invite .lead,.linkbox .lead{font-size:1.05rem;margin-bottom:18px}
.linkbox{margin-top:16px;padding:20px;border:1px solid var(--accent);border-radius:var(--r-lg);background:rgba(201,174,124,.08)}
.linkbox .row{flex-wrap:nowrap}
.linkbox input{font-size:.95rem;min-width:0;flex:1}

/* ---------- the show screen: one grid, the room always on screen ---------- */
.showgrid{display:grid;gap:18px 22px;padding:18px var(--gut) 80px;align-items:start;max-width:1560px;margin:0 auto;
  grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"content room"}
.showgrid > *{min-width:0}
.showgrid .page{padding:12px 0 40px;max-width:none;margin:0}
.showgrid[data-step="client"] > [data-panel="client"],.showgrid[data-step="evening"] > [data-panel="evening"]{grid-area:content}
.roompane{grid-area:room;position:sticky;top:calc(var(--topbar,81px) + 12px);z-index:6;display:grid;gap:8px;align-self:start}
.roompane.loose{position:static}   /* a room made tall (its grip) scrolls with the page, so nothing slides under it (28 Oct) */
.roomside{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
.roompeek{display:none}
.roompane.folded .stage,.roompane.folded .roomside{display:none}
.roompane.folded .roompeek{display:inline-flex}
.roompane.drop-ok .stage{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}

/* Step 3: the room big and pinned, the evening and its controls under it, the pictures beside. */
.showgrid[data-step="room"]{grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"room picker" "below picker";gap:14px 20px}
.showgrid[data-step="room"] .roomside,.showgrid[data-step="room"] .roompeek{display:none}
.showgrid[data-step="room"] .roompane.folded .stage{display:block}
.showgrid[data-step="room"] .roompane{top:calc(var(--topbar,81px) + 8px)}
/* As tall as leaves the whole evening strip in view under it (about 490 px with its ceiling row). */
.showgrid[data-step="room"] .stage{max-height:max(260px,min(560px,calc(100vh - var(--topbar,81px) - 470px)));max-height:max(260px,min(560px,calc(100dvh - var(--topbar,81px) - 470px)));box-shadow:0 18px 40px -18px #000}
.below{grid-area:below;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.below > *{min-width:0}
.showgrid[data-step="room"] .picker{grid-area:picker;grid-row:1 / span 2}

/* Drop targets and the thing being dragged */
[data-draggable]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
[data-draggable] img{-webkit-user-drag:none;pointer-events:none}
.is-dragging,.is-dragging *{cursor:grabbing !important}
.dragging{opacity:.45}
.drag-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;display:flex;gap:10px;align-items:center;padding:6px 14px 6px 6px;border-radius:12px;
  background:rgba(14,14,16,.92);border:1px solid var(--accent);box-shadow:0 14px 34px -10px #000;color:var(--paper);font-size:.9rem;max-width:280px}
.drag-ghost img{width:84px;height:48px;object-fit:cover;border-radius:8px}
.drag-ghost span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drag-ghost.no-drop{border-color:var(--line);opacity:.8}
.col.drop-ok{border-color:var(--accent);background:rgba(201,174,124,.12)}
.clip.gap-before{box-shadow:0 -6px 0 -2px var(--accent)}
.clip.gap-after{box-shadow:0 6px 0 -2px var(--accent)}
.col .add.gap-here{border-color:var(--accent);color:var(--paper);border-style:solid}
.strip.drop-ok .col.gap-before{box-shadow:-6px 0 0 -2px var(--accent)}
.strip.drop-ok .col.gap-after{box-shadow:6px 0 0 -2px var(--accent)}
.parts.drop-ok .part.gap-before{box-shadow:0 -5px 0 -1px var(--accent)}
.parts.drop-ok .part.gap-after{box-shadow:0 5px 0 -1px var(--accent)}
.picker.drop-remove,.picker.drop-unceil{border-color:var(--danger)}
.picker.drop-remove::after,.picker.drop-unceil::after{content:"Drop here to take it out of the evening";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(14,14,16,.82);color:var(--paper);font-family:var(--serif);font-size:1.4rem;z-index:5;text-align:center;padding:20px}
.picker.drop-unceil::after{content:"Drop here to take it off the ceiling"}
.grip{width:44px;height:48px;border-radius:10px;border:1px dashed var(--line);background:none;color:var(--paper-dim);font-size:1.2rem;cursor:grab;touch-action:none}
.grip:hover{border-color:var(--accent);color:var(--paper)}
.col .head{cursor:grab}

/* ---------- pixel maps dropped on the pictures from this computer ---------- */
.picker.filedrop{border-color:var(--accent)}
.picker.filedrop::after{content:"Drop pictures or clips here. Each goes into the library, tagged; one made on the Temple House pixel guide goes into Pixel-mapped once the planner has checked it.";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(14,14,16,.86);color:var(--paper);font-family:var(--serif);font-size:1.35rem;z-index:5;text-align:center;padding:24px;
  border:2px dashed var(--accent);border-radius:inherit;pointer-events:none}
.drops{display:grid;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);flex-shrink:0;align-content:start}
.drops[hidden]{display:none}
/* Above the pictures, the first thing in their scrolling area (its row as tall as it needs). */
.picker .grid > .drops{grid-column:1/-1;height:auto;padding:0 0 4px;border-bottom:0}
.picker .grid:has(> .drops:not([hidden])){grid-template-rows:auto}
.dropoffer{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;color:var(--paper-dim);font-size:.92rem}
.droprow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.03)}
.droprow.bad{border-color:var(--danger)}
.droprow > *{grid-column:1}
.droprow > .row{grid-column:2;grid-row:1 / span 3;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.droprow .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.droprow .what{color:var(--paper-dim);font-size:.88rem;margin:0;line-height:1.3}

/* ---------- "Make one for them": a pixel map drawn for the client from the show (9 Oct) ---------- */
/* The offer at the top of the pictures, in every view: the gold button first, then "Add pixel maps". */
.dropoffer{gap:8px 12px;padding:2px 0 4px}
.dropoffer .makeoffer{font-weight:600}
.dropoffer .makeoffer:disabled{opacity:.55;cursor:default}
.dropoffer .makeoffer:disabled:hover{background:var(--surface-2);border-color:var(--line-strong)}
/* Its row while it is drawn: the step it is at, with a bar. Done or failed, the buttons under the words. */
.droprow.making .lib-bar{margin:3px 0 2px}
.droprow.wide{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 10px}
.droprow.wide .name{flex:0 1 auto;max-width:100%}
.droprow.wide .what{flex:1 1 auto}
.droprow.wide > .row{flex:0 0 auto;margin:0;justify-content:flex-start}
@media (max-width:1100px){.dropoffer > span{display:none}}
.droprow .what .spinner{margin-right:6px}
/* The sheet: one paragraph about the room, big enough to read and change in front of a client. */
dialog.makesheet{max-width:720px}
.makesheet .field{margin:0 0 10px}
.makesheet .field > span{color:var(--paper)}
.makesheet textarea{min-height:170px;font-size:1.08rem;line-height:1.45;resize:vertical}
.makesheet .again{justify-content:flex-start;margin:0 0 16px}
.makesheet .note{margin:0 0 16px;color:var(--paper-dim);font-size:.95rem}
.makesheet .error{margin:0 0 10px;min-height:0}
.makesheet .error:empty{display:none}
.makesheet .btn:disabled{opacity:.6;cursor:default}
/* Among the pictures, one made for this client (over the "Pixel-mapped" look further down): wide
   enough to read whole, a little less when "In this part" sits at the other corner. */
.pic .badge.mapped.madefor{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;max-width:calc(100% - 16px)}
.pic .badge.mapped.madefor:has(+ .inshow){max-width:calc(55% - 12px)}

/* ---------- narrower screens (last, so they win over the rules above) ---------- */
/* Two columns down to 900 px (most iPads), one column below it with the pictures right under the room. */
@media (max-width:1100px){
  .picker .ph{padding:12px 12px 8px}
  .picker .ph h2{font-size:1.2rem}
  .picker .ph .seg-big{margin-top:8px;gap:6px}
  .picker .ph .seg-big button{padding:6px 12px;font-size:.88rem}
  .picker .search{margin-top:8px;padding:10px 14px;font-size:1rem}
  .picker .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:104px;padding:10px;gap:8px}
  .pic .badge,.pic .inshow{font-size:.75rem;padding:2px 7px;max-width:calc(100% - 12px)}
  .pic .inshow{top:auto;bottom:34px;right:6px}
  .picker .ph .seg-big button{min-height:44px}
}


@media (max-width:1100px){
  .showgrid{grid-template-columns:minmax(0,1fr) 320px}
  .showgrid[data-step="room"]{grid-template-columns:minmax(0,1fr) 340px}
}
/* One column: the room first and pinned, small enough to leave room for the rest. */
@media (max-width:900px){
  .showgrid,.showgrid[data-step="room"]{grid-template-columns:minmax(0,1fr)}
  .showgrid{grid-template-areas:"room" "content"}
  .showgrid[data-step="room"]{grid-template-areas:"room" "picker" "below"}
  .showgrid[data-step="room"] .picker{grid-row:auto;position:relative;top:auto;max-height:none;overflow:visible}
  .showgrid[data-step="room"] .picker .grid{max-height:40vh;min-height:0}
  /* The evening right under the pictures, so a picture has only a short way to go. */
  .below .strip-wrap{order:-1}
  .showgrid[data-step="room"] .picker .addbar{order:-1;position:static;border-top:0;border-bottom:1px solid var(--line)}
  .showgrid .stage{max-height:30vh}
  .showgrid[data-step="room"] .stage{max-height:36vh}
  .roompane{top:var(--topbar,81px);background:var(--ink);padding:6px 0;margin:0 calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut)}
  .roomside .btn{min-height:40px}
}

/* Full screen: the room above everything, the top bar included. */
body.fill .roompane{z-index:55}

/* The caption on the small room beside the questions: just the picture. */
.showgrid:not([data-step="room"]) .stage .now .part-name{display:none}
.showgrid:not([data-step="room"]) .stage .now span{font-size:.8rem;padding:4px 10px}
.showgrid:not([data-step="room"]) .stage .now{left:8px;bottom:8px;right:8px}

/* In step 3 the page ends just under the strip, so scrolled down the whole strip sits under the pinned room. */
.showgrid[data-step="room"]{padding-bottom:20px}
.col .add{min-height:44px;margin-bottom:8px}
/* What scrolls under the pinned room must not peek out above it. */
@media (min-width:901px){.showgrid[data-step="room"] .roompane{top:var(--topbar,81px);padding-top:8px;margin-top:-8px;background:rgba(14,14,16,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 var(--r-lg) var(--r-lg)}}
/* iPad widths: the chooser's four buttons in two rows of two, and the pictures give way to them rather than hide under them. */
@media (max-width:1100px){
  .picker.choosing .addbar .row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .picker.choosing .addbar .row .btn{white-space:normal;line-height:1.15;min-height:44px}
  .picker.choosing .grid{min-height:120px}
}

/* ---------- evening scrubber ---------- */
/* Step 3: the whole evening along the foot of the room (scrub.js), each part as long as its minutes,
   and a big yellow ball at the moment the walls show. Only the track takes the pointer: above it the
   room's own look-around works as before. */
.scrub{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:8px 8px 4px;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,12,.8),rgba(10,10,12,.45) 60%,rgba(10,10,12,0));
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* (Once the Builder's alone; on every step since the review of 28 Oct: "it should be persistent".) */
.scrub-row{display:flex;align-items:center}
.scrub-time{flex:none;padding:0 2px;font-size:.85rem;font-weight:600;color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.9)}
/* The pointer's target: 56 px tall, and wide enough past each end for the ball to be taken there. */
.scrub-hit{flex:1;min-width:0;height:56px;padding:0 24px;display:flex;align-items:center;pointer-events:auto;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scrub-rail{position:relative;flex:1;height:14px;border-radius:7px;background:rgba(14,14,16,.75);box-shadow:0 0 0 1px rgba(236,236,232,.4),0 2px 10px rgba(0,0,0,.6)}
.scrub-segs{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.scrub-seg{position:absolute;top:0;bottom:0;box-sizing:border-box;background:rgba(236,236,232,.6);border-right:2px solid rgba(14,14,16,.95);transition:background .2s}
.scrub-seg:last-child{border-right:0}
.scrub-seg.dark{background:repeating-linear-gradient(-45deg,rgba(236,236,232,.16) 0 3px,rgba(236,236,232,.04) 3px 7px)}
.scrub-seg.at{background:var(--accent)}
.scrub-seg.dark.at{background:repeating-linear-gradient(-45deg,rgba(201,174,124,.6) 0 3px,rgba(201,174,124,.18) 3px 7px)}
.scrub-seg i{position:absolute;top:3px;bottom:3px;width:1px;margin-left:-.5px;background:rgba(14,14,16,.45)}
.scrub-ball{position:absolute;z-index:1;top:50%;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;box-sizing:border-box;border-radius:50%;
  background:#FFD43B;border:3px solid #0e0e10;box-shadow:0 0 0 2px rgba(255,212,59,.4),0 4px 14px rgba(0,0,0,.65);
  cursor:grab;outline:none;transition:left .25s ease,transform .15s ease}
.scrub-ball:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #0e0e10,0 4px 14px rgba(0,0,0,.65)}
.scrub.live .scrub-ball{transition:transform .15s ease}          /* dragged, or moving with the evening: no lag */
.scrub.held .scrub-ball{transform:scale(1.15);cursor:grabbing}
.scrub.held .scrub-hit{cursor:grabbing}
.stage.scrubbing iframe{pointer-events:none}                       /* the room never sees a scrub */
.scrub-bubble{position:absolute;left:0;bottom:66px;max-width:calc(100% - 12px);padding:8px 14px;border-radius:12px;background:rgba(14,14,16,.94);border:1px solid #FFD43B;
  color:var(--paper);font-size:.95rem;line-height:1.3;box-shadow:0 10px 26px -8px #000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
.scrub-bubble .txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrub-bubble b{font-family:var(--serif);font-size:1.12rem;font-weight:600}
.scrub-bubble::after{content:"";position:absolute;top:100%;left:var(--tip,50%);margin-left:-7px;border:7px solid transparent;border-top-color:#FFD43B}
.scrub.telling .scrub-bubble{opacity:1;visibility:visible;transition:opacity .15s}
/* The room's caption goes to the top of the room in step 3, out of the scrubber's way. */
.showgrid[data-step="room"] .stage .now{top:12px;bottom:auto}
body.fill .showgrid[data-step="room"] .stage .now{top:18px;right:min(460px,45%)}
/* The part under the ball while she drags it, in the evening strip as well. */
.col.scrub-at{outline:3px solid #FFD43B;outline-offset:0}
@media (prefers-reduced-motion:reduce){.scrub-ball,.scrub.live .scrub-ball,.scrub-seg{transition:none}}
@media (max-width:600px){.scrub-time{display:none}.scrub-hit{padding:0 20px}}

/* ---------- client step 2026-10-06 ---------- */
/* How the room should feel and other kinds of pictures, in her own words. */
.feelwords,.lookwords{margin:18px 0 0}
.feelwords textarea{min-height:84px}

/* The kinds of pictures: a card each, with an example from the library. */
.texgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.texcard{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;font:inherit;color:var(--paper);border:2px solid var(--line);border-radius:var(--r-md);background:var(--glass);overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.texcard:hover{border-color:rgba(236,236,232,.5)}
.texcard[aria-pressed="true"]{border-color:var(--accent);background:rgba(201,174,124,.14);box-shadow:0 0 0 2px var(--accent),0 10px 30px -14px var(--accent)}
.texcard:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.texcard .ex{position:relative;display:block;aspect-ratio:16/10;background:#000}
.texcard .ex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.texcard img,.lm-tile img{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}   /* a long press is a tap, not the iPad's picture menu */
.texcard .mark{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;font-weight:700;background:rgba(14,14,16,.55);border:2px solid rgba(236,236,232,.85);color:var(--accent-ink)}
.texcard[aria-pressed="true"] .mark{background:var(--accent);border-color:var(--accent)}
.texcard .txt{display:block;padding:10px 12px 12px}
.texcard .txt b{display:block;font-weight:600;font-size:1.05rem}
.texcard .sub{display:block;font-size:.9rem;color:var(--paper-dim);margin-top:2px}

/* Their colours: big swatches with their codes, a way to add one, an ✕ to take one away. */
.cswatches{display:flex;flex-wrap:wrap;gap:18px 16px;margin:4px 0 20px;padding-top:6px}
.cswatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:104px}
.cs-pick{display:block;width:104px;height:104px;padding:0;border-radius:var(--r-md);border:1px solid var(--line);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:box-shadow .2s}
.cswatch.editing .cs-pick{box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--accent)}
.cs-pick:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.cs-hex{font-size:.92rem;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--paper)}
.cs-x{position:absolute;top:-12px;right:-12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#1b1b1e;color:var(--paper);font:inherit;font-size:1rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 12px -4px #000}
.cs-x:hover{color:var(--danger);border-color:var(--danger)}
.cs-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:104px;height:104px;padding:6px;border-radius:var(--r-md);border:2px dashed var(--line);background:none;color:var(--paper-dim);font:inherit;font-size:.9rem;line-height:1.2;cursor:pointer}
.cs-add .plus{font-size:2rem;line-height:1;color:var(--paper)}
.cs-add:hover{border-color:var(--accent);color:var(--paper)}

/* Changing one colour: the wheel and its brightness beside a big swatch and the colour code. */
.ceditor{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:24px;align-items:start;margin:0 0 24px;padding:20px;border:1px solid var(--accent);border-radius:var(--r-lg);background:rgba(201,174,124,.06)}
.cwheel{display:grid;gap:12px}
.cw-disc{position:relative;width:100%;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cw-disc canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%}
.cw-shade{position:absolute;inset:0;border-radius:50%;background:#000;pointer-events:none}
.cw-dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.5);pointer-events:none}
.cw-disc:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.cw-bright-row{display:grid;gap:4px;color:var(--paper-dim);font-size:.95rem}
.cw-bright{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.cw-bright::-webkit-slider-runnable-track{height:18px;border-radius:9px;border:1px solid var(--line);background:linear-gradient(to right,#000,var(--full,#fff))}
.cw-bright::-moz-range-track{height:18px;border-radius:9px;border:1px solid var(--line);background:linear-gradient(to right,#000,var(--full,#fff))}
/* A finger-sized thumb (on the iPad a drag only starts on the thumb), centred on the 18px track. */
.cw-bright::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:44px;height:44px;margin-top:-13px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.5)}
.cw-bright::-moz-range-thumb{box-sizing:border-box;width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 0 0 2px #fff}
.cw-bright:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ce-side{display:grid;gap:12px;align-content:start}
.ce-side .field{margin:0}
.ce-preview{height:120px;border-radius:var(--r-md);border:1px solid var(--line)}
.ce-hex{max-width:240px;letter-spacing:.01em;text-transform:none}
.ce-hex.bad{border-color:var(--danger)}
.ce-hint{margin:0;min-height:1.3em;color:var(--danger);font-size:.95rem}
@media (max-width:600px){.ceditor{grid-template-columns:1fr}.cwheel{max-width:300px}}

/* Start from a named palette, or the planner's suggestions. */
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.cs-head h3{font-family:var(--serif);font-weight:500;font-size:1.0625rem;margin:0}
.csuggest .strip{display:flex;height:40px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.csuggest .strip i{flex:1}
.csuggest{margin:0 0 18px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass-strong)}
.csuggest .help{margin:0 0 12px;color:var(--paper-dim);font-size:.95rem}
.csuggest .ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:12px}
.csuggest .idea{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(14,14,16,.35)}
.csuggest .idea .strip{height:56px}
.csuggest .idea .nm b{font-weight:600}
.csuggest .idea .nm .sub{display:block;color:var(--paper-dim);font-size:.85rem}
.csuggest .idea .btn{justify-self:start}

/* Their logo: "Choose their logo…" or "Make one for them", and the designs it makes. */
.logochoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
button.logodrop{width:100%;font:inherit;color:var(--paper)}
.logodrop.logomake{border-style:solid;border-color:rgba(201,174,124,.55)}
.logodrop.logomake[aria-expanded="true"]{border-color:var(--accent);background:rgba(201,174,124,.12)}
.logomaker{display:grid;gap:14px;margin-top:16px;padding:20px;border:1px solid var(--accent);border-radius:var(--r-lg);background:rgba(201,174,124,.06)}
.logoctl .logomaker{margin-top:0}
.logomaker h3{font-family:var(--serif);font-weight:500;font-size:1.0625rem;margin:0}
.logomaker .field{margin:0}
.logomaker .help{margin:0;color:var(--paper-dim);font-size:.95rem}
.lm-styles{display:flex;flex-wrap:wrap;gap:10px}
.lm-styles .opt{flex:1 1 160px}
.lm-colours{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;color:var(--paper-dim);font-size:.95rem}
.lm-colours .dots{display:inline-flex;gap:4px}
.lm-colours .dots i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line)}
.lm-busy{display:grid;gap:12px;justify-items:center}
.lm-busy .logobusy{width:100%}
.lm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px}
.lm-grid.small{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:520px}
.lm-tile{display:flex;flex-direction:column;padding:0;border:2px solid var(--line);border-radius:var(--r-md);background:#f6f2ea;overflow:hidden;cursor:pointer;font:inherit}
.lm-tile img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:8%}
.lm-tile .use{display:block;padding:12px 10px;background:rgba(14,14,16,.9);color:var(--paper);font-weight:600;text-align:center}
.lm-grid.small .lm-tile .use{padding:6px 4px;font-size:.78rem}
.lm-tile:hover,.lm-tile:focus-visible{border-color:var(--accent)}
.lm-tile:disabled{cursor:default;opacity:.7}

/* ---------- examples + room tab ---------- */
/* "Show other examples" beside the count of kinds chosen (step 1). */
.texhead{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:-8px 0 12px}
.texhead .count-note{margin:0}
.texhead .btn{min-height:44px}
/* The room folded away in steps 1 and 2. On a wide screen it is a slim tab, the height of the screen,
   down the right edge ("Show the room" written downwards) and the questions take the room's width;
   on a narrow screen it stays the small bar under the top bar. */
.roompeek .ico{font-size:1.05rem;line-height:1}
@media (min-width:901px){
  /* (The grid is as wide as its content otherwise; folded, it takes the whole width it may.) */
  .showgrid.room-folded:not([data-step="room"]){grid-template-columns:minmax(0,1fr) 52px;width:100%}
  .showgrid.room-folded:not([data-step="room"]) .roompeek{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;
    width:52px;min-height:220px;height:calc(100vh - var(--topbar,81px) - 24px);height:calc(100dvh - var(--topbar,81px) - 24px);
    padding:18px 0;border-radius:var(--r-md);border-color:rgba(201,174,124,.5);background:var(--glass);white-space:nowrap}
  .showgrid.room-folded:not([data-step="room"]) .roompeek:hover{border-color:var(--accent);background:rgba(201,174,124,.12)}
  .showgrid.room-folded:not([data-step="room"]) .roompeek .ico{font-size:1.35rem}
  .showgrid.room-folded:not([data-step="room"]) .roompeek .lbl{writing-mode:vertical-rl;font-size:1rem;letter-spacing:.05em}
  .showgrid.room-folded:not([data-step="room"]) .roompane{margin-bottom:-68px}
}

/* ---------- suggested evening ---------- */
/* Step 2: "Fill the evening with suggested pictures", a big on/off switch beside "Next". The checkbox
   is still there (over the track) for the keyboard and screen readers; the whole label is the target. */
.nextbar .nextgo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.fillswitch{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:var(--tap);max-width:300px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.fillswitch input{position:absolute;left:0;top:50%;width:60px;height:34px;margin:-17px 0 0;opacity:0;cursor:pointer}
.fillswitch .track{flex:none;position:relative;width:60px;height:34px;border-radius:17px;border:1px solid var(--line);background:var(--glass);transition:background .2s,border-color .2s}
.fillswitch .track::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--paper-dim);transition:transform .2s,background .2s}
.fillswitch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.fillswitch input:checked + .track::after{transform:translateX(26px);background:var(--accent-ink)}
.fillswitch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:3px}
.fillswitch .txt{font-size:1rem;line-height:1.25;color:var(--paper)}
.fillswitch .txt small{display:block;margin-top:3px;font-size:.85rem;color:var(--paper-dim)}
/* Step 3: "Suggested pictures: On / Off" in the strip's head. */
.sugseg{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sugseg .label{color:var(--paper-dim);font-size:.95rem;margin-right:2px}
.sugseg button{min-height:44px;min-width:60px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass);color:var(--paper);cursor:pointer;font-size:.92rem}
.sugseg button[aria-pressed="true"]{border-color:var(--accent);background:rgba(201,174,124,.18)}
/* A suggested picture's tile: a small "Suggested" chip, and "Keep" beside the ✕. */
.clip .sugchip{position:absolute;top:6px;right:6px;font-size:.72rem;padding:2px 8px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);border:1px solid var(--accent);color:var(--accent);font-weight:600}

/* ---------- palettes 2026-10-07 ---------- */
/* "Start from": a search box, filters, "Sort by", a count, then a box of palettes with its own scroll
   (about 360 px tall, less on an iPad); each row its colours, its name, and a ✓ when it is theirs. */
.palstart{display:grid;gap:12px}
.pal-find{position:relative}
.pal-find .big-input{padding-right:60px}
.pal-wipe{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:none;color:var(--paper-dim);font:inherit;font-size:1.05rem;cursor:pointer}
.pal-wipe:hover{color:var(--paper);background:rgba(236,236,232,.08)}
.pal-chips{display:flex;flex-wrap:wrap;gap:8px}
.pal-chips .chip{min-height:44px;padding:6px 15px;font-size:.92rem}
.pal-sortby{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.pal-sortby .lbl{color:var(--paper-dim);font-size:.95rem}
.pal-sorts{gap:6px}
.pal-sorts button{min-height:44px;padding:6px 16px;font-size:.92rem}
.pal-count{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0;color:var(--paper-dim);font-size:.95rem}
.pal-count .link{min-height:44px}
.palbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-content:start;gap:8px;max-height:360px;padding:10px;
  overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(14,14,16,.55);scrollbar-width:thin;scrollbar-color:rgba(236,236,232,.4) transparent}
.palrow{display:grid;grid-template-columns:minmax(120px,42%) minmax(0,1fr) 32px;align-items:center;gap:12px;min-height:56px;padding:7px 8px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);color:var(--paper);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s;
  content-visibility:auto;contain-intrinsic-size:auto 56px}   /* rows scrolled out of the box cost nothing to draw */
.palrow:hover{border-color:rgba(236,236,232,.45)}
.palrow[aria-pressed="true"]{border-color:var(--accent);background:rgba(201,174,124,.14);box-shadow:inset 0 0 0 1px var(--accent)}
.palrow:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.pal-sw{display:flex;height:40px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pal-sw i{flex:1}
.palrow .nm{font-size:1rem;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.palrow .nm small{display:block;margin-top:2px;font-size:.8rem;color:var(--paper-dim)}
.palrow .ok{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.palrow[aria-pressed="true"] .ok{background:var(--accent);color:var(--accent-ink)}
.pal-none{grid-column:1/-1;margin:0;padding:22px 12px;text-align:center;color:var(--paper-dim);font-size:1rem}
.pal-none .link{padding:4px 2px;font-size:1rem}
@media (max-width:1180px),(max-height:820px){.palbox{max-height:300px}}
@media (max-width:600px){.palbox{grid-template-columns:minmax(0,1fr)}}

/* ---------- date and guests ---------- */
/* Step 1: the date is the device's own calendar in a big box (a tap anywhere on it opens it), the day
   in words under it, and her words for a date not settled yet. The guests: a slider and a number box
   that follow each other, "Not sure yet" beside them, and a quiet line when the room shows fewer
   people than that. Every target at least --tap high (44px for the small link). */
.datefield .field{margin-bottom:14px}
.dayrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px}
.datebox{width:auto;flex:0 1 320px;min-width:min(240px,100%);max-width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left;color-scheme:dark}
.datebox::-webkit-date-and-time-value{text-align:left}
.datebox::-webkit-calendar-picker-indicator{width:24px;height:24px;padding:4px;margin-left:10px;cursor:pointer;opacity:.9}
.datewipe{min-height:44px}
.daywords{margin:0;color:var(--accent);font-size:1rem}
.daywords.none{color:var(--paper-dim)}
.datenote .big-input{max-width:560px}
.guests{display:grid;gap:6px}
.guestrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.guestslide{flex:1 1 260px;min-width:min(220px,100%)}
.guestslider{display:block;width:100%;height:var(--tap);margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.guestslider::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--accent) 0 var(--fill,50%),rgba(236,236,232,.22) var(--fill,50%) 100%)}
.guestslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;margin-top:-12px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.guestslider::-moz-range-track{height:10px;border-radius:5px;background:rgba(236,236,232,.22)}
.guestslider::-moz-range-progress{height:10px;border-radius:5px;background:var(--accent)}
.guestslider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.guestslider:focus{outline:none}
.guestslider:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.guests.unknown .guestslider{opacity:.45}
.guestends{display:flex;justify-content:space-between;margin-top:-8px;padding:0 6px;color:var(--paper-dim);font-size:.85rem}
.guestnum{display:inline-flex;align-items:center;gap:10px;color:var(--paper-dim);font-size:1rem;cursor:text}
.guestbox{width:132px;text-align:center;font-size:1.125rem;padding:12px 10px;-moz-appearance:textfield;appearance:textfield}
.guestbox::-webkit-inner-spin-button,.guestbox::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.guestunsure{min-height:var(--tap);padding:10px 20px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass);color:var(--paper);cursor:pointer;font-size:1rem;white-space:nowrap}
.guestunsure[aria-pressed="true"]{border-color:var(--accent);background:rgba(201,174,124,.18)}
.guestmore{margin:0;color:var(--paper-dim);font-size:.92rem}
.crowdnote{margin:6px 0 0;color:var(--paper-dim);font-size:.95rem;font-style:normal}

/* ---------- library page ---------- */
/* The Library page (library.js): a big drop box for a pixel map, the files being sent with their
   bars, the cards (to review, in the library, did not work), and one item's check: the room with a
   button for each surface beside the plate laid flat, the guide's walls drawn over it; then its name,
   tags and words, and putting it in or taking it out of the library. In the picker, the
   "Pixel-mapped" badge. */
.libpage .lib-head{justify-content:space-between;align-items:flex-start;gap:18px}
.libpage .lib-title{flex:1 1 420px;min-width:0}
.libpage .note{color:var(--paper-dim);font-size:.92rem}
.lib-add{margin-bottom:30px}
.lib-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;padding:30px 20px;border:2px dashed var(--line);border-radius:var(--r-lg);background:var(--glass);cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.lib-drop:hover,.lib-drop.over{border-color:var(--accent);background:rgba(201,174,124,.10)}
.lib-drop:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px}
.lib-drop .big{font-family:var(--serif);font-size:1.125rem;line-height:1.15;color:var(--paper)}
.lib-drop .or{color:var(--paper-dim);font-size:.95rem}
.lib-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.lib-guide{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;color:var(--paper-dim);font-size:.95rem}
.lib-guide a.btn{text-decoration:none;flex:none}
.lib-guide span{flex:1 1 300px}

.lib-uploads > .section{margin-bottom:30px}
.lib-up{display:grid;gap:8px;padding:14px 18px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass-strong)}
.lib-up .name{font-size:1.05rem;overflow-wrap:anywhere}
.lib-up .row{justify-content:space-between}
.lib-up .what{color:var(--paper-dim);font-size:.95rem;font-variant-numeric:tabular-nums}
.lib-up.bad{border-color:rgba(231,154,143,.5)}
.lib-up.bad .error{margin:0;min-height:0}
.lib-bar{display:block;height:8px;border-radius:4px;background:var(--paper-faint);overflow:hidden}
.lib-bar.big{height:12px;border-radius:6px}
.lib-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .3s}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.libcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass-strong);overflow:hidden}
.libcard.failed{border-color:rgba(231,154,143,.45)}
.libcard .open{all:unset;display:flex;flex-direction:column;flex:1;cursor:pointer}
.libcard .open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.libcard .open:hover{background:rgba(236,236,232,.05)}
.lib-poster{display:grid;place-items:center;aspect-ratio:1400/622;background:#000;overflow:hidden}
.lib-poster img{width:100%;height:100%;object-fit:cover;display:block}
.lib-poster .none{color:var(--paper-dim);font-family:var(--serif);font-style:normal;font-size:1.15rem}
.libcard .body{display:grid;gap:3px;padding:14px 18px 16px}
.libcard h3{font-size:1.0625rem;margin:0 0 2px;overflow-wrap:anywhere}
.libcard .meta{color:var(--paper-dim);font-size:.92rem}
.libcard .tags,.lib-status .tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.libcard .error{margin:6px 0 0;min-height:0}
.libcard .foot2{padding:0 18px 16px}
.chip.status{font-size:.82rem;padding:4px 11px}
.chip.status.published{border-color:var(--accent);color:var(--accent)}
.chip.status.review{border-color:var(--paper-dim);color:var(--paper)}
.chip.status.failed,.chip.warn{border-color:rgba(231,154,143,.6);color:var(--danger)}
.lib-making{display:grid;gap:6px;margin-top:8px;color:var(--paper-dim);font-size:.92rem;font-variant-numeric:tabular-nums}
.lib-making.big{max-width:560px;margin-top:14px;font-size:1.05rem;color:var(--paper)}

.libpage.review{max-width:1320px}
.lib-back{margin-bottom:18px}
.lib-status{margin:0 0 28px}
.lib-status .meta{color:var(--paper-dim);font-size:1rem}
.lib-status .error{min-height:0}
.lib-check > p.help{max-width:75ch}
.lib-checkgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:24px;align-items:start}
.lib-roomcol{display:grid;gap:12px;min-width:0}
.lib-roomcol .note{margin:0}
.lib-views button{min-width:96px}
.lib-flatcol{display:grid;gap:8px;min-width:0}
.lib-flatcol .note{margin:0}
.lib-flat{position:relative;width:100%;aspect-ratio:4580/6400;margin:0;border:1px solid var(--line);border-radius:var(--r-md);background:#000;overflow:hidden}
.lib-flat img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lib-guide-svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s;pointer-events:none}
.lib-guide-svg.on{opacity:1}
.lib-guide-svg .shade{fill:none;stroke:rgba(0,0,0,.7);stroke-width:4px;vector-effect:non-scaling-stroke}
.lib-guide-svg .edge{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.lib-guide-svg text{font-family:var(--sans);font-weight:700;letter-spacing:.04em;fill:#fff;stroke:rgba(0,0,0,.8);stroke-width:34px;stroke-linejoin:round;paint-order:stroke}
.lib-guide-svg text.sub{font-weight:500}
.lib-warn{margin:0 0 20px;padding:16px 20px;border:1px solid rgba(231,154,143,.6);border-radius:var(--r-md);background:rgba(231,154,143,.10)}
.lib-warn h3{font-size:1.0625rem;margin:0 0 8px}
.lib-warn ul{margin:0 0 10px;padding-left:1.2em}
.lib-warn li{margin:4px 0}
.lib-warn p{margin:0;color:var(--paper-dim)}
.lib-ok{margin:0 0 16px}
.lib-edges p{margin:0 0 4px}

.lib-details{max-width:920px}
.lib-dhead{justify-content:space-between;align-items:baseline}
.lib-dhead h2{font-size:1.25rem;margin:0 0 6px}
.lib-details textarea{min-height:90px}
.lib-tags{margin:0 0 20px}
.lib-tags h3{font-size:1.0625rem;margin:0 0 8px}
.lib-tags h3 small{font-family:var(--sans);font-size:.88rem;color:var(--paper-dim)}
.lib-chips{display:flex;flex-wrap:wrap;gap:8px}
.lib-chips .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;font-size:.95rem}
.lib-chips .dots{display:inline-flex;gap:2px}
.lib-chips .dots i{display:block;width:10px;height:10px;border-radius:50%}
.lib-bar-actions{display:grid;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.lib-bar-actions p{margin:0;color:var(--paper-dim)}
.lib-confirm{min-height:var(--tap);font-size:1.05rem;color:var(--paper)}
.lib-actions .btn.gold:disabled:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.pic .badge.mapped{border:1px solid rgba(201,174,124,.75);color:var(--accent)}
/* A pixel map made for a client (library.js review): who for and what it cost, and folded under it
   what it was made from. */
.lib-madeline{display:block;margin-top:4px;color:var(--accent)}
.lib-madefrom{margin:-12px 0 28px;max-width:920px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.lib-madefrom summary{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:8px 18px;cursor:pointer;font-family:var(--serif);font-size:1.25rem;list-style:none}
.lib-madefrom summary::-webkit-details-marker{display:none}
.lib-madefrom summary::before{content:"▸";font-family:var(--sans);font-size:1rem;color:var(--accent);transition:transform .15s}
.lib-madefrom[open] summary::before{transform:rotate(90deg)}
.lib-madefrom summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.lib-from{padding:4px 18px 16px}
.lib-from h3{font-size:1.15rem;margin:8px 0 6px}
.lib-from p{margin:0 0 8px;color:var(--paper);font-size:1rem;line-height:1.45;white-space:pre-wrap}
.lib-from p.note{color:var(--paper-dim);font-size:.92rem}
.lib-from dl{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:8px 16px;margin:0}
.lib-from dt{color:var(--paper-dim);font-size:.92rem;padding-top:2px}
.lib-from dd{margin:0;font-size:.95rem;line-height:1.45;white-space:pre-wrap}
@media (max-width:600px){.lib-from dl{grid-template-columns:minmax(0,1fr)}.lib-from dd{margin-bottom:6px}}

@media (max-width:1000px){.lib-checkgrid{grid-template-columns:minmax(0,1fr)}.lib-flatcol{max-width:420px}}
@media (max-width:600px){.lib-drop{min-height:160px}.lib-drop .big{font-size:1.45rem}.lib-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- library page: five wall files ---------- */
/* "Add a pixel map" comes two ways (library.js): one file on the guide, or five wall files on a little
   board laid out like the guide (the back wall on top; the left wall, the ceiling and the right wall
   across; the front wall below). Each box takes a dropped file, shows it the right way up as stored
   (as the planner lays it: a photo's rotation tag is not obeyed), and can be dragged to another box. */
.lib-ways{margin:0 0 18px}
.lib-way > .help{max-width:80ch}
.lib-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:". back ." "left ceiling right" ". front .";gap:14px;padding:14px;border:2px dashed var(--line);border-radius:var(--r-lg);background:rgba(0,0,0,.18);transition:border-color .2s,background .2s}
.lib-board.over{border-color:var(--accent);background:rgba(201,174,124,.08)}
.lib-slot{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass-strong);transition:border-color .2s,background .2s}
.lib-slot[data-wall="back"]{grid-area:back}
.lib-slot[data-wall="left"]{grid-area:left}
.lib-slot[data-wall="ceiling"]{grid-area:ceiling}
.lib-slot[data-wall="right"]{grid-area:right}
.lib-slot[data-wall="front"]{grid-area:front}
.lib-slot.over{border-color:var(--accent);background:rgba(201,174,124,.14)}
.lib-slot.bad{border-color:rgba(231,154,143,.6)}
.lib-slot .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.lib-slot h3{font-size:1rem;margin:0}
.lib-slot .size{color:var(--paper-dim);font-size:.88rem;font-variant-numeric:tabular-nums}
.lib-slot .pic,.lib-pic{display:grid;place-items:center;width:100%;border:1px dashed var(--line);border-radius:8px;background:#000;overflow:hidden}
.lib-slot .pic.full{border-style:solid;cursor:grab}
.lib-slot .pic:not(.full){min-height:3.6em}
.lib-slot .pic img,.lib-slot .pic video,.lib-pic img,.lib-pic video{width:100%;height:100%;object-fit:contain;display:block;image-orientation:none;pointer-events:none}
/* A clip marked to be shown turned a quarter: the browser turns it, so it is laid in a box the other way
   round and turned back (library.js preview), to show it as stored, as the planner lays it. */
.lib-slot .pic.quarter,.lib-pic.quarter{position:relative;container-type:size}
.lib-slot .pic.quarter video,.lib-pic.quarter video{position:absolute;left:50%;top:50%;width:100cqh;height:100cqw;max-width:none}
.lib-slot .pic .blank{padding:6px 10px;color:var(--paper-dim);font-size:.9rem;line-height:1.3;text-align:center}
.lib-slot[data-wall="ceiling"] .pic{width:auto;height:260px;max-width:100%;margin:0 auto}
.lib-slot .what,.lib-slot .file{margin:0;color:var(--paper-dim);font-size:.92rem;line-height:1.35}
.lib-slot .fname{display:block;color:var(--paper);overflow-wrap:anywhere}
.lib-slot .error{margin:0;min-height:0;font-size:.92rem}
.lib-slot .note{margin:0;font-size:.85rem}
.lib-slot .lib-turned{color:var(--accent)}
.lib-slot .row{margin-top:auto;gap:8px}
.lib-slot label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.lib-boardnote{margin:12px 0 0;max-width:80ch;color:var(--accent);font-size:1rem}
.lib-boardnote:empty{display:none}
.lib-curve{margin:12px 0 0;max-width:80ch}
.lib-templates{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px;color:var(--paper-dim);font-size:.95rem}
.lib-templates a.btn{text-decoration:none}
.lib-make{margin-top:22px;max-width:640px}
.lib-make .field{margin-bottom:12px}
.lib-make .row{gap:14px}
.lib-up .walls{color:var(--paper-dim);font-size:.9rem}
/* "Is it the left wall or the right wall?", with the file's picture (as stored) and no answer chosen. */
dialog.lib-askside{max-width:640px}
.lib-askside h2:focus{outline:none}
.lib-askside .lib-pic{border-style:solid;margin:0 0 16px}
.lib-askside .row{justify-content:space-between;gap:12px}
/* Up to 1024 wide (an iPad either way up): one box a row, so a side wall is wide enough to see (three
   across, at 768 it was 166 × 39). */
@media (max-width:1024px){.lib-board{grid-template-columns:minmax(0,1fr);grid-template-areas:"back" "left" "ceiling" "right" "front"}}

/* Example shows (src/examples.js): apart from the clients' shows on the front page */
.home .examples{margin-top:34px}
.home .examples h2{margin:0 0 4px}
.showcard h3 .chip.example{margin-left:10px;vertical-align:middle;font-size:.75rem;font-family:var(--sans,inherit);padding:2px 10px;border-radius:var(--r-pill);border:1px solid var(--accent);color:var(--accent)}

/* Full screen is the room alone (app.js fill): no caption or scrubber over it; its buttons only while the mouse moves. */
body.fill .stage .now,body.fill .scrub{display:none !important}
body.fill .fillbar{transition:opacity .4s}
body.fill.fill-idle .fillbar{opacity:0;pointer-events:none}
body.fill.fill-idle{cursor:none}

/* One picture across parts (app.js carryOn): the copy that carries on is joined to the part before it. */
.strip-head .count,.stripHead .count{color:var(--paper-dim);font-size:.92rem;white-space:nowrap}
.clip.carried{border-left:3px solid var(--accent)}
.clip .carrychip{position:absolute;left:6px;top:6px;padding:1px 8px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);color:var(--accent);font-size:.72rem}
.clip .tools .carry{font-weight:600}

/* How many pictures are chosen for them (app.js renderPicker): a slider in the "Chosen for them" tab. */
.picks-n{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--paper-dim);font-size:.95rem}
.picks-n input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}
.picks-n b{min-width:3ch;color:var(--paper);font-variant-numeric:tabular-nums}

/* A show's people (app.js showPeople): who was invited in, and inviting someone. */
dialog.people-box{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--paper)}
dialog.people-box::backdrop{background:rgba(0,0,0,.6)}
.people-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 6px}
.people-head h2{margin:0}
.people-list{display:grid;gap:8px;margin:14px 0}
.person{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.person .who{flex:1;min-width:180px;display:grid}
.person .who span{color:var(--paper-dim);font-size:.9rem}
.person .role{color:var(--paper-dim)}
.people-invite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:center}
.people-invite input,.people-invite select{width:100%;min-width:0}
.people-invite input[type=email],.people-invite .btn{grid-column:1/-1}
.people-link{margin-top:12px;padding:12px;border-radius:12px;background:rgba(201,174,124,.1);display:grid;gap:8px}
.people-link input{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--paper)}
@media (max-width:640px){.people-invite{grid-template-columns:1fr}}
/* The room's panel blurs what is behind it, and a blur makes the panel the box a fixed child is placed in:
   in full screen the room was squeezed into the panel (8 px tall). No blur while it fills the screen. */
body.fill .roompane,body.fill .showgrid,body.fill main{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;transform:none !important;filter:none !important}
/* ... and the screen's whole height: step 3 caps the room's height, which must not hold in full screen. */
body.fill .showgrid .stage,body.fill .stage{max-height:none !important;width:100vw;height:100vh;height:100dvh}

/* Managing the whole library (manage.js): a grid of pictures to choose, a bar for what is chosen. */
.lib-tabs{margin:0 0 18px;flex-wrap:wrap}
.manage-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:10px}
.manage .kinds{margin-bottom:6px;flex-wrap:wrap}
.manage-count{margin:6px 0}
.manage-bar{position:sticky;top:calc(var(--topbar,81px) + 6px);z-index:6;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin:8px 0 12px;
  border:1px solid var(--line);border-radius:14px;background:rgba(14,14,16,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.manage-bar.active{border-color:var(--accent)}
.manage-bar .n{flex:1;min-width:180px;color:var(--paper-dim)}
.manage-bar.active .n{color:var(--paper);font-weight:600}
.btn.danger{border-color:#e07a6a;color:#ffb3a6}
.btn.danger:hover{background:rgba(224,122,106,.18)}
.manage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.manage-tile{display:grid;gap:4px;min-width:0}
.manage-tile .pick{all:unset;position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000;border:2px solid transparent;cursor:pointer}
.manage-tile .pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.manage-tile.on .pick{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.manage-tile .pick img{width:100%;height:100%;object-fit:cover;display:block}
.manage-tile .noposter{display:grid;place-items:center;height:100%;padding:8px;color:var(--paper-dim);font-size:.85rem;text-align:center}
.manage-tile .tick{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  border:2px solid rgba(255,255,255,.85);background:rgba(14,14,16,.55);color:var(--accent-ink)}
.manage-tile.on .tick{background:var(--accent);border-color:var(--accent)}
.manage-tile .tags{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.manage-tile .tags span{padding:1px 7px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);font-size:.7rem}
.manage-tile .cap{display:flex;gap:6px;align-items:baseline;min-width:0;font-size:.85rem}
.manage-tile .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manage-tile .when{color:var(--paper-dim);font-size:.78rem}
.manage-more{display:flex;justify-content:center;margin:14px 0}
dialog.manage-look{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--paper);gap:10px}
dialog.manage-look[open]{display:grid}
dialog.manage-look::backdrop{background:rgba(0,0,0,.7)}
dialog.manage-look img,dialog.manage-look video{width:100%;max-height:70vh;object-fit:contain;background:#000;border-radius:10px}
@media (max-width:560px){.manage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manage-tools{grid-template-columns:1fr}}
.manage-tile .cap:has(.when){display:grid;gap:0}

/* Step 3, Keep or pass (choose-step.js) */
.showgrid[data-step="choose"] > [data-panel="choose"]{grid-area:content}
.keep-go{gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.keep-counts{margin:0;font-variant-numeric:tabular-nums}
.keep-said-box{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0;padding:10px 14px;border:1px solid var(--accent);border-radius:14px}
.keep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:10px}
.keep-tile{display:grid;gap:6px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--glass-strong,rgba(14,14,16,.6))}
.keep-filterrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
/* Loved: green; not for them: red (the review of 27 Oct) */
.keep-tile.kept{border:2px solid var(--yes);padding:7px}
.keep-tile.passed{border:2px solid var(--no);padding:7px}
.keep-tile.passed .pic{opacity:.5}
.keep-tile .pic{all:unset;position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000;cursor:zoom-in}
.keep-tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.keep-tile .pic .tag{position:absolute;left:6px;bottom:6px;padding:1px 8px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);font-size:.72rem}
.keep-tile .pic .tag.map{left:auto;right:6px}
.keep-tile .nm{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The thumbs up and down are the one-by-one viewer's alone (the user, 29 Oct); the grid keeps its ✕ and ♥ under each picture */
.keep-tile .vote{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.keep-tile .vote .btn{font-size:1.05rem}
.keep-tile .vote .yes[aria-pressed=true]{background:var(--yes);border-color:var(--yes);color:#fff}
.keep-tile .vote .nope[aria-pressed=true]{background:var(--no);border-color:var(--no);color:#0e0e10}
.thumb{display:inline-flex;line-height:0}
.thumb svg{display:block}
.thumb.down svg{transform:rotate(180deg)}
.viewer{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:rgba(10,10,12,.97)}
.viewer .v-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.viewer .v-top .v-in{color:var(--accent);flex:1;font-size:.95rem}
.viewer .v-stage{position:relative;min-height:0;display:grid;place-items:center;border-radius:14px;overflow:hidden;background:#000}
.viewer .v-stage img,.viewer .v-stage video{width:100%;height:100%;object-fit:contain;display:block}
.viewer .v-note{position:absolute;left:12px;bottom:12px;margin:0;padding:6px 14px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);font-size:.88rem}
/* The viewer's thumbs lie over the picture's foot, the arrows between them (the review of 28 Oct): see-through until pressed */
.viewer .v-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:-82px;padding:0 10px 8px;position:relative;z-index:2;pointer-events:none}
.viewer .v-bar .btn{pointer-events:auto}
.viewer .v-bar .v-no{order:1}.viewer .v-bar .v-arrow:first-child{order:2}.viewer .v-bar .v-arrow:last-child{order:3}.viewer .v-bar .v-yes{order:4}
.viewer .v-bar .v-yes,.viewer .v-bar .v-no{width:64px;height:64px;min-width:0;min-height:0;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(10,10,12,.5);border:2px solid rgba(255,255,255,.8);color:#fff;opacity:.9;backdrop-filter:blur(3px)}
.viewer .v-bar .v-yes .thumb svg,.viewer .v-bar .v-no .thumb svg{width:32px;height:32px}
.viewer .v-yes:hover,.viewer .v-no:hover{opacity:1}
.viewer .v-yes[aria-pressed=true]{background:var(--yes);border-color:var(--yes);color:#fff;opacity:1}
.viewer .v-no[aria-pressed=true]{background:var(--no);border-color:var(--no);color:#fff;opacity:1}
.viewer .v-bar .v-arrow{width:44px;height:44px;min-width:0;min-height:0;padding:0;border-radius:50%;background:rgba(10,10,12,.45);border:1px solid rgba(255,255,255,.45);color:#fff;font-size:1.3rem;opacity:.85}
.viewer .v-more{display:flex;justify-content:center;gap:8px}
body.viewing{overflow:hidden}

/* One picture over several moments (app.js spanTo): how long it lasts under it; carrying on, drawn as the same picture. */
.col > .lasts{display:grid;gap:4px;margin:6px 0;padding:8px 10px;border:1px dashed var(--accent);border-radius:10px;font-size:.85rem;color:var(--paper-dim)}
.col > .lasts select{flex:1;min-width:0;min-height:32px;font-size:.8125rem}
.clip.cont{border:2px dashed var(--accent)}
.clip.cont img{opacity:.55}
.clip.cont .carrychip{left:6px;right:6px;top:auto;bottom:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   Showengine.io, out of beta (20 Oct 2026): the parts the new look added (DESIGN.md)
   ============================================================ */

/* ---------- the top bar: the name, the places or the steps, the menu ---------- */
.topbar .brand{display:inline-flex;align-items:center;min-height:36px;padding:0 4px;background:none;border:0;color:inherit;cursor:pointer;border-radius:var(--r-pill)}
.topbar .brand:hover{color:#fff}
.brand .tld{color:var(--paper-dim);font-weight:400}
.topbar .brand .house{display:none}
@media (min-width:1300px){.topbar:not(.inshow) .brand .house{display:inline}}
.steps .long{display:none}
.steps .short{display:inline}
.places{display:flex;gap:2px;align-items:center}
.navtab{min-height:36px;padding:0 12px;border:0;border-radius:var(--r-pill);background:none;color:var(--paper-dim);font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.navtab:hover{color:var(--paper);background:var(--surface-2)}
.navtab[aria-current="page"]{color:var(--paper);background:var(--surface-2)}
.topbar .btn.sm{min-height:32px}
.account{position:relative;margin-left:6px}
.avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface-3);color:var(--paper);font-size:.75rem;font-weight:600;cursor:pointer;display:grid;place-items:center;padding:0;transition:border-color .15s}
.avatar:hover,.avatar[aria-expanded="true"]{border-color:var(--paper-dim)}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:grid;min-width:228px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:#1b1b1e;box-shadow:0 24px 60px -16px rgba(0,0,0,.85);animation:rise .18s var(--ease)}
.menu-who{display:grid;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.menu-who b{font-size:.875rem;font-weight:600}
.menu-who span{font-size:.75rem;color:var(--paper-dim);overflow:hidden;text-overflow:ellipsis}
.menu [role=menuitem]{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;background:none;color:var(--paper);font-size:.875rem;text-align:left;cursor:pointer}
.menu [role=menuitem]:hover,.menu [role=menuitem]:focus-visible{background:var(--surface-3);outline:none}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
@media (max-width:1200px){.topbar.inshow .brand{display:none}}
@media (max-width:700px){.places .navtab{padding:0 8px}.topbar .saved{display:none}}

/* ---------- a page's head: the title and its line, the main button at the right ---------- */
.pagehead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin:0 0 32px}
.pagehead h1{margin:0 0 6px}
.pagehead .lead{margin:0;max-width:68ch}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 4px}
.sechead h2{font-size:1.125rem}
.sechead .help{color:var(--paper-dim);font-size:.8125rem;flex:1 1 320px}
.home .examples{margin-top:56px}
.link.quiet{text-decoration:none;font-size:.75rem;padding:4px 6px}
.link.quiet:hover{color:var(--danger)}
.help{color:var(--paper-dim)}

/* ---------- help ---------- */
dialog:has(.helptext){max-width:640px}
.helptext p{font-size:.875rem;line-height:1.6;margin:0 0 12px;color:var(--paper-dim)}
.helptext b{color:var(--paper);font-weight:600}

/* ---------- step 4: the room's controls in one console ---------- */
.console{display:grid;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.console .transport{padding:0;border:0;background:none;border-radius:0}
.console-row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.ctlgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctl{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:500;color:var(--paper-dim)}
.ctl select{min-height:32px;font-size:.875rem}
@media (pointer:coarse){.ctl select{min-height:40px}}
.transport .hold .seg-big{gap:2px}
.transport .hold .seg-big button{min-height:32px;padding:0 10px;font-size:.8125rem;font-variant-numeric:tabular-nums}
.btn[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3)}
.tonebar,.logobar{padding:8px 12px;gap:8px;background:var(--surface)}
.tonebar .label,.logobar .label{font-size:.8125rem;font-weight:500}
.tonebar .tone-word{min-width:7.5em;font-size:.875rem;color:var(--paper)}
.tonebar .help,.logobar .help{font-size:.75rem}

/* ---------- the evening's moment on the room: a white ball, the part under it edged in brass ---------- */
.scrub-ball{background:var(--paper);border:3px solid #0e0e10;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 4px 14px rgba(0,0,0,.65);width:30px;height:30px;margin:-15px 0 0 -15px}
.scrub-rail{height:10px;border-radius:5px;background:rgba(14,14,16,.7);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 10px rgba(0,0,0,.6)}
.scrub-seg{background:rgba(236,236,232,.42);border-right-color:rgba(14,14,16,.9)}
.scrub-bubble{border-color:var(--line-strong);background:rgba(20,20,22,.96);font-size:.8125rem;border-radius:var(--r-md)}
.scrub-bubble b{font-size:.9375rem}
.scrub-bubble::after{border-top-color:rgba(20,20,22,.96)}
.col.scrub-at{outline:2px solid var(--accent)}

/* ---------- the room folded beside the questions: a slim tab at the right ---------- */
@media (min-width:901px){
  .showgrid.room-folded:not([data-step="room"]){grid-template-columns:minmax(0,1fr) 40px}
  .showgrid.room-folded:not([data-step="room"]) .roompeek{width:40px;min-height:0;height:auto;padding:14px 0;gap:10px;border-radius:var(--r-md);border-color:var(--line-strong);background:var(--surface);color:var(--paper-dim)}
  .showgrid.room-folded:not([data-step="room"]) .roompeek:hover{border-color:var(--paper-dim);background:var(--surface-2);color:var(--paper)}
  .showgrid.room-folded:not([data-step="room"]) .roompeek .ico{font-size:1rem}
  .showgrid.room-folded:not([data-step="room"]) .roompeek .lbl{font-size:.8125rem;letter-spacing:.02em}
  .showgrid.room-folded:not([data-step="room"]) .roompane{margin-bottom:0}
}

/* ---------- second pass ---------- */
/* The show's grid takes the page's width (in the page's column it would shrink to its content). */
.showgrid{width:100%}
.logobar .seg-big button,.sugseg button,.pal-sorts button,.lib-views button,.studio-views button{min-height:32px;padding:0 10px;font-size:.8125rem}
.sugseg button{min-width:0;border-color:var(--line);background:transparent;color:var(--paper-dim)}
.sugseg button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3);color:var(--paper)}
.sugseg .label{font-size:.8125rem}
.logoparts .chip{min-height:32px;padding:0 12px;font-size:.8125rem}
.texcard{border-width:1px}
.texcard[aria-pressed="true"]{box-shadow:0 0 0 1px var(--accent)}
.texcard .mark{width:26px;height:26px;font-size:.8rem;border-width:1.5px}
.texcard .txt b{font-size:.9375rem}
.texcard .sub{font-size:.8125rem}
.preset{padding:14px 16px;border-color:var(--line);background:var(--surface)}
.preset:hover{border-color:var(--line-strong);background:var(--surface-2)}
.preset b{font-size:1rem;font-weight:600}
.preset span{font-size:.8125rem}
.preset .len{color:var(--paper-dim);font-variant-numeric:tabular-nums}
.lib-drop.slim{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;min-height:0;padding:12px 14px;gap:10px 16px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface)}
.lib-drop.slim .what{color:var(--paper-dim);font-size:.875rem;flex:1 1 280px}
.lib-add > .help{font-size:.8125rem;margin:8px 2px 0}
.lib-add{margin-bottom:28px}

/* ---------- narrow screens, third pass ---------- */
.menu .phone-only{display:none}
@media (max-width:1100px){
  .picker .ph .seg-big button{min-height:32px;padding:0 10px;font-size:.8125rem}
  .picker .search{padding:8px 12px;font-size:.9375rem}
}
@media (max-width:600px){
  .topbar{gap:4px;padding:8px 12px}
  .steps button{padding:0 6px}
  .steps button:not([aria-current="step"]) .short{display:none}
  .topbar .undo .word,.topbar .invite{display:none}
  .menu .phone-only{display:block}
}
@media (max-width:600px){
  /* Outside a show: the name, Share preview and the menu on one line, the places under them. */
  .topbar:not(.inshow) .places{order:5;width:100%;overflow-x:auto}
  .topbar:not(.inshow) .brand{margin-right:0}
}

/* ---------- the Library's Look: the room first, or the file (manage.js look) ---------- */
dialog.manage-look{gap:12px;align-content:start}
.look-room{display:grid;gap:10px}
.manage-look .stage{max-height:62vh}
.look-ctl{padding-top:0;border-top:0}
.look-file{display:grid;gap:6px}

/* ---------- the front page's examples: two rows that scroll sideways ---------- */
.exrow{margin-top:24px}
.exrow .sechead h3{font-size:.9375rem;display:flex;align-items:baseline;gap:8px}
.exrow .sechead h3 .count{font-size:.75rem;font-weight:500;color:var(--paper-dim);font-variant-numeric:tabular-nums}
.shows.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);grid-template-columns:none;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;margin-top:12px}
.shows.scroller .showcard{scroll-snap-align:start}

/* ============================================================
   The apps (20 Oct 2026): the drawer, the apps button, the Environment Studio and its apps
   ============================================================ */

/* ---------- the top bar: the app it is in, the apps button ---------- */
.topbar .appname{min-height:36px;padding:0 10px;margin-right:4px;border:0;border-radius:var(--r-pill);background:none;color:var(--paper);font-size:.9375rem;font-weight:500;cursor:pointer;white-space:nowrap}
.topbar .appname:hover{background:var(--surface-2)}
.topbar .brand + .appname{position:relative;padding-left:14px}
.topbar .brand + .appname::before{content:"";position:absolute;left:0;top:10px;bottom:10px;border-left:1px solid var(--line-strong)}
.appsbtn{min-width:36px;min-height:36px;padding:0}
.appicon{display:inline-grid;place-items:center;color:var(--paper)}
.appicon svg{width:24px;height:24px}
.appicon.sm svg{width:18px;height:18px}
.appicon.lg svg{width:30px;height:30px}
.appsmenu{min-width:320px}
.appsmenu .appitem{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:10px}
.appsmenu .appitem .txt{display:grid;gap:2px}
.appsmenu .appitem b{font-size:.875rem;font-weight:600}
.appsmenu .appitem span span{font-size:.75rem;color:var(--paper-dim);line-height:1.4;white-space:normal}

/* ---------- the drawer ---------- */
.drawer{max-width:1120px}
.drawerhead{margin:24px 0 28px}
.drawerhead .kicker{font-size:.9375rem;margin:0 0 6px}
.drawerhead h1{font-size:clamp(2rem,4vw,2.75rem)}
.drawer-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.drawertile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:200px;padding:20px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--paper);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.drawertile.big{min-height:300px}
.drawertile:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.drawertile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.drawertile .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .3s,transform .6s var(--ease)}
.drawertile:hover .bg{opacity:.7;transform:scale(1.02)}
.drawertile.pictured::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.92) 8%,rgba(10,10,12,.35) 55%,rgba(10,10,12,.15))}
.drawertile .top,.drawertile .bottom{position:relative;z-index:1}
.drawertile .top .appicon{width:44px;height:44px;border-radius:12px;background:rgba(14,14,16,.6);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.drawertile .bottom{display:grid;gap:6px;max-width:46ch}
.drawertile .nm{font-size:1.375rem;font-weight:500;letter-spacing:-.015em}
.drawertile.big .nm{font-size:1.75rem;font-weight:400;letter-spacing:-.025em}
.drawertile .ln{font-size:.875rem;color:rgba(236,236,232,.82);line-height:1.45}
.drawertile .mt{font-size:.75rem;color:var(--paper-dim);font-variant-numeric:tabular-nums}
@media (max-width:760px){.drawer-apps{grid-template-columns:1fr}.drawertile.big{min-height:220px}}

/* ---------- the Environment Studio: its apps ---------- */
.envhome .appgroup{margin:0 0 40px}
.apptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px}
.apptile{display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;align-content:start;min-height:190px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);color:var(--paper);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.apptile:hover{border-color:var(--line-strong);background:var(--surface-2)}
.apptile .appicon{justify-content:start;color:var(--paper)}
.apptile .nm{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.apptile .ln{font-size:.8125rem;color:var(--paper-dim);line-height:1.5}
.apptile .mt{font-size:.75rem;color:var(--paper-dim);padding-top:10px;border-top:1px solid var(--line)}
.apptile.venue .appicon{color:var(--paper-dim)}
.lately-card .noposter{display:block;width:100%;aspect-ratio:16/9;background:var(--surface-2)}

/* ---------- an app's page ---------- */
.crumb{display:inline-flex;align-items:center;min-height:32px;padding:0 8px;margin:0 0 10px -8px;border:0;border-radius:var(--r-pill);background:none;color:var(--paper-dim);font-size:.8125rem;cursor:pointer}
.crumb:hover{color:var(--paper);background:var(--surface-2)}
.apptitle{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.apptitle h1{margin:0}
.envapp-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;align-items:start}
@media (max-width:900px){.envapp-grid{grid-template-columns:1fr}}
.envapp .stack{display:grid;gap:12px}
.makeform{display:grid;gap:4px}
.makeform textarea{min-height:150px}
.makeform .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.makeform .two{grid-template-columns:1fr}}
.howbox{padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:transparent}
.howbox h2{font-size:1rem;font-weight:600;margin:0 0 10px}
.howbox h2:not(:first-child){margin-top:20px}
.howbox p{font-size:.875rem;color:var(--paper-dim);margin:0 0 10px;line-height:1.55}
.howto{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.howto li{font-size:.875rem;color:var(--paper-dim);line-height:1.55}
.howto b{color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}
.envapp .lately{margin-top:40px}
.movegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;padding:1px 5px;border-radius:5px;background:var(--surface-2)}
pre.code{margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink);color:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;white-space:pre-wrap}

/* ---------- on the venue PC ---------- */
.venuebox{display:grid;gap:12px}
.venue-status{display:flex;align-items:center;gap:4px;margin:0;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);font-size:.875rem}
.venue-status .dot{width:8px;height:8px;border-radius:50%;background:var(--paper-dim)}
.venue-status.on .dot{background:#7fc98f}
.venue-status.off .dot{background:var(--danger)}

/* ---------- the room on its own ---------- */
.roomapp-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.roomapp-room{position:sticky;top:calc(var(--topbar,57px) + 12px);display:grid;gap:10px}
.roomapp-room .stage .now{top:12px;bottom:auto}
.roomapp-room .stage:fullscreen{border-radius:0;border:0}
.roomapp-pick{position:sticky;top:calc(var(--topbar,57px) + 12px)}
.roomapp-pick .ph{display:grid;gap:10px}
.roomapp-pick .ph .seg-big{margin-top:0}
.roomapp-pick .ph .note{margin:0}
.roomgrid{overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:112px;gap:8px;align-content:start;flex:1 1 auto;min-height:200px}
.roomapp-pick .more{margin:6px 10px 12px}
.console .grow{flex:1}
@media (max-width:1000px){.roomapp-grid{grid-template-columns:1fr}.roomapp-room,.roomapp-pick{position:static}.roomapp-pick{max-height:none}.roomgrid{max-height:60vh}}

/* ---------- a face-by-face draft on its page ---------- */
.studio-draft{display:grid;gap:10px;padding:14px 16px;border:1px solid rgba(201,174,124,.45);border-radius:var(--r-md);background:var(--accent-tint)}
.studio-draft p{margin:0;font-size:.875rem;line-height:1.5}
.studio-draft .note{display:inline-flex;align-items:center;gap:4px;margin:0}
.studio-back{margin-bottom:8px}

.howbox > .note{margin-top:14px}
.roomapp-room .console-row{flex-wrap:nowrap}
.roomapp-room .console-row .btn{white-space:nowrap}
@media (max-width:1200px){.roomapp-room .console-row{flex-wrap:wrap}}

/* ---------- the people in the room, on or off: a quiet button at the foot of every room (room.js) ---------- */
.stage .room-people,.room .room-people,#room .room-people{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);background:rgba(14,14,16,.5);color:rgba(236,236,232,.75);font:inherit;font-size:.75rem;font-weight:500;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.75;transition:opacity .15s,background .15s}
.room-people:hover{opacity:1;background:rgba(14,14,16,.7)}
.room-people[aria-pressed="true"]{color:var(--paper)}
.room-people[aria-pressed="false"] span{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}
.showgrid[data-step="room"] .stage .room-people{bottom:44px}

/* ---------- the one-by-one viewer: the picture in the room, or flat ---------- */
.viewer .v-stage{display:block}
.viewer .v-room{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:14px}
.viewer .v-room iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.viewer .v-flat{position:absolute;inset:0;display:grid;place-items:center}
.viewer .v-top .v-how{margin-left:auto}
.viewer .v-top .v-how button{min-height:30px;padding:0 10px;font-size:.8125rem}
.viewer .v-top .btn.quiet{margin-left:0}

/* Reference pictures a make is drawn from (Wall by wall, Face by face): a slim drop bar and the chosen ones. */
.field.refs>span{display:block;margin-bottom:6px}
.refs-drop .btn.sm{pointer-events:none}
.refs-drop button.btn.sm{pointer-events:auto}
.refs-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.refs-row[hidden]{display:none}
.refs-row .ref{position:relative;width:96px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000}
.refs-row .ref img{width:100%;height:100%;object-fit:cover;display:block}
.refs-row .ref .x{position:absolute;top:3px;right:3px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:var(--paper);font-size:.75rem;line-height:20px;cursor:pointer}
.refs-row .ref .x:hover{background:var(--accent);color:#000}
dialog.refpick{width:min(960px,calc(100vw - 32px));max-width:none;grid-template-rows:auto auto minmax(0,1fr)}
dialog.refpick .refgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:110px;max-height:60vh;padding:0}
dialog.refpick .refgrid .pic{position:relative;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#000;cursor:pointer;text-align:left}
dialog.refpick .refgrid .pic img{width:100%;height:100%;object-fit:cover;display:block}
dialog.refpick .refgrid .pic .cap{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:.75rem;color:var(--paper);background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
dialog.refpick .refgrid .pic:hover,dialog.refpick .refgrid .pic:focus-visible{border-color:var(--accent)}
dialog.refpick .refgrid .more{grid-column:1/-1;justify-self:start}

/* Show Builder: a show built from Show Wizard says so at the top of the client step (app.js wizardLine). */
.wizardline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 20px;padding:12px 14px;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--surface-2);color:var(--paper-dim)}
.wizardline b{color:var(--paper);font-weight:600}
.drawer-switch{margin-top:18px}

/* The evening: one of the client's top three moments (Show Wizard), with the reaction they want, under its row. */
.part .toggle.star{color:var(--accent)}
.part .want{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:2px 0 2px 46px}
.part .want span{color:var(--accent);font-size:.875rem;white-space:nowrap}
.part .want .big-input{flex:1 1 260px;min-height:36px;padding:6px 10px}

/* ---------- The site's editor (site-edit.js): the bar while editing, what the pointer is on, its boxes;
   an app's icon given a picture ---------- */
.appicon.pictured{overflow:hidden}
.appicon.pictured img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.appicon:not(.lg):not(.sm).pictured{width:24px;height:24px}
.appicon.sm.pictured{width:18px;height:18px;border-radius:4px}
.appicon.lg.pictured{width:30px;height:30px;border-radius:7px}
.drawertile .top .appicon.pictured{width:44px;height:44px}
.apptile .appicon.pictured{width:28px;height:28px;border-radius:7px}
.site-editbar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);padding:10px 12px 10px 18px;border:1px solid var(--accent);border-radius:var(--r-pill);background:rgba(14,14,16,.94);color:var(--paper);box-shadow:0 14px 40px -12px #000;font-size:.875rem}
.site-editbar .what{line-height:1.35}
body.site-editing .site-lit{outline:2px dashed var(--accent);outline-offset:3px;cursor:text}
body.site-editing [data-icon].site-lit,body.site-editing .drawertile.site-lit{cursor:pointer}
dialog.site-dialog{max-width:560px}
dialog.site-dialog textarea{width:100%;margin:0 0 16px;resize:vertical}
dialog.site-dialog q{color:var(--paper)}
dialog.site-dialog .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
dialog.site-dialog label.btn{position:relative}
.site-pic{display:block;max-width:100%;max-height:220px;margin:0 0 16px;border-radius:var(--r-md);border:1px solid var(--line)}
.site-pic.icon{width:88px;height:88px;object-fit:cover}

/* A video of the room being made (public/js/room-video.js): a panel above the toasts, how far, Stop. */
.room-video{position:fixed;right:16px;bottom:16px;z-index:79;display:grid;gap:8px;width:min(360px,calc(100vw - 32px));padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface,#16161a);color:var(--paper);box-shadow:0 18px 50px -12px rgba(0,0,0,.7);font-size:.875rem}
.room-video-row{display:flex;align-items:center;gap:10px}
.room-video-row span:nth-child(2){flex:1}
.room-video-bar{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.room-video-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.room-video-note{color:var(--paper-dim);font-size:.8125rem}

/* Where to stand: buttons over the room, top right (the review of 27 Oct); the space bar goes back to the chosen one */
.room-views{position:absolute;z-index:3;top:10px;right:10px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:calc(100% - 20px);pointer-events:none}
.room-views button{pointer-events:auto;min-height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(14,14,16,.5);color:rgba(236,236,232,.8);font:inherit;font-size:.75rem;font-weight:500;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.room-views button:hover{background:rgba(14,14,16,.72);color:#ecece8}
.room-views button[aria-pressed="true"]{border-color:rgba(201,174,124,.8);color:#ecece8}
@media (max-width:520px){.room-views button{min-height:26px;padding:0 8px;font-size:.6875rem}}

/* The corner grip that sizes the room (room.js makeResizable) */
.room-grip{position:absolute;right:0;bottom:0;z-index:4;width:24px;height:24px;padding:0;border:0;border-top-left-radius:8px;background:rgba(14,14,16,.6);cursor:nwse-resize;touch-action:none;opacity:.7}
.room-grip::before{content:"";position:absolute;right:6px;bottom:6px;width:10px;height:10px;background:linear-gradient(135deg,transparent 0 44%,#a3a29c 44% 52%,transparent 52% 66%,#a3a29c 66% 74%,transparent 74%)}
.room-grip:hover,.room-grip:focus-visible{opacity:1;background:rgba(14,14,16,.88)}
body.room-sizing,body.room-sizing *{cursor:nwse-resize !important;user-select:none}
body.room-sizing iframe{pointer-events:none}
body.fill .stage{width:auto !important;height:auto !important;max-width:none !important}
body.fill .room-grip{display:none}

/* Typed times and lengths on the timeline (the review of 27 Oct), and reading their own timeline in */
.clockbox,.part input.len{width:100%;min-width:0;min-height:36px;padding:0 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--paper);font:inherit;font-variant-numeric:tabular-nums}
.doors .clockbox{width:120px}
.part .t .clockbox{font-size:1rem;font-weight:500}
.part input.len{width:118px}
.clockbox:focus,.part input.len:focus{outline:2px solid var(--accent);outline-offset:1px}
.doors .runsheet{margin-left:auto}
.runsheet.busy{pointer-events:none;opacity:.8}
.part .t .clockbox{max-width:140px}

/* "Set up this scene" (app.js openSceneSetup): beside the room, for one picture of the timeline */
.scenesetup{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);max-height:min(70vh,640px);overflow:auto}
.scenesetup .ss-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scenesetup h3{margin:0;font-size:1rem;font-weight:600}
.scenesetup .ss-name{margin:0;font-weight:500}
.scenesetup .ss-name small{color:var(--paper-dim);font-weight:400}
.scenesetup .ss-tags{margin:0;font-size:.8125rem;color:var(--paper-dim)}
.scenesetup .field{display:grid;gap:6px}
.scenesetup .field > span:first-child{font-size:.8125rem;color:var(--paper-dim)}
.scenesetup .ss-move{display:flex;align-items:center;gap:10px}
.scenesetup .ss-move input{flex:1}
.ss-ceil{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:10px;font-size:.8125rem;color:var(--paper-dim)}
.ss-ceil.has{border-style:solid;color:var(--paper)}
.ss-ceil.drop-ok{border-color:var(--accent);background:var(--accent-tint)}
.ss-ceil img{width:72px;height:44px;object-fit:cover;border-radius:6px}
.ss-ceil .x{margin-left:auto}
.clip .setchip{position:absolute;right:6px;top:6px;padding:0 6px;border-radius:6px;background:rgba(14,14,16,.78);font-size:.75rem}

/* The timeline's columns each scroll by themselves, the strip keeping its height (the review of 27 Oct) */
.col .clips{max-height:min(470px,52vh);overflow-y:auto;scrollbar-width:thin}
/* The Scenes grid in three sizes, the largest three across */
.keep-grid[data-size="s"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.keep-grid[data-size="m"]{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.keep-grid[data-size="l"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.keep-grid[data-size="l"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.coloruse{margin:4px 0 10px}

/* Their logo among the pictures, to drag onto a part (app.js logoAsset) */
.ph .logoasset{display:inline-flex;align-items:center;gap:8px;margin-top:8px;min-height:36px;padding:4px 10px 4px 4px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--paper);font:inherit;font-size:.8125rem;cursor:grab}
.ph .logoasset img{width:44px;height:28px;object-fit:contain;background:#0a0a0b;border-radius:5px}
.ph .logoasset.on{border-style:solid;border-color:var(--accent)}

/* The Workbench over the Builder (app.js openBench) */
.benchpop{position:fixed;inset:0;z-index:95;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--ink)}
.benchpop .benchbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line)}
.benchpop iframe{width:100%;height:100%;border:0}

/* Style Guide (envstudio.js): the guide's pictures (tapped: sent with the next concept), the concepts, the guides */
.sg-pics .ref{width:120px;height:90px;border-width:2px}
.sg-pics .ref.on{border-color:var(--accent)}
.sg-pics .ref .pick{display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.sg-pics .ref .pick img{opacity:.55;transition:opacity .15s}
.sg-pics .ref.on .pick img,.sg-pics .ref .pick:hover img{opacity:1}
.sg-concepts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:8px}
.sg-concept{display:grid;gap:6px;align-content:start;padding:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.sg-concept.on{border-color:var(--accent);background:rgba(201,174,124,.14)}
.sg-concept .pic{display:grid;place-items:center;aspect-ratio:2/1;border-radius:7px;background:#000;overflow:hidden;padding:4px;text-align:center}
.sg-concept .pic img{width:100%;height:100%;object-fit:contain;display:block}
.sg-concept .cap{font-size:.8125rem;color:var(--paper-dim);line-height:1.4}
.sg-concept .cap.words{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sg-concept .row{gap:6px}
.sg-list{display:grid;gap:10px}
.sg-card{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)}
.sg-card .nm{font-weight:600;font-size:1rem}
.sg-card .mt{flex:1 1 200px;color:var(--paper-dim);font-size:.875rem}
.sg-sent{margin:0 0 10px;padding-left:18px;font-size:.875rem}
.sg-sent li{margin:4px 0}

/* The Scenes step's head: its title, and "Send to client as link" at the top right (choose-step.js). */
.keep-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.keep-head h1{margin:0}
.keep-sent{display:grid;gap:12px;max-width:620px}
.keep-sent p{margin:0}

/* The Scenes step's Sort & filter panel (choose-step.js) */
.keep-sort{display:grid;gap:10px;padding:12px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
/* Settings (settings.js): the room beside its controls, place by place */
.settings .pane{display:grid;gap:12px}
.settings .pane h2{margin:0}
.settings .settings-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:18px;align-items:start}
@media (max-width:900px){.settings .settings-grid{grid-template-columns:1fr}}
.settings-controls{display:grid;gap:12px}
.settings .settings-stage{max-height:none}

/* The previz (previz.js): the mode bar, the stage (the room, or the file flat), the controls under it */
.previz{display:grid;gap:10px;min-width:0}
.previz-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.previz-stage{position:relative;min-width:0}
.previz-flat{display:grid;gap:6px;justify-items:center;min-height:200px;border-radius:var(--r-lg);overflow:hidden;background:#000;padding:8px}
.previz-flat img,.previz-flat video{max-width:100%;max-height:70vh;object-fit:contain;display:block}
.previz-flat .note{margin:0;color:var(--paper-dim)}
.previz-ctl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.previz-ctl .grow{flex:1}
.previz-tone{display:inline-flex;align-items:center;gap:6px}
.previz-hint{margin:0;min-height:1.2em;font-size:.8125rem;color:var(--paper-dim)}
.previz-stage:fullscreen{background:#000;display:grid;place-items:center}
.previz-stage:fullscreen .stage{width:100vw;height:100vh;max-height:none;aspect-ratio:auto;border-radius:0;border:0}
.previz-stage:fullscreen .previz-flat{width:100vw;height:100vh;max-height:none;border-radius:0}
.previz-stage:fullscreen .previz-flat img,.previz-stage:fullscreen .previz-flat video{max-height:100vh}

/* The previz inside the staff Scenes viewer: its bar and controls above the picture, the thumbs over the picture's foot */
.viewer .v-stage:has(.previz){display:grid;grid-template-rows:minmax(0,1fr);place-items:stretch;background:transparent;overflow:visible;border-radius:0}
.viewer .previz{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;min-height:0}
.viewer .previz-stage{border-radius:14px;overflow:hidden;background:#000}
.viewer .previz-bar{order:-2}
.viewer .previz-ctl{order:-1}
.viewer .previz-hint{display:none}
.viewer .previz-stage{min-height:0;display:grid}
.viewer .previz-room{width:100%;height:100%;max-height:none;aspect-ratio:auto;min-height:0}
.viewer .previz-flat{height:100%;max-height:none}
.viewer .previz-flat img,.viewer .previz-flat video{max-height:100%}
.manage-look .look-previz .stage{max-height:62vh}
.roomapp-now{margin:0;font-size:.9375rem;min-height:1.3em}
.roomapp-now .note{margin:0;display:inline}

/* ---------- the Library as a showroom (manage.js): the previz pinned, the pictures beside it ---------- */
.page.showroom{max-width:1640px}
.showroom .pagehead{margin-bottom:18px}
.showroom-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lib-drop.slim.tight{padding:0;border:0;background:none;min-height:0}
.lib-drop.slim.tight.over .btn{outline:2px solid var(--accent);outline-offset:2px}
.showroom-grid{display:grid;grid-template-columns:minmax(380px,56%) minmax(320px,1fr);gap:20px;align-items:start}
.showroom-room{position:sticky;top:calc(var(--topbar,57px) + 12px);display:grid;gap:8px;min-width:0}
.showroom-now{min-height:1.4em;font-size:.9375rem}
.showroom-now .note{margin:0;display:inline}
.showroom-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.showroom-actions .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.showroom-pick{min-width:0;display:grid;gap:8px;align-content:start}
.showroom-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.showroom-tools .search{flex:1 1 220px;min-width:0;margin:0}
.showroom .kinds{flex-wrap:wrap}
.showroom .manage-count{margin:0}
.showroom .manage-bar{margin:0}
.show-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.show-grid[data-size="s"]{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.show-grid[data-size="l"]{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.show-tile{position:relative;display:grid;gap:4px;min-width:0}
.show-tile .pic{all:unset;position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000;border:2px solid transparent;cursor:pointer}
.show-tile .pic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.show-tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.show-tile.now .pic{border-color:var(--paper);box-shadow:0 0 0 2px var(--paper)}
.show-tile .noposter{display:grid;place-items:center;height:100%;padding:8px;color:var(--paper-dim);font-size:.85rem;text-align:center}
.show-tile .tick{position:absolute;z-index:2;top:8px;left:8px;width:26px;height:26px;padding:0;border-radius:50%;display:grid;place-items:center;font:inherit;font-weight:700;line-height:1;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(14,14,16,.6);color:#fff;opacity:.6;transition:opacity .15s}
.show-tile:hover .tick,.show-tile .tick:focus-visible,.show-tile.on .tick{opacity:1}
.show-tile.on .tick{background:var(--accent);border-color:var(--accent);color:#0e0e10}
.show-tile.on .pic{outline:2px solid var(--accent);outline-offset:-2px}
.show-tile .tags{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.show-tile .tags span{padding:1px 7px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);font-size:.7rem}
.show-tile .cap{display:grid;gap:0;min-width:0;font-size:.85rem}
.show-tile .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-tile .when{color:var(--paper-dim);font-size:.78rem}
.show-grid .nothing{grid-column:1/-1}
/* ---------- the one Library grid (library-grid.js): lenses, chips, cards with their five surfaces and their menu ---------- */
.lib-lenses{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin-bottom:4px}
.lib-lenses button{all:unset;position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;cursor:pointer;color:var(--paper-dim);font-size:.9375rem;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.lib-lenses button:hover{color:var(--paper)}
.lib-lenses button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.lib-lenses button[aria-selected="true"]{color:var(--paper);border-bottom-color:var(--accent)}
.lib-lenses .n{font-size:.75rem;font-weight:500;color:var(--paper-dim);padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-2);font-variant-numeric:tabular-nums}
.lib-lenses button[aria-selected="true"] .n{color:var(--paper)}
.lib-gridbox{display:grid;gap:8px;min-width:0}
.lib-chips{display:flex;flex-wrap:wrap;gap:6px}
.lib-chips[hidden]{display:none}
.lib-chips .chip{min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--paper-dim);cursor:pointer;font:inherit;font-size:.8125rem;font-weight:500;transition:background .15s,border-color .15s,color .15s}
.lib-chips .chip:hover{background:var(--surface-2);color:var(--paper)}
.lib-chips .chip.on{border-color:var(--accent);background:var(--surface-3);color:var(--paper)}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 10px}
.lib-grid[data-size="s"]{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.lib-grid[data-size="l"]{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.lib-grid .nothing{grid-column:1/-1}
.lib-card{position:relative;display:grid;gap:4px;min-width:0;border-radius:12px}
.lib-card:focus-within,.lib-card:hover{z-index:4}
.lib-card .pic{all:unset;position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000;border:2px solid transparent;cursor:pointer}
.lib-card .pic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lib-card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.lib-card.now .pic{border-color:var(--paper);box-shadow:0 0 0 2px var(--paper)}
.lib-card.on .pic{outline:2px solid var(--accent);outline-offset:-2px}
.lib-card .noposter{display:grid;place-items:center;height:100%;padding:8px;color:var(--paper-dim);font-size:.85rem;text-align:center}
.lib-card .tick{position:absolute;z-index:3;top:8px;left:8px;width:26px;height:26px;padding:0;border-radius:50%;display:grid;place-items:center;font:inherit;font-weight:700;line-height:1;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(14,14,16,.6);color:#fff;opacity:.6;transition:opacity .15s}
.lib-card:hover .tick,.lib-card .tick:focus-visible,.lib-card.on .tick{opacity:1}
.lib-card.on .tick{background:var(--accent);border-color:var(--accent);color:#0e0e10}
.lib-card .badges{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;pointer-events:none}
.lib-card .badges span{padding:1px 7px;border-radius:var(--r-pill);background:rgba(14,14,16,.82);font-size:.7rem;color:var(--paper)}
.lib-card .badges .v{color:var(--accent)}
/* Hovered a while, an environment shows its five surfaces laid out as they stand: back along the top, left · ceiling · right, the front below. */
.lib-card .lib-strip{position:absolute;z-index:2;left:2px;right:2px;top:2px;aspect-ratio:16/10;display:grid;grid-template-columns:1fr 1.4fr 1fr;grid-template-rows:18% 1fr 26%;gap:2px;padding:2px;box-sizing:border-box;border-radius:8px;background:#0e0e10;opacity:0;pointer-events:none;transition:opacity .2s .45s}
.lib-card:hover .lib-strip,.lib-card:focus-within .lib-strip{opacity:1}
.lib-card .lib-strip img{width:100%;height:100%;object-fit:cover;display:block;background:#1b1b1e;border-radius:3px}
.lib-card .lib-strip .back{grid-column:1/-1;grid-row:1}
.lib-card .lib-strip .left{grid-column:1;grid-row:2}
.lib-card .lib-strip .ceiling{grid-column:2;grid-row:2}
.lib-card .lib-strip .right{grid-column:3;grid-row:2}
.lib-card .lib-strip .front{grid-column:1/-1;grid-row:3}
.lib-card .cap{display:grid;gap:0;min-width:0;font-size:.85rem;padding:0 2px}
.lib-card .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-card .ln{color:var(--paper-dim);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
/* What a card can do, under it when it is hovered or focused, over whatever is below. */
.lib-card .lib-menu{position:absolute;z-index:5;left:0;right:0;top:100%;display:none;flex-wrap:wrap;gap:4px;padding:8px;margin-top:2px;border:1px solid var(--line);border-radius:10px;background:rgba(14,14,16,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.lib-card:hover .lib-menu:not(:empty),.lib-card:focus-within .lib-menu:not(:empty){display:flex}
.lib-card .lib-menu button{all:unset;cursor:pointer;min-height:28px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--paper);font-size:.8125rem;font-weight:500;line-height:1}
.lib-card .lib-menu button:hover{background:var(--surface-2)}
.lib-card .lib-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lib-card .lib-menu button.p{border-color:var(--accent);color:var(--accent)}
.lib-card .lib-menu button.p:hover{background:var(--accent);color:#0e0e10}
.showroom .manage-bar[hidden]{display:none}
.bench-sheet .lib-gridbox{margin-top:8px}
.bench-sheet .lib-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (hover:none){.lib-card .lib-strip{display:none}.lib-card .lib-menu:not(:empty){display:flex;position:static;margin-top:0;padding:0;border:0;background:none;box-shadow:none}}
/* A small menu under a button: the downloads, how the slideshow plays */
details.menu{position:relative}
details.menu > summary{list-style:none;cursor:pointer}
details.menu > summary::-webkit-details-marker{display:none}
details.menu[open] > summary{border-color:var(--accent)}
details.menu .menu-body{position:absolute;z-index:8;top:calc(100% + 6px);left:0;min-width:240px;display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(14,14,16,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 32px rgba(0,0,0,.45)}
details.menu .menu-body .btn{justify-content:flex-start;text-align:left}
details.menu .menu-body .field{margin:0}
details.menu .menu-body .note{margin:0;font-size:.8125rem;max-width:34ch}
details.menu .menu-body .check{display:flex;align-items:center;gap:6px;font-size:.875rem}
.play-menu .menu-body{min-width:300px}
@media (max-width:1000px){.showroom-grid{grid-template-columns:1fr}.showroom-room{position:static}}
/* DANO (envstudio.js danoPage, studio.js danoBox) */
.dano-build{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin:6px 0}
.dano-build summary{cursor:pointer;font-size:.9rem;font-weight:500;min-height:32px;display:flex;align-items:center}
.dano-parts{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px}
.dano-parts .wide{grid-column:1/-1}
@media (max-width:600px){.dano-parts{grid-template-columns:1fr}}
.dano-form select{width:100%}
.dano-slider{display:flex;align-items:center;gap:10px}
.dano-slider input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.dano-was{margin-left:8px;color:var(--paper-dim);font-size:.85rem}

/* The People page's tabs and its Clients tab (public/js/clients.js). */
.people-tabs{margin-top:18px;width:max-content}
.clients-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px}
.clients-head .lead{margin:0}
.clients-grid{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:24px;align-items:start;margin-top:18px}
.clients-list{display:grid;gap:8px;margin-top:12px;max-height:calc(100vh - 300px);overflow:auto;padding-right:4px}
.client-card{all:unset;box-sizing:border-box;display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass-strong);cursor:pointer}
.client-card:hover{border-color:var(--line-strong)}
.client-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.client-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.client-card .meta,.client-pane .meta{color:var(--paper-dim);font-size:.9rem}
.client-card .chip{justify-self:start;margin-top:4px}
.chip.done{border-color:var(--accent);color:var(--accent)}
.client-pane{display:grid;gap:14px}
.client-pane h2{margin:0}
.client-pane h3{margin:8px 0 0;font-size:1.05rem}
.client-form{display:grid;gap:10px}
.client-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.client-events{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.client-events li{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md)}
.client-events .ev-top{display:flex;justify-content:space-between;gap:12px;align-items:start;flex-wrap:wrap}
.client-events .ev-stage{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.client-events .ev-move{display:flex;gap:8px;align-items:center;color:var(--paper-dim);font-size:.9rem}
@media (max-width:860px){.clients-grid{grid-template-columns:1fr}.client-two{grid-template-columns:1fr}.clients-list{max-height:none}}

/* The World generator (envstudio.js worldsPage, worldPage). */
.world-progress{display:grid;gap:4px}
.world-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.world-bar span{display:block;height:100%;background:var(--accent);transition:width .6s}
.worlds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px}
.world-card{display:grid;grid-template-rows:auto 1fr;text-align:left;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);color:inherit;cursor:pointer;overflow:hidden}
.world-card:hover{border-color:var(--accent)}
.world-card img,.world-noimg{width:100%;aspect-ratio:2/1;object-fit:cover;display:grid;place-items:center;background:#101914}
.world-cap{display:grid;gap:4px;padding:10px 12px}
.world{display:grid;gap:8px}
.world-frame{display:block;width:100%;height:min(82vh,900px);border:1px solid var(--line);border-radius:var(--r-lg);background:#101914}
.world-films{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:14px}
.world-films figure{margin:0;display:grid;gap:6px}
.world-films video{width:100%;aspect-ratio:16/9;border-radius:var(--r-md);background:#000;border:1px solid var(--line)}
.world-films figcaption{color:var(--paper-dim);font-size:.9rem}
.world-room{min-height:420px}
.world-details summary{cursor:pointer;font-weight:600}
.world-facts{border-collapse:collapse;margin:10px 0}
.world-facts th{text-align:left;vertical-align:top;padding:4px 14px 4px 0;color:var(--paper-dim);font-weight:500;white-space:nowrap}
.world-facts td{padding:4px 0}
/* The versions of a whole map (studio.js versionsBox) */
.versions{margin-top:14px}
.version-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px}
.version{flex:0 0 auto;width:112px;display:grid;gap:4px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--paper);cursor:pointer;text-align:left}
.version:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-2)}
.version.current{border-color:var(--accent);background:var(--accent-tint);cursor:default}
.version:disabled:not(.current){opacity:.55;cursor:default}
.version img,.version .noposter{width:100%;aspect-ratio:9/4;object-fit:cover;border-radius:6px;background:var(--surface-2)}
.version .vn{font-weight:600;font-size:.9rem}
.version .when{font-size:.75rem;color:var(--paper-dim)}
/* Collage (studio.js collageBox): faces of other maps for one wall */
.collage-tools{display:grid;gap:8px;margin-bottom:8px}
.face-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:min(70vh,760px);overflow-y:auto;padding:2px}
.face-grid.file{max-height:none;margin-bottom:8px}
.face-tile{display:grid;gap:3px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--paper);cursor:pointer;text-align:left;align-content:start}
.face-tile:hover:not(:disabled){border-color:var(--accent);background:var(--surface-2)}
.face-tile:disabled{opacity:.55;cursor:default}
.face-tile img{width:100%;object-fit:cover;border-radius:4px;background:var(--surface-2)}
.face-tile.left img,.face-tile.right img{aspect-ratio:4000/940}
.face-tile.front img{aspect-ratio:2700/1200}
.face-tile.back img{aspect-ratio:2700/600}
.face-tile.ceiling img{aspect-ratio:2700/4000}
.face-tile .name{font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.face-tile .for{font-size:.75rem;color:var(--paper-dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.face-tile .chip.dim,.studio-take .chip.borrowed{opacity:.8}
.studio-take .chip.borrowed{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.face-tile.missing img{visibility:hidden}
.face-tile.missing .name::after{content:' (its picture is not here)';font-weight:400;color:var(--paper-dim)}