/* Utilox workspace layout: tools left, the chosen tool in the middle, the shared library right. Colours come from .ux in style.css. */
.ws{background:var(--bg);color:var(--ink);font:400 16px/1.5 'DM Sans',sans-serif;min-height:100vh}
.ws [data-if]{display:inline-flex}
.ws[data-theme="dark"] .ws-theme [data-if="isLight"],.ws:not([data-theme="dark"]) .ws-theme [data-if="isDark"]{display:none}
.ws .ux-top{display:none}

.ws-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 20px;background:var(--band);color:var(--on-band)}
.ws-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 20px 'Lexend',sans-serif}
.ws-tag{font:500 12px 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border:.8px solid var(--band-line);border-radius:999px;color:var(--on-band-muted)}
.ws-topr{display:flex;align-items:center;gap:8px}
.ws-back{color:var(--on-band-muted);text-decoration:none;font:500 14px 'DM Sans',sans-serif;padding:8px 10px;border-radius:6px}
.ws-top .ws-ib{color:var(--on-band);border-color:var(--band-line)}

.ws-grid{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;min-height:calc(100vh - 60px)}
.ws-side{position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);overflow:auto;padding:16px 12px;border-right:.8px solid var(--border);background:var(--alt);box-sizing:border-box}
.ws-search{min-height:40px;margin-bottom:8px;font-size:15px}
.ws-sg{margin:14px 10px 4px;font:600 12px 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.ws-tl{display:block;padding:7px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font:500 15px 'DM Sans',sans-serif;transition:background-color .15s ease,scale .16s var(--ease-out)}

.ws-main{padding:28px clamp(16px,3vw,40px) 64px;min-width:0}
.ws-h1{margin:0 0 20px;font:500 clamp(28px,3vw,36px)/1.15 'Lexend',sans-serif;letter-spacing:-.01em}

.ws-libp{position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);overflow:auto;padding:16px;border-left:.8px solid var(--border);background:var(--alt);box-sizing:border-box;transition:background-color .2s ease}
.ws-libp.is-over{background:var(--ph);outline:2px dashed var(--line-strong);outline-offset:-8px}
.ws-libhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ws-libhead .ws-gh{margin:0}
.ws-count{font:400 13px 'DM Sans',sans-serif;color:var(--muted);margin-left:4px}
.ws-addbtn{height:36px;padding:0 14px;font-size:14px}
.ws-priv{margin:6px 0 14px;font-size:13px;color:var(--muted)}
.ws-empty{font-size:14px;color:var(--muted);padding:20px 12px;border:.8px dashed var(--field-line);border-radius:8px;text-align:center}
.ws-lib{display:flex;flex-direction:column;gap:8px}
.ws-fbody{display:flex;flex-direction:column;min-width:0}
.ws-fname{font:500 14px 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-fmeta{font-size:12px;color:var(--muted)}
.ws-facts{grid-column:1/-1;display:flex;gap:6px}
.ws-open{min-height:34px;padding:4px 8px;font-size:14px;flex:1}
.ws-ib{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:.8px solid var(--field-line);border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}

.ws-dropwrap{display:flex;flex-direction:column;gap:8px}
.ws-pick{align-self:flex-start;padding:6px 12px;border:.8px solid var(--field-line);border-radius:999px;background:var(--bg);color:var(--ink);font:500 14px 'DM Sans',sans-serif;cursor:pointer}

.ws-dialog{width:min(520px,calc(100vw - 32px));max-height:80vh;padding:20px;border:.8px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink)}
.ws-dialog::backdrop{background:rgba(20,0,0,.45);backdrop-filter:blur(4px)}
.ws-plist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-bottom:12px}
.ws-prow:has(input:checked){border-color:var(--line-strong);background:var(--alt)}

