/* ═══════════ PROPERTIES PANEL ═══════════
   2026-05-27 (Luke caught: panel slid into negative space on
   narrow viewports). Previously the props-panel was a flex slot
   that widened from 0 → --props-w when .open. On laptop-width
   monitors where the right rail (My Boards / Templates) already
   filled the visible right edge, widening the props slot pushed
   it off-screen — slide-out worked but landed in negative space.
   Fix: lift the panel out of the flex flow and pin it as a
   fixed-position overlay on the viewport's right edge. The right
   rail stays put; the panel slides over it. Mobile media query
   at the bottom of this file still overrides into a bottom sheet
   (transform:translateY) — the !important on width: 100% there
   wins on small screens. */
.props-panel{
  position:fixed;
  top:var(--topbar-h);
  right:0;
  bottom:0;
  width:var(--props-w);
  background:var(--surface);
  border-left:1px solid var(--border-light);
  transform:translateX(100%);
  transition:transform var(--motion-slide);
  z-index:60;
  box-shadow:-8px 0 24px rgba(0,0,0,0.10);
}
.props-panel.open{transform:translateX(0)}
.props-inner{width:var(--props-w);padding:1.25rem;overflow-y:auto;height:100%}
.props-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;
  margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between}
.props-close{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-muted);transition:all var(--transition);font-size:0.8rem}
.props-close:hover{background:var(--surface-active);color:var(--ink)}
.props-group{margin-bottom:1.25rem}
.props-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-muted);margin-bottom:0.4rem;display:block}
.props-input{width:100%;padding:0.6rem 0.75rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:0.9rem;background:var(--bg);transition:border-color var(--transition);outline:none}
.props-input:focus{border-color:var(--amber)}

/* Tile Image Section */
.props-image-section{margin-top:0.25rem}
.props-image-mode{display:flex;gap:0;border-radius:var(--radius-sm);overflow:hidden;border:1.5px solid var(--border);margin-bottom:0.5rem}
.props-img-tab{flex:1;padding:0.4rem 0.5rem;background:var(--bg);border:none;font-size:0.75rem;font-weight:700;
  color:var(--ink-muted);cursor:pointer;transition:all 0.15s;text-transform:uppercase;letter-spacing:0.04em}
.props-img-tab.active{background:var(--amber);color:#fff}
.props-img-tab:hover:not(.active){background:var(--surface-active)}
.props-image-preview{width:100%;height:80px;border-radius:var(--radius-sm);border:1.5px dashed var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:0.5rem;background:var(--bg)}
.props-image-preview img{width:100%;height:100%;object-fit:contain}
.props-image-placeholder{font-size:0.65rem;color:var(--ink-muted);text-align:center;padding:0.5rem}
.props-image-btns{display:flex;gap:0.35rem;flex-wrap:wrap}
.props-upload-btn{padding:0.35rem 0.6rem;border-radius:var(--radius-sm);background:var(--surface-active);
  border:1px solid var(--border);font-size:0.65rem;font-weight:600;color:var(--ink-muted);cursor:pointer;
  transition:all 0.15s;text-align:center}
.props-upload-btn:hover{border-color:var(--amber);color:var(--amber)}
.props-search-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.props-search-btn:hover{background:var(--amber);border-color:var(--amber);color:#fff}
.props-remove-img-btn{background:transparent;color:var(--fk-neg);border-color:var(--fk-neg)}
.props-remove-img-btn:hover{background:var(--fk-neg);color:#fff}
.props-image-results{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:0.5rem;
  max-height:200px;overflow-y:auto;padding:2px;border-radius:var(--radius-sm);background:var(--bg)}
.props-image-results img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;cursor:pointer;
  border:2px solid transparent;transition:all 0.15s}
.props-image-results img:hover{border-color:var(--amber);transform:scale(1.05)}
.props-image-results .img-loading{grid-column:1/-1;text-align:center;padding:1rem;color:var(--ink-muted);font-size:0.7rem}

/* Image Picker Panel (overlay) */
.image-picker-overlay{position:fixed;inset:0;background:rgba(26,26,46,0.5);z-index:500;
  opacity:0;pointer-events:none;transition:opacity var(--motion-fade);backdrop-filter:blur(2px)}
.image-picker-overlay.open{opacity:1;pointer-events:auto}
.image-picker{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--surface);z-index:501;
  transform:translateX(100%);transition:transform var(--motion-slide);
  display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,0.2)}
