/* ============================================================
   Easel — a 2-row, horizontally-scrolling grid of references.
   Click an image to open it; click an empty cell to add one.
   ============================================================ */

:root{
  --paper:#f3f1ec;
  --card:#ffffff;
  --ink:#1b1b1a;
  --ink-2:#5c5b57;
  --ink-3:#9a9893;
  --line:#e4e1da;
  --line-2:#d8d4cb;
  --accent:#cf5a3a;
  --accent-soft:#f6e4dd;
  --accent-line:#e3a791;
  --shadow-sm:0 1px 2px rgba(40,38,33,.05), 0 2px 8px rgba(40,38,33,.06);
  --shadow:0 8px 22px -8px rgba(40,38,33,.22), 0 2px 6px rgba(40,38,33,.07);
  --shadow-lg:0 24px 60px -20px rgba(30,28,24,.4);
  --radius:14px;
  --spring:cubic-bezier(.22,1,.36,1);
  --spring-soft:cubic-bezier(.34,1.4,.64,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}   /* the hidden attr must win over .focus/.dropzone display rules */
html,body{height:100%;overflow:hidden}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
*::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}
svg{display:block}

/* ===== Board (horizontal scroller) ===== */
.board{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:64px 16px 84px;touch-action:pan-y;
  background:radial-gradient(120% 90% at 50% 0%, #faf9f6 0%, var(--paper) 60%);}

/* Pinterest-style masonry (JS row-span grid): --cols columns; frames take each
   image's aspect ratio, and an image can span 2-3 columns to be enlarged. */
.grid{
  display:grid;
  grid-template-columns:repeat(48,minmax(0,1fr));   /* fine sub-columns -> free frame widths */
  grid-auto-rows:8px;
  grid-auto-flow:row dense;
  gap:14px;
  max-width:1900px;
  margin:0 auto;
}
@media (max-width:680px){ .grid{gap:10px;grid-auto-rows:6px} }

/* masonry cell — height comes from the image's natural aspect ratio.
   Visibility never depends on opacity (white-screen lesson). */
/* NOTE: no animation-fill 'both'/'forwards' here — a filled end keyframe (transform:none)
   would override our inline transforms (FLIP zoom + drag-resize) and kill all smoothness. */
.cell{position:relative;border-radius:var(--radius);overflow:hidden;transform-origin:top left;
  transition:transform .35s var(--spring),box-shadow .3s var(--ease);
  animation:cellIn .42s var(--spring)}
@keyframes cellIn{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .cell{animation:none} }

/* filled */
.cell.img{background:var(--card);box-shadow:var(--shadow-sm);cursor:pointer;touch-action:pan-y}
.cell.img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring),filter .3s var(--ease)}
/* per-image size button */
.cell-size{position:absolute;bottom:9px;right:9px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;transform:scale(.85);
  transition:opacity .2s var(--ease),transform .15s var(--spring-soft);touch-action:none}
.cell-size svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cell.img:hover .cell-size{opacity:1;transform:scale(1)}
.cell-size:hover{color:var(--ink)}
.cell.resizing{z-index:5;box-shadow:var(--shadow-lg)}
.cell.resizing .cell-size{opacity:1;transform:scale(1.1);color:var(--accent)}
@media (max-width:680px){.cell-size{opacity:.85;transform:scale(1)}}
.cell.img:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cell.img:hover img{transform:scale(1.04)}
.cell.img.gray img{filter:grayscale(1)}
.cell-del{position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;transform:scale(.85);
  transition:opacity .2s var(--ease),transform .15s var(--spring-soft)}
.cell-grip{position:absolute;top:9px;left:9px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;transform:scale(.85);
  transition:opacity .2s var(--ease),transform .15s var(--spring-soft);cursor:grab;touch-action:none}
.cell-grip svg{width:17px;height:17px;fill:currentColor;stroke:none}
.cell.img:hover .cell-grip{opacity:1;transform:scale(1)}
.cell.lifting{opacity:.55;outline:2px dashed var(--accent-line);outline-offset:-2px;z-index:4}
@media (max-width:680px){ .cell-grip{opacity:.85;transform:scale(1)} }
.cell-del svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cell.img:hover .cell-del{opacity:1;transform:scale(1)}
.cell-del:hover{background:var(--accent);color:#fff}

/* empty (click to add) */
.cell.empty{background:transparent;border:2px dashed var(--line-2);cursor:pointer;display:grid;place-items:center;color:var(--ink-3);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease),transform .35s var(--spring)}
.cell.empty:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.cell.empty svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}

