/* ==========================================================================
   Split Image — the Instagram feed planner.

   Not a splitter. You drop in the next batch of posts, drag them into the
   order you mean to publish them in, and look at the profile grid they make
   before any of it goes live.
   ========================================================================== */

.planner { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 18px; align-items: start; padding-bottom: 26px; scroll-margin-top: 20px; }
@media (max-width: 1020px) { .planner { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   The profile mock-up
   -------------------------------------------------------------------------- */

.profile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.profile__bar { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); }
.profile__avatar { width: 62px; height: 62px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent), var(--mark)); }
.profile__who { display: grid; gap: 2px; min-width: 0; }
.profile__name { font: 600 0.94rem var(--font-body); }
.profile__stats { display: flex; gap: 16px; font: 500 0.78rem var(--font-mono); color: var(--ink-3); }
.profile__stats b { color: var(--ink); font-weight: 600; }

.profile__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--line); }
.slot {
  position: relative; aspect-ratio: var(--slot-ar, 1); background: var(--surface-2);
  display: grid; place-items: center; padding: 0; border: 0; cursor: grab; overflow: hidden;
}
.slot:active { cursor: grabbing; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.slot--empty { color: var(--ink-3); font: 500 0.72rem var(--font-mono); cursor: default; }
.slot--empty::after {
  content: ""; position: absolute; inset: 8px; border: 1px dashed var(--line-strong); border-radius: 6px;
}
.slot[data-over="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.slot[data-dragging="true"] { opacity: 0.35; }
.slot__n {
  position: absolute; top: 5px; left: 5px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 4px; background: rgba(10, 25, 22, 0.72);
  color: #fff; font: 600 0.68rem var(--font-mono);
}
.slot__x {
  position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border: 0; padding: 0;
  display: grid; place-items: center; border-radius: 4px; background: rgba(10, 25, 22, 0.72);
  color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.slot:hover .slot__x, .slot__x:focus-visible { opacity: 1; }
.slot__x svg { width: 12px; height: 12px; }

/* the three-across row divider, so you can read the grid a row at a time */
.profile__grid[data-rows="true"] .slot:nth-child(3n + 1) { box-shadow: inset 3px 0 0 var(--accent-soft); }

/* --------------------------------------------------------------------------
   The tray of posts not yet placed
   -------------------------------------------------------------------------- */

.tray { margin-top: 14px; }
.tray__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tray__head h2 { font-size: 0.82rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.tray__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }

.dropbox {
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface);
  padding: 30px 20px; text-align: center; color: var(--ink-3); cursor: pointer; display: grid; gap: 6px; place-items: center;
}
.dropbox[data-drag="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropbox svg { width: 26px; height: 26px; color: var(--accent); }
.dropbox strong { color: var(--ink); font-family: var(--font-display); font-size: 1.02rem; }
.dropbox span { font-size: 0.84rem; }