/* assets/ic.css */
.ic-app { display:block; }

/* Toolbar */
.ic-toolbar { 
  display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; 
  padding:12px 16px; background:#000; color:#fff;
  position: sticky; top: 0; z-index: 20;
}
.ic-toolbar label, .ic-toolbar button, .ic-toolbar select { font: inherit; }
.ic-toolbar button { padding:.5rem .75rem; border:1px solid #333; background:#111; color:#fff; cursor:pointer; }
.ic-toolbar button:hover { background:#222; }

/* Explicit hide/show */
.ic-toolbar[data-hidden="1"] { 
  transform: translateY(-100%); 
  transition: transform 220ms ease; 
}

/* Controls pill */
.ic-controls-pill {
  position: fixed; top: 8px; right: 10px; z-index: 30;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.7); color: #fff; border: 1px solid #333;
  font-size: .9rem; line-height: 1; display: none;
}
.ic-controls-pill[data-show="1"] { display: inline-block; }

/* Mobile compaction */
@media (max-width: 640px) {
  .ic-toolbar { gap: .5rem; padding: 10px 12px; }
  .ic-toolbar label { font-size: .95rem; }
  .ic-toolbar select, .ic-toolbar button { font-size: .95rem; padding: .45rem .6rem; }
  .ic-note { display: none; }
}

/* Stage / track / slide */
.ic-stage {
  position: relative;
  overflow: hidden;
  background: #000;

  /* Let the page still scroll vertically when you're NOT dragging,
     but tell the browser "hands off" horizontal gestures so our JS owns them. */
  touch-action: pan-y;

  /* Prevent viewport rubber-banding that can cancel pointer sequences on mobile */
  overscroll-behavior: none;

  /* Micro-perf: isolate paint/layout for smoother transforms */
  contain: layout paint;
}

.ic-track { 
  display:flex; 
  transition: transform 260ms cubic-bezier(.22,.6,.2,1);
  will-change: transform; 
  backface-visibility: hidden; 
  transform: translate3d(0,0,0);
}
.ic-slide { 
  min-width:100%; display:flex; align-items:center; justify-content:center; padding:12px;
}
.ic-stage, .ic-track, .ic-slide { 
  -webkit-user-select: none; user-select: none;
}

.ic-visual { width:90vmin; height:auto; max-width:100%; }

.ic-fade { transition: filter 600ms ease; filter: brightness(.95); }
.ic-hint { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); color:#888; font-size:.85rem; }

/* Chooser modal */
.ic-chooser[data-open="0"] { display:none; }
.ic-chooser[data-open="1"] { position:fixed; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; z-index:9999; }
.ic-chooser-card { width:min(900px, 92vw); background:#111; color:#fff; border:1px solid #333; border-radius:10px; padding:16px; }
.ic-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; margin-block:12px; }
.ic-item { display:grid; gap:4px; place-items:center; border:1px solid #333; padding:8px; border-radius:8px; background:#000; }
.ic-row { display:flex; gap:8px; justify-content:flex-end; }

/* Note */
.ic-note { color:#aaa; font-size:.9rem; }

/* Print tidy */
@media print {
  html, body { background: #fff !important; }
}