/* ===== Fullscreen button (mobile landscape only) ===== */
.fullscreen-btn{position:fixed;top:14px;left:14px;z-index:26;display:none;width:40px;height:40px;border-radius:11px;place-items:center;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink-2);transition:box-shadow .15s}
.fullscreen-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fullscreen-btn:hover{box-shadow:var(--shadow);color:var(--ink)}
/* immersive (faux-fullscreen) hides app chrome — works even where the Fullscreen API doesn't (iPhone) */
body.immersive .boards,body.immersive .density{opacity:0;pointer-events:none}

/* ===== Boards switcher ===== */
.boards{position:fixed;top:14px;left:14px;z-index:25}
.boards-toggle{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:14px;font-weight:500;color:var(--ink);transition:box-shadow .15s var(--ease)}
.boards-toggle:hover{box-shadow:var(--shadow)}
.boards-toggle .caret{width:15px;height:15px;stroke:var(--ink-3);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.boards-menu{position:absolute;top:46px;left:0;min-width:240px;padding:7px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);animation:bmenu .18s var(--ease) both}
@keyframes bmenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.board-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .14s}
.board-row:hover{background:rgba(0,0,0,.04)}
.board-row.active{background:var(--accent-soft)}
.board-row.active .board-row-name{color:var(--accent);font-weight:600}
.board-row-name{flex:1;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-row-count{font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-3);min-width:16px;text-align:right}
.board-row-rename,.board-row-del{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);transition:.14s}
.board-row-rename svg,.board-row-del svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.board-row-rename:hover{background:rgba(0,0,0,.07);color:var(--ink)}
.board-row-del:hover{background:var(--accent-soft);color:var(--accent)}
.board-row-del[disabled]{opacity:.3;pointer-events:none}
.board-rename-input{flex:1;font:inherit;font-size:14px;border:1px solid var(--accent-line);border-radius:7px;padding:4px 8px;outline:none;color:var(--ink);background:var(--paper);min-width:0}
.boards-add{display:flex;align-items:center;gap:7px;width:100%;padding:9px 10px;margin-top:4px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:14px;font-weight:500;transition:color .14s}
.boards-add svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.boards-add:hover{color:var(--accent)}
@media (max-width:680px){.boards{top:10px;left:10px}}

/* ===== Density / grid-size control ===== */
.density{position:fixed;right:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:2px;padding:5px;
  border-radius:13px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.dbtn{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);font-size:19px;line-height:1;
  transition:background .15s,color .15s,transform .12s var(--spring-soft)}
.dbtn:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.dbtn:active{transform:scale(.9)}
.dnum{min-width:24px;text-align:center;font-family:'Geist Mono',monospace;font-size:13px;color:var(--ink-2)}
@media (max-width:680px){.density{right:12px;bottom:12px}}

/* ===== Mobile landscape: horizontal-scroll justified strip + fullscreen ===== */
@media (orientation:landscape) and (max-width:1024px){
  .fullscreen-btn{display:grid}
  .boards{left:62px}
  .board{overflow-x:auto;overflow-y:hidden;padding:58px 12px 12px;touch-action:pan-x}
  .grid{display:flex;flex-flow:column wrap;width:max-content;height:100%;max-width:none;gap:10px;align-content:flex-start;align-items:flex-start}
  .cell{aspect-ratio:var(--ar,1);height:calc((100% - 10px * (var(--rows) - 1)) / var(--rows));width:auto;margin:0}
  .cell.empty{aspect-ratio:1}
}

/* ===== Dropzone ===== */
.dropzone{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(243,241,236,.86);backdrop-filter:blur(6px)}
.dropzone.drag{display:flex}
.dz-inner{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--accent);
  padding:60px 80px;border:2.5px dashed var(--accent-line);border-radius:28px;background:var(--card)}
.dz-inner p{font-size:17px;font-weight:500;color:var(--ink)}