.image-picker.open{transform:translateX(0)}
.image-picker-header{padding:1rem 1.25rem;background:var(--ink);color:#fff;display:flex;align-items:center;gap:0.75rem}
.image-picker-header h3{font-size:0.95rem;font-weight:700;margin:0;flex:1}
.image-picker-close{background:none;border:none;color:#aaa;font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:4px}
.image-picker-close:hover{color:#fff;background:rgba(255,255,255,0.1)}
.image-picker-search{padding:0.75rem 1.25rem;border-bottom:1px solid var(--border-light);display:flex;gap:0.5rem}
.image-picker-search input{flex:1;padding:0.5rem 0.75rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:0.85rem;outline:none;background:var(--bg)}
.image-picker-search input:focus{border-color:var(--amber)}
.image-picker-search button{padding:0.5rem 1rem;background:var(--amber);color:#fff;border:none;border-radius:var(--radius-sm);
  font-weight:700;font-size:0.8rem;cursor:pointer;white-space:nowrap}
.image-picker-search button:hover{background:#c48a20}
.image-picker-body{flex:1;overflow-y:auto;padding:0.75rem}
.image-picker-section{margin-bottom:1rem}
.image-picker-section-title{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-muted);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem}
.image-picker-section-title::after{content:'';flex:1;height:1px;background:var(--border-light)}
.image-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.image-picker-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:all 0.15s;background:var(--bg);aspect-ratio:1}
.image-picker-item:hover{border-color:var(--amber);transform:scale(1.03);box-shadow:var(--shadow-sm)}
.image-picker-item img{width:100%;height:100%;object-fit:cover;display:block}
.image-picker-item .img-source{position:absolute;bottom:0;left:0;right:0;padding:2px 4px;
  background:rgba(0,0,0,0.6);color:#fff;font-size:0.55rem;text-align:center;text-transform:uppercase;letter-spacing:0.04em}
.image-picker-loading{text-align:center;padding:2rem;color:var(--ink-muted);font-size:0.8rem}
.image-picker-loading .spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--border);
  border-top-color:var(--amber);border-radius:50%;animation:spin 0.6s linear infinite;margin-bottom:0.5rem}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.image-picker{width:100%}}
.props-textarea{resize:vertical;min-height:60px}
.props-emoji-preview{font-size:3rem;text-align:center;padding:1rem;background:var(--bg);
  border-radius:var(--radius-md);margin-bottom:0.75rem;cursor:pointer;transition:all var(--transition);
  border:1.5px solid var(--border)}
.props-emoji-preview:hover{border-color:var(--amber);transform:scale(1.05)}

/* Per-tile emoji size slider (2026-06-10, Luke) */
.props-emoji-size-row{display:flex;align-items:center;gap:0.75rem}
.props-emoji-size-row .props-emoji-size{flex:1;min-width:0;accent-color:var(--amber);cursor:pointer}
.props-emoji-size-row .props-emoji-size-val{flex:0 0 auto;min-width:3.2em;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);font-size:0.9rem}

/* Color Picker */
.fk-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem}
.fk-color-btn{padding:0.5rem;border-radius:var(--radius-sm);border:2px solid transparent;
  text-align:center;font-size:0.65rem;font-weight:600;transition:all var(--transition);cursor:pointer}
.fk-color-btn:hover{transform:translateY(-1px)}
.fk-color-btn.active{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.fk-color-btn .fk-dot{width:18px;height:18px;border-radius:50%;margin:0 auto 0.25rem;
  border:2px solid rgba(0,0,0,0.1)}

/* Emoji Picker */
.emoji-picker{position:absolute;background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);border:1px solid var(--border);width:300px;z-index:500;
  display:none;overflow:hidden}
.emoji-picker.open{display:block}
.emoji-picker-search{width:100%;padding:0.65rem 1rem;border:none;border-bottom:1px solid var(--border-light);
  font-size:0.9rem;outline:none;background:var(--bg)}
.emoji-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);padding:0.5rem;
  max-height:200px;overflow-y:auto;gap:2px}
.emoji-pick{padding:0.35rem;text-align:center;font-size:1.4rem;border-radius:6px;
  cursor:pointer;transition:background 0.15s}
.emoji-pick:hover{background:var(--surface-active)}