.ws-toast{position:fixed;left:50%;bottom:20px;translate:-50% 20px;opacity:0;pointer-events:none;padding:10px 16px;border-radius:8px;background:var(--btn);color:var(--btn-fg);font:500 14px 'DM Sans',sans-serif;transition:opacity .2s ease,translate .2s ease;max-width:calc(100vw - 32px)}
.ws-toast.is-on{opacity:1;translate:-50% 0}
.ws-toast.is-err{background:#9b1c1c;color:#fff}

/* home */
.ws-main.is-home{padding-top:20px}
.ws-main.is-home .ws-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ws-hero{position:relative;overflow:hidden;margin-bottom:32px;padding:clamp(24px,4vw,44px);border-radius:16px;background:var(--hero-grad);color:var(--on-band)}
.ws-eyebrow{margin:0 0 8px;font:500 13px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--on-band-muted)}
.ws-hh{margin:0 0 10px;font:500 clamp(30px,4vw,46px)/1.08 'Lexend',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.ws-lead{max-width:56ch;margin:0 0 24px;color:var(--on-band-muted);text-wrap:pretty}
.ws-hero .app-drop{background:var(--rib);border-color:var(--band-line);color:var(--on-band);backdrop-filter:blur(6px)}
.ws-hero .app-drop-s{color:var(--on-band-muted)}
.ws-suggest:not(:empty){margin-top:16px}
.ws-hg{margin-bottom:32px}
.ws-rowh{display:flex;align-items:baseline;justify-content:space-between}
.ws-gh{margin:0 0 12px;font:500 18px 'Lexend',sans-serif}
.ws-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ws-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:.8px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);text-decoration:none;transition-property:border-color,translate,box-shadow;transition-duration:.18s;transition-timing-function:var(--ease-out)}
.ws-cic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:10px;background:var(--alt);color:var(--ink)}
.ws-cn{font:500 16px 'DM Sans',sans-serif}
.ws-cd{font-size:14px;line-height:1.45;color:var(--muted)}
.ws-badge{margin-top:auto;padding-top:6px;font-size:12px;font-weight:500;color:var(--subtle)}
.ws-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ws-rc{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px;border:.8px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s ease}
.ws-rc .ws-th{margin-bottom:6px}