/* ===== Focus view (open an image) — solid backdrop, big image, floating controls ===== */
.focus{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:var(--paper);animation:fade .28s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* image area fills the screen minus small margins -> image as big as possible */
.focus-body{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
/* constrain against the VIEWPORT (definite) so the image always fits, never overflows */
.focus-stage{position:relative;display:flex;max-width:calc(100vw - 160px);max-height:calc(100vh - 150px);will-change:transform;transition:transform .12s linear}
.focus-stage img{display:block;max-width:calc(100vw - 160px);max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:12px;
  box-shadow:var(--shadow-lg);transition:filter .3s var(--ease),transform .3s var(--ease)}
.focus-grid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;display:none}
.focus-grid.on{display:block}
.focus-grid line,.focus-grid rect{vector-effect:non-scaling-stroke;fill:none;stroke-width:1.1;opacity:.92}
.focus-anno{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;border-radius:12px;touch-action:none}
.focus.annotate .focus-anno{pointer-events:auto;cursor:crosshair}
.focus.annotate .focus-stage{transition:none}

/* floating controls (fixed to viewport — .focus prefix beats the global [data-tip]{position:relative}) */
.focus .focus-count{position:fixed;top:24px;left:26px;font-family:'Geist Mono',monospace;font-size:13px;color:var(--ink-3);letter-spacing:.04em;z-index:3}
.focus .focus-close{position:fixed;top:18px;right:22px;z-index:3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--shadow);color:var(--ink-2);transition:transform .25s var(--spring),color .16s}
.focus .focus-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.focus .focus-close:hover{color:var(--ink);transform:rotate(90deg)}
.focus .focus-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--shadow);color:var(--ink-2);transition:color .16s,transform .2s var(--spring);z-index:3}
.focus .focus-nav svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.focus .focus-nav:hover{color:var(--ink)}
.focus .focus-nav.prev{left:22px}.focus .focus-nav.next{right:22px}
.focus .focus-nav.prev:hover{transform:translateY(-50%) translateX(-3px)}
.focus .focus-nav.next:hover{transform:translateY(-50%) translateX(3px)}

.toolbar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:5px;
  padding:8px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);
  animation:dropUp .45s var(--spring) both}
@keyframes dropUp{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%)}}
.tool{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2);
  transition:background .15s,color .15s,transform .12s var(--spring-soft)}
.tool svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.tool:active{transform:scale(.92)}
.tool.on{background:var(--accent-soft);color:var(--accent)}
.tool.danger:hover{background:var(--accent-soft);color:var(--accent)}
.tool-sep{width:1px;height:26px;background:var(--line-2);margin:0 4px}
.tool-sub{display:none;align-items:center;gap:10px;padding:0 12px 0 6px}
.tool-sub.show{display:flex}
.tool-sub span{font-family:'Geist Mono',monospace;font-size:12px;color:var(--ink-2);min-width:34px}
.tool-sub input[type=range]{width:110px}
.tool-mini{padding:6px 11px;border-radius:9px;background:rgba(0,0,0,.05);font-size:12px;font-weight:500;color:var(--ink-2);transition:.15s}
.tool-mini:hover{background:rgba(0,0,0,.09);color:var(--ink)}

input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--line-2);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .12s var(--spring-soft)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--accent)}

.palette{position:fixed;left:24px;bottom:24px;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);animation:dropUp .4s var(--spring) both}
.palette-swatches{display:flex;gap:6px}
.pal-sw{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);cursor:pointer;transition:transform .14s var(--spring-soft)}
.pal-sw:hover{transform:scale(1.16)}
.pal-clear{font-size:12px;color:var(--ink-3)}
.pal-clear:hover{color:var(--ink)}
.loupe{position:fixed;z-index:6;width:140px;height:140px;border-radius:50%;border:3px solid #fff;box-shadow:var(--shadow-lg);pointer-events:none;background-repeat:no-repeat;overflow:hidden}

.swatch-toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(10px);z-index:95;display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--spring)}
.swatch-toast.show{opacity:1;transform:translateX(-50%)}
.st-chip{width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2)}
.st-hex{font-family:'Geist Mono',monospace;font-size:13px}
.st-copied{font-size:11px;color:var(--accent);opacity:0;transition:opacity .2s}
.swatch-toast.copied .st-copied{opacity:1}

[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:-30px;left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:#fff;font-size:11px;font-weight:500;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:99}
.toolbar [data-tip]::after,.focus-close[data-tip]::after{bottom:auto;top:-30px;transform:translateX(-50%) translateY(-4px)}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%)}
.focus.eyedrop .focus-stage,.focus.eyedrop .focus-stage *{cursor:crosshair}

/* ===== Mobile focus view ===== */
@media (max-width:680px){
  .focus-body{padding:46px 8px 88px}
  .focus-stage,.focus-stage img{max-width:calc(100vw - 16px);max-height:calc(100vh - 140px)}
  .focus .focus-close{top:12px;right:12px;width:40px;height:40px}
  .focus .focus-count{top:18px;left:16px}
  /* arrows are small + tucked to the edges; swipe also navigates */
  .focus .focus-nav{width:38px;height:38px;background:rgba(255,255,255,.82);backdrop-filter:blur(4px)}
  .focus .focus-nav svg{width:19px;height:19px}
  .focus .focus-nav.prev{left:6px}.focus .focus-nav.next{right:6px}
  .toolbar{bottom:14px;gap:2px;padding:6px;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 14px);justify-content:center}
  .tool{width:40px;height:40px}
  .tool-sub{flex-basis:100%;justify-content:center;padding-top:4px}
  .palette{left:12px;bottom:74px;padding:8px 10px}
  .loupe{width:120px;height:120px}
}