/* WEAVRA Moodboard Generator V1. Square corners, Helvetica Neue, tokens from tokens.css, one acid green touch for active states.
   The sheet itself is a print surface (white or paper, black type) like the A4 preview in app.css, whatever the page theme. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;border-radius:0}
[hidden]{display:none !important}

/* type */
.label{font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);line-height:1.4}
.label b{color:var(--ink);font-weight:700;margin-inline-start:6px}
.title{font-size:26px;line-height:1.05;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase}
.sub{font-size:13px;color:var(--mute);overflow-wrap:anywhere;line-height:1.5}
.sub a{color:var(--ink)}

/* header, the same bar as the app */
.wrap{padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto;width:100%}
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.wm{display:inline-flex;align-items:center;color:var(--ink);height:12px;text-decoration:none}
.wm svg{height:100%;width:auto;display:block}
.top-r{display:flex;align-items:center;gap:10px}
.back{text-decoration:none;font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);white-space:nowrap}
.back:hover{color:var(--ink)}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--ink);background:transparent}
.icon-btn:hover{border-color:var(--acc)}
.icon-btn svg{width:16px;height:16px;display:block}

/* page */
main{padding-block:20px 60px}
.mb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.mb-head .label{display:block;margin-bottom:6px}
.status{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:10px;min-height:20px}
.status:empty{display:none}
.status.loading::before{content:"";width:8px;height:8px;background:var(--acc);flex:none;animation:blink 1s infinite}
.status.error{color:var(--ink)}
@keyframes blink{50%{opacity:.2}}
.mb-grid{display:flex;flex-direction:column;gap:24px}