/* chips (suggestions, open-in) */
.ws-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ws-chipl{font-size:14px;color:var(--muted);margin-right:4px}
.ws-chip{height:36px;padding:0 14px;border:.8px solid var(--field-line);border-radius:999px;background:var(--bg);color:var(--ink);font:500 14px 'DM Sans',sans-serif;cursor:pointer}
.ws-chips.is-band .ws-chipl{color:var(--on-band-muted)}
.ws-chips.is-band .ws-chip{background:var(--glass-band);border-color:transparent;color:#270100}

/* thumbnails */
.ws-th{position:relative;display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:8px;background:var(--ph) center/cover no-repeat;color:var(--ink);overflow:hidden}
.ws-th.has-img .ws-thk{display:none}
.ws-th-pdf.has-img{background-color:#fff;background-size:contain}
.ws-th-pdf:not(.has-img){background-color:var(--btn);color:var(--btn-fg)}
.ws-thk{font:600 10px 'DM Sans',sans-serif;letter-spacing:.05em}
.ws-th.is-sm{width:40px;height:40px}
.ws-th.is-lg{width:100%;height:auto;aspect-ratio:4/3}
.ws-thbtn{padding:0;border:0;background:none;border-radius:8px;cursor:zoom-in}

/* library */
.ws-folders{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.ws-fchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:.8px solid var(--field-line);border-radius:999px;background:var(--bg);color:var(--ink);font:500 13px 'DM Sans',sans-serif;cursor:pointer;transition:background-color .15s ease,scale .16s var(--ease-out)}
.ws-fchip.is-on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.ws-fchip.is-over{outline:2px dashed var(--line-strong);outline-offset:2px;background:var(--ph)}
.ws-fchip.is-add{border-style:dashed;color:var(--muted)}
.ws-fic{display:inline-flex}
.ws-fic svg{width:14px;height:14px}
.ws-fcount{font-size:12px;opacity:.7}
.ws-flink{padding:0 4px;border:0;background:none;color:var(--muted);font:400 13px 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer}
.ws-file{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:10px;border:.8px solid var(--border);border-radius:10px;background:var(--bg);cursor:grab}
.ws-file.is-drag{opacity:.5}
.ws-ftag{align-self:flex-start;margin-top:3px;padding:1px 8px;border-radius:999px;background:var(--alt);font-size:11px;color:var(--muted)}
.ws-mv{position:relative}
.ws-mvsel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ws-mv:focus-within{outline:2px solid var(--line-strong);outline-offset:1px}

/* dialogs */
.ws-dtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ws-dh{margin:0;font:500 20px 'Lexend',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-dialog .app-input{margin-bottom:12px}
.ws-dialog.is-wide{width:min(760px,calc(100vw - 32px))}
.ws-dialog .ws-chips{margin:12px 0}
.ws-prow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:.8px solid var(--border);border-radius:8px;cursor:pointer}
.ws-pv{display:grid;place-items:center;min-height:240px;max-height:56vh;overflow:auto;border-radius:10px;background:var(--alt)}
.ws-pv img{display:block;max-width:100%;max-height:56vh;object-fit:contain;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.ws-pv.ws-th-pdf{background-color:var(--alt);color:var(--ink)}
.ws-pv .ws-thk{font-size:14px;color:var(--muted)}
.ws-dialog[open]{animation:ws-in .2s var(--ease-out)}
@keyframes ws-in{from{opacity:0;scale:.96}}

@media (max-width:1100px){.ws-grid{grid-template-columns:200px minmax(0,1fr) 280px}}
@media (max-width:860px){
  .ws-grid{display:flex;flex-direction:column}
  .ws-grid>*{min-width:0}
  .ws-side,.ws-libp{position:static;align-self:stretch;height:auto;border:0}
  .ws-side{border-bottom:.8px solid var(--border);padding:12px 16px}
  .ws-tools{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .ws-sg{display:none}
  .ws-tl{white-space:nowrap;border:.8px solid var(--field-line);border-radius:999px}
  .ws-main{padding:20px 16px 32px}
  .ws-libp{border-top:.8px solid var(--border)}
  .ws-back{display:none}
}


/* polish: press feedback, gated hover, concentric radii, image outline, staggered home entrance */
.ws .ws-chip,.ws .ws-fchip,.ws .ws-ib,.ws .ws-pick,.ws .ws-rc,.ws .ws-card{transition-property:background-color,border-color,color,scale,translate,box-shadow;transition-duration:.16s;transition-timing-function:var(--ease-out)}
.ws .ws-chip:active,.ws .ws-fchip:active,.ws .ws-ib:active,.ws .ws-pick:active,.ws .ws-rc:active,.ws .ws-card:active{scale:.96}
.ws-file{border-radius:14px}
.ws-th{border-radius:4px}
.ws-rc .ws-th,.ws-prow .ws-th{border-radius:4px}
.ws-th.has-img::after{content:"";position:absolute;inset:0;border-radius:inherit;outline:1px solid oklch(0 0 0/.1);outline-offset:-1px;pointer-events:none}
.ws[data-theme="dark"] .ws-th.has-img::after{outline-color:oklch(1 0 0/.1)}
.ws-pv img{outline:1px solid oklch(0 0 0/.1);outline-offset:-1px}
.ws[data-theme="dark"] .ws-pv img{outline-color:oklch(1 0 0/.1)}
.ws-home .ws-hero,.ws-home .ws-hg .ws-card,.ws-home .ws-rc{animation:ws-rise .42s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*35ms)}
@keyframes ws-rise{from{opacity:0;translate:0 8px}}
@media (hover:hover) and (pointer:fine){
  .ws-back:hover{color:var(--on-band)}
  .ws-tl:hover{background:var(--ph)}
  .ws .ws-tl.is-on,.ws .ws-tl.is-on:hover{background:var(--btn);color:var(--btn-fg)}
  .ws-ib:hover{background:var(--ph)}
  .ws-pick:hover{background:var(--alt)}
  .ws-hero .app-drop:hover,.ws-hero .app-drop.is-over{background:rgba(255,255,252,.3)}
  .ws-card:hover{border-color:var(--line-strong);translate:0 -2px;box-shadow:0 1px 2px rgba(39,1,0,.06),0 8px 24px -12px rgba(39,1,0,.25)}
  .ws-rc:hover{border-color:var(--line-strong)}
  .ws-chip:hover{background:var(--alt)}
  .ws-fchip:hover{background:var(--ph)}
}
@media (prefers-reduced-motion:reduce){
  .ws *,.ws *::before,.ws *::after{transition-duration:.01ms !important}
  .ws-home .ws-hero,.ws-home .ws-card,.ws-home .ws-rc{animation:ws-fade .2s ease backwards;animation-delay:0s}
  .ws-dialog[open]{animation:ws-fade .15s ease}
  .ws-card:hover,.ws .ws-chip:active,.ws .ws-card:active{translate:none;scale:none}
}
@keyframes ws-fade{from{opacity:0}}
@media (prefers-reduced-transparency:reduce){.ws-hero .app-drop{backdrop-filter:none}.ws-dialog::backdrop{backdrop-filter:none}}

/* narrow screens: tool menu and a Tools / Library switch */
.ws-toolsel,.ws-viewbar{display:none}
@media (max-width:860px){
  .ws-search,.ws-tools{display:none}
  .ws-toolsel{display:block;min-height:40px;font-size:15px}
  .ws-side{padding:10px 16px}
  .ws-viewbar{display:flex;gap:6px;position:sticky;top:60px;z-index:19;padding:8px 16px;background:var(--bg);border-bottom:.8px solid var(--border)}
  .ws[data-view="lib"] .ws-main,.ws[data-view="lib"] .ws-side{display:none}
  .ws:not([data-view="lib"]) .ws-libp{display:none}
  .ws-libp{border-top:0}
}