/* =========================================================================
   COMPONENT LIBRARY — full page grid + the "choose from library" picker
   modal reused by page-banner.js / eo-command.js. Tokens match eo-operator.css
   / empirium.css (--card-subtle, --line, --accent, --r-lg, --glass, etc).
   ========================================================================= */

.cl-page{ display:flex; flex-direction:column; gap:16px; padding:4px 2px 24px; }
.cl-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.cl-head h2{ margin:0 0 4px; font-size:var(--fs-title, 20px); }
.cl-head p{ margin:0; color:var(--faint); font-size:13px; max-width:52ch; }

.cl-upload-btn{
  height:34px; padding:0 16px; white-space:nowrap; cursor:pointer;
  border:1px solid var(--line-bright); border-radius:var(--r-md, 8px);
  background:var(--accent); color:var(--accent-ink, #0b0e1a);
  font:600 12.5px/1 var(--font-mono); letter-spacing:.04em;
}
.cl-upload-btn:hover{ filter:brightness(1.08); }

.cl-dropzone{
  border-radius:var(--r-lg); transition:box-shadow var(--t-snap) var(--ease);
}
.cl-dropzone.is-drop{ box-shadow:var(--glow-accent); }

.cl-empty{
  padding:40px 20px; text-align:center; color:var(--faint);
  border:1px dashed var(--line); border-radius:var(--r-lg);
  font:500 12.5px/1.6 var(--font-mono); letter-spacing:.02em;
}

.cl-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
}
.cl-cell{
  display:flex; flex-direction:column; gap:6px;
  background:var(--card-subtle); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:8px; overflow:hidden;
}
.cl-thumb{
  position:relative; aspect-ratio:4/3; border-radius:calc(var(--r-lg) - 4px);
  overflow:hidden; background:var(--card, #10131f);
  display:flex; align-items:center; justify-content:center;
}
.cl-thumb-img{ display:block; width:100%; height:100%; object-fit:cover; }
.cl-thumb-ph{ color:var(--faint); font:500 9.5px/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

/* GIF thumbnails are frozen on a static poster (see component-library.js —
   several animated GIFs all repainting at once is what was slowing things
   down). A click swaps in the real animation; this hover hint is what tells
   you that's possible. */
.cl-thumb[data-cl-gif-toggle]{ cursor:pointer; }
.cl-thumb[data-cl-gif-toggle]::after{
  content:'\25B6'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
  opacity:0; transition:opacity var(--t-snap) var(--ease); pointer-events:none;
}
.cl-thumb[data-cl-gif-toggle]:hover::after{ opacity:.85; }
.cl-thumb[data-cl-gif-toggle].is-playing::after{ display:none; }
.cl-badge{
  position:absolute; top:6px; right:6px; padding:1px 6px;
  border-radius:4px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  color:#fff; font:700 9px/1.6 var(--font-mono); letter-spacing:.08em;
}

.cl-cell-tools{ display:flex; align-items:center; gap:6px; }
.cl-name-input{
  flex:1; min-width:0; height:26px; padding:0 8px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  color:var(--text); font:500 11.5px/1 var(--font-mono);
}
.cl-name-input:hover, .cl-name-input:focus{ border-color:var(--line); background:var(--card, #10131f); outline:none; }
.cl-cell-del{
  flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:6px; background:var(--glass); backdrop-filter:var(--glass-blur);
  color:var(--faint); font-size:15px; line-height:1; cursor:pointer;
}
.cl-cell-del:hover{ border-color:#e05656; color:#e05656; }

.cl-cell-name{ font:500 11.5px/1.4 var(--font-mono); letter-spacing:.01em; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- picker modal ---- */
.cl-picker-modal{ width:min(640px, 96vw); max-height:min(78vh, 640px); display:flex; flex-direction:column; }
.cl-picker-modal .eo-modal-body{ overflow-y:auto; }
.cl-picker-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
.cl-cell-pick{ cursor:pointer; transition:border-color var(--t-snap) var(--ease), transform var(--t-snap) var(--ease); }
.cl-cell-pick:hover{ border-color:var(--accent); transform:translateY(-1px); }
.cl-cell-pick.is-busy{ opacity:.5; pointer-events:none; }