/* the sheet: 1000 x 707 units, --u = one unit in px (set by the script from the measured width) */
.stage{min-width:0}
.sheet{--u:.358px;position:relative;isolation:isolate;width:100%;aspect-ratio:1000/707;background:#fff;color:#000;border:1px solid var(--line);overflow:hidden;user-select:none;-webkit-user-select:none;outline:none}
.sheet[data-ground="paper"]{background:#f2f2f2}
.sheet:focus-visible{border-color:var(--acc)}
.sheet-hdr{z-index:5000;position:absolute;left:calc(var(--u) * 40);right:calc(var(--u) * 40);top:0;height:calc(var(--u) * 52);display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u) * 20);padding-bottom:calc(var(--u) * 12);border-bottom:calc(max(.5px, var(--u) * .6)) solid #e6e6e6;pointer-events:none}
.sheet-hdr .kicker{font-size:calc(var(--u) * 8.3);letter-spacing:calc(var(--u) * 1.9);text-transform:uppercase;font-weight:700;white-space:nowrap;line-height:1}
.sheet-hdr .meta{font-size:calc(var(--u) * 8.3);letter-spacing:calc(var(--u) * 1.4);text-transform:uppercase;font-weight:400;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;max-width:60%}
.canvas{position:absolute;inset:0;touch-action:none}
.sheet-ftr{z-index:5000;position:absolute;left:calc(var(--u) * 40);right:calc(var(--u) * 40);bottom:0;height:calc(var(--u) * 62);border-top:calc(max(.5px, var(--u) * .6)) solid #e6e6e6;padding-top:calc(var(--u) * 10);pointer-events:none;display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.ftr-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 20);height:calc(var(--u) * 12);margin-bottom:calc(var(--u) * 6)}
.ftr-wm{display:inline-flex;height:calc(var(--u) * 10.7);color:#000}
.ftr-wm svg{height:100%;width:auto;display:block}
.ftr-meta{font-size:calc(var(--u) * 8.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;max-width:60%}
.ftr-disc{font-size:calc(var(--u) * 6.6);line-height:1.25;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* items */
.item{position:absolute;touch-action:none;cursor:grab;outline:0 solid transparent}
.item:active{cursor:grabbing}
.item.on{outline:calc(max(2px, var(--u) * 2)) solid var(--acc);outline-offset:0;z-index:1000 !important}
.item .img{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;background:#f2f2f2}
.sheet[data-ground="paper"] .item .img{background:#e6e6e6}
.item.fabric.cap .img{bottom:calc(var(--u) * 24)}
.item .img img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.item .img .missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 4);padding:calc(var(--u) * 8);text-align:center;color:#8c8c8c}
.item .img .missing b{font-size:calc(var(--u) * 8.3);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;line-height:1.15;overflow-wrap:anywhere}
.item .img .missing span{font-size:calc(var(--u) * 7)}
.item .caption{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 24);display:flex;align-items:flex-end;padding-bottom:calc(var(--u) * 5);font-size:calc(var(--u) * 7.4);letter-spacing:calc(var(--u) * 1.05);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;color:#000;pointer-events:none}
.item.text{cursor:grab}
.item.text .txt{font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;overflow:hidden;height:100%;overflow-wrap:anywhere;white-space:pre-line;color:#000}
.item.text .txt:empty::before{content:"Title";color:#8c8c8c}
.item.crop{cursor:move}
.item.crop .img{outline:calc(max(2px, var(--u) * 2)) dashed var(--acc);outline-offset:calc(var(--u) * -2)}
.item .flag{position:absolute;left:0;top:0;background:var(--acc);color:var(--accink);font-size:calc(max(9px, var(--u) * 8));letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:calc(max(3px, var(--u) * 3)) calc(max(6px, var(--u) * 6));line-height:1;pointer-events:none;display:none}
.item.crop .flag{display:block}
.handle{position:absolute;right:calc(max(-8px, var(--u) * -8));bottom:calc(max(-8px, var(--u) * -8));width:calc(max(16px, var(--u) * 16));height:calc(max(16px, var(--u) * 16));background:#000;border:2px solid #fff;cursor:nwse-resize;display:none;touch-action:none}
.item.on:not(.crop) .handle{display:block}
.slot{position:absolute;border:calc(max(1px, var(--u) * 1)) dashed #8c8c8c;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--u) * 10);color:#8c8c8c;font-size:calc(var(--u) * 8.3);letter-spacing:calc(var(--u) * 1.4);text-transform:uppercase;font-weight:500;line-height:1.3;cursor:pointer;background:transparent}
.slot:hover{border-color:#000;color:#000}

/* item bar and hint */
.itembar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:40px;flex-wrap:wrap}
.itembar-btns{display:flex;gap:6px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--mute);margin-top:12px;line-height:1.5}

/* rail */
.rail{min-width:0}
.block{padding-block:16px;border-top:1px solid var(--line)}
.block.first{border-top:0;padding-top:0}
.block > .label{margin-bottom:10px;display:block}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.block-head .label{margin-bottom:0}
.block .sub{margin-top:8px}
.seg{display:flex;border:1px solid var(--line)}
.seg button{flex:1;height:40px;font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);border-inline-start:1px solid var(--line);white-space:nowrap;padding:0 8px;overflow:hidden;text-overflow:ellipsis}
.seg button:first-child{border-inline-start:0}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg button:hover:not(.on){color:var(--ink)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.field:last-child{margin-bottom:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.input{height:48px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:0 14px;font-size:16px;border-radius:0;outline:none;width:100%;min-width:0;text-align:start}
.input:focus{border-color:var(--ink)}
.input::placeholder{color:var(--mute);opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 14px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);color:var(--accink);border-color:var(--acc)}
.chip:disabled{color:var(--mute);border-color:var(--line);pointer-events:none}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-size:12px;color:var(--mute);cursor:pointer;white-space:nowrap}
.linkbtn:hover{color:var(--ink)}
.filebtn{position:relative;overflow:hidden;display:inline-block}
.filebtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* trays: thumbnails to tick, the acid green marks what is on the board */
.tray{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tray:empty{display:none}
.thumb{position:relative;aspect-ratio:1;border:1px solid var(--line);background:var(--card);padding:0;overflow:hidden;display:block;width:100%}
.thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.thumb:hover{border-color:var(--acc)}
.thumb.on{outline:2px solid var(--acc);outline-offset:-2px;border-color:var(--acc)}
.thumb.on::after{content:"";position:absolute;top:4px;inset-inline-end:4px;width:10px;height:10px;background:var(--acc)}
.thumb .n{position:absolute;left:0;right:0;bottom:0;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:3px 4px;background:var(--bg);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;opacity:.92}
.thumb.off{opacity:.45}
.thumb .x{position:absolute;top:0;inset-inline-end:0;width:24px;height:24px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}

/* buttons: one vocabulary */
.btn{height:var(--btn-h);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;width:100%;border:1px solid var(--btn);background:var(--btn);color:var(--btnink);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:transparent;border-color:var(--btn);color:var(--ink)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.outline:hover{background:var(--btn);border-color:var(--btn);color:var(--btnink)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--btn-off-bg,var(--card));border-color:var(--btn-off-line,var(--line));color:var(--btn-off-ink,var(--mute));pointer-events:none}
.actions{display:flex;flex-direction:column;gap:10px}
.actions .sub{margin-top:0}
.actions .sub:empty{display:none}

/* toast */
.toast{position:fixed;left:var(--gutter);right:var(--gutter);bottom:24px;z-index:30;background:var(--ink);color:var(--bg);padding:14px 16px;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:none}

/* tablet */
@media (min-width:820px){
  :root{--gutter:32px}
  .title{font-size:34px}
  main{padding-block:28px 60px}
  .tray{grid-template-columns:repeat(8,1fr)}
  .toast{left:auto;right:var(--gutter);min-width:280px}
}
/* desktop: the sheet at left, the rail at right, free composition */
@media (min-width:1100px){
  .mb-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
  .rail{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:thin;padding-inline-end:4px}
  .tray{grid-template-columns:repeat(5,1fr)}
  .btn{width:100%}
}
@media (min-width:1440px){
  :root{--gutter:48px}
  .title{font-size:44px}
  .mb-grid{grid-template-columns:minmax(0,1fr) 380px;gap:64px}
  .tray{grid-template-columns:repeat(6,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}