/* Moving kit (spec 28): the stash and case grids you arrange yourself, drag and drop, move mode, the item
   menu, "Move to…", Move all buttons and the stash tour. Loaded after main.css. */

/* ---- layout: grid on the left, the open case and your kit on the right (desktop); stacked on a phone */
.stash.stashmove { display: grid; gap: 0 var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.stashmove__main, .stashmove__side, .stashmove__wide { min-width: 0; }
@media (min-width: 960px) {
  .stash.stashmove { grid-template-columns: minmax(420px, 560px) minmax(0, 1fr); align-items: start; }
  .stashmove__main { position: sticky; top: 76px; }
  .stashmove__wide { grid-column: 1 / -1; }
  .sgrid-box { max-height: calc(100vh - 300px); min-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- the grid: explicit rows and columns, so a saved position is the same place on every screen */
.sgrid {
  --cell: 66px;
  position: relative; display: grid; gap: 4px; padding: 4px;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), var(--cell));
  background: var(--bg); border: var(--bw, 1px) solid var(--line);
  contain: layout style; /* moves and highlights never re-lay the page around it */
}
@media (min-width: 960px) { .sgrid { --cell: 92px; } }
.sgrid--case { --cell: 58px; }
@media (min-width: 960px) { .sgrid--case { --cell: 66px; } }
.sgrid-casebox { overflow-x: auto; }
.sgrid--case { min-width: calc(var(--cols) * 40px); }
.sgrid__cell {
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--line) 25%, transparent) 6px 7px);
  outline-offset: -2px;
}
.sgrid__tile { position: relative; min-width: 0; min-height: 0; }
.sgrid__tile > .item { min-height: 0; height: 100%; }
.sgrid__tile.is-tall > .item { flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.sgrid__tile.is-tall > .item .item__icon.has-art { width: 70%; height: auto; aspect-ratio: 1; max-height: 70%; margin: 0; }
.sgrid__tile.is-tall > .item .item__name { text-align: center; }
.sgrid .slotcell[hidden], .sgrid .sgrid__tile[hidden] { display: block; opacity: 0.18; pointer-events: none; } /* search dims, never moves */
@media (max-width: 959px) {
  .sgrid__tile:not(.is-tall):not(.slotcell) > .item { padding: 3px; }
  .sgrid__tile:not(.is-tall):not(.slotcell) > .item .item__icon.has-art { width: 38px; height: 38px; margin: -2px 0 -2px -2px; }
  .sgrid__tile > .item .item__name { font-size: 10.5px; line-height: 1.1; }
}

/* a storage case standing in the grid */
.gcase {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; padding: 4px; gap: 2px;
  background: color-mix(in srgb, var(--cyan) 5%, var(--panel)); border: 2px solid var(--line-2); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; overflow: hidden; position: relative;
}
.gcase:hover, .gcase:focus-visible { border-color: var(--cyan); outline: none; }
.gcase__pic { min-height: 0; display: block; }
.gcase__pic .casepic, .gcase__pic img, .gcase__pic svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.gcase__name { font-size: var(--fs-xs); font-weight: 700; color: var(--cyan); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gcase__count { position: absolute; top: 3px; right: 5px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.sgrid__tile.is-open .gcase { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }

/* ---- drag and drop (mouse) */
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; }
.is-drag-src { opacity: 0.35; pointer-events: none; }
.dragghost {
  position: fixed; left: 0; top: 0; z-index: 90; width: 64px; height: 64px; pointer-events: none;
  opacity: 0.92; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); will-change: transform;
}
.dragghost > * { width: 100%; height: 100%; min-height: 0; }
.dragghost .item__name, .dragghost .gcase__name, .dragghost .casetile__holds { display: none; }
.dragtip {
  position: fixed; left: 0; top: 0; z-index: 91; max-width: 250px; padding: 4px 8px; pointer-events: none;
  font-size: var(--fs-xs); font-weight: 700; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text);
}
.dragtip.is-ok { border-color: var(--t-medical); color: var(--t-medical); }
.dragtip.is-no { border-color: var(--red); color: #ffd2cd; background: color-mix(in srgb, var(--red) 22%, var(--panel-3)); }
.dragtip[hidden] { display: none; }
.sgrid__drop { pointer-events: none; z-index: 2; border: 2px solid var(--cyan); background: var(--cyan-wash); }
.is-drop-ok { outline: 2px solid var(--t-medical) !important; outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-medical) 30%, transparent); }
.sgrid__drop.is-drop-ok { border-color: var(--t-medical); background: color-mix(in srgb, var(--t-medical) 18%, transparent); outline: none !important; }
.is-drop-no { outline: 2px solid var(--red) !important; outline-offset: -2px; box-shadow: 0 0 0 3px var(--red-glow); }
.sgrid__drop.is-drop-no { border-color: var(--red); background: var(--red-wash); outline: none !important; }
[data-drop-to].is-drop-ok, [data-drop-to].is-drop-no { outline-offset: 2px; }

/* ---- move mode and selection */
.movebar {
  position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); background: var(--cyan-deep); border: 1px solid var(--cyan-dim); border-left: 4px solid var(--cyan);
}
.movebar__text { flex: 1 1 200px; font-size: var(--fs-s); }
.sgrid.is-moving .sgrid__cell { cursor: pointer; border-color: var(--cyan-dim); }
.sgrid.is-moving .sgrid__cell:hover, .sgrid.is-moving .sgrid__cell:focus-visible { background: var(--cyan-wash); border: 2px solid var(--cyan); outline: none; }
.sgrid__tile.is-moving-src > * { box-shadow: inset 0 0 0 3px var(--cyan), 0 0 14px var(--cyan-glow); animation: movepulse 1.2s ease-in-out infinite; }
@keyframes movepulse { 50% { box-shadow: inset 0 0 0 3px var(--cyan-hi), 0 0 4px var(--cyan-glow); } }
@media (prefers-reduced-motion: reduce) { .sgrid__tile.is-moving-src > * { animation: none; } }
.sgrid__check {
  position: absolute; left: 4px; bottom: 4px; z-index: 3; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--text-dim); background: var(--bg);
}
.sgrid__check.is-on { border-color: var(--cyan); background: var(--cyan); }
.sgrid__check.is-on::after { content: ""; position: absolute; inset: 2px; background: var(--on-cyan); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 70%); }
.sgrid__tile.is-selected > * { box-shadow: inset 0 0 0 2px var(--cyan); }

/* ---- tools above the grid */
.stashtools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--sp-2) 0; }
.stashtools__label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.stashtools__select { margin-left: auto; }
.stashtools__select.is-active { background: var(--cyan); color: var(--on-cyan); }
.stashmove .filterbar__sort { display: none; }
.stash__how { margin-top: var(--sp-2); }
.movemsg { margin: var(--sp-2) 0; }
.unshelved { margin-top: var(--sp-2); padding: var(--sp-2); border: 1px dashed var(--red-dim); }
.unshelved__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); grid-auto-rows: 66px; gap: 4px; }

/* ---- Move all buttons (full width on a phone) and kit lists as drop targets */
.moveall { margin-top: var(--sp-2); }
@media (max-width: 959px) { .moveall--full { display: flex; width: 100%; justify-content: center; min-height: 44px; } }
.stashmove .kitlist__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); grid-auto-rows: 70px; gap: 4px; }
.stashmove .kitlist__items > .slotcell > .item { min-height: 0; }
.stashmove .kitlist { margin-bottom: var(--sp-3); }
.casepanel--inline .sgrid-casebox { margin-top: var(--sp-2); }
.casetile.is-open { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }

/* ---- the item menu (right-click, long-press) */
.ctxmenu {
  position: fixed; z-index: 95; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 4px; background: var(--panel); border: 1px solid var(--cyan-dim); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.ctxmenu__title { margin: 2px 6px 4px; font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ctxmenu__item {
  display: block; width: 100%; min-height: 40px; padding: 8px 10px; text-align: left; font: inherit; font-size: var(--fs-s);
  background: transparent; border: 0; color: var(--text); cursor: pointer;
}
.ctxmenu__item:hover:not([disabled]), .ctxmenu__item:focus-visible { background: var(--cyan-deep); color: var(--cyan-hi); outline: none; }
.ctxmenu__item[data-act="stash"]:not([disabled]) { font-weight: 700; color: var(--cyan); }
.ctxmenu__item[disabled] { color: var(--text-faint); cursor: default; }
.ctxmenu__why { display: block; font-size: var(--fs-xs); color: #ffb3ab; }

/* ---- "Move to…" list */
.moveto { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moveto__btn { display: grid; width: 100%; min-height: 48px; text-align: left; justify-items: start; gap: 2px; }
.moveto__label { font-weight: 700; }
.moveto__sub { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 400; }
.moveto__btn.is-no { opacity: 0.7; border-style: dashed; }
.moveto__btn.is-no .moveto__sub { color: #ffb3ab; }

/* ---- the stash tour ("Managing your stash"): a card docked at the bottom, never a wall over the game */
.tour {
  position: fixed; left: 50%; bottom: 12px; z-index: 80; transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); padding: var(--sp-3) var(--sp-4);
  background: var(--panel); border: 1px solid var(--cyan-dim); border-top: 3px solid var(--cyan); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.65);
}
.tour__step { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.tour__title { margin: 2px 0 4px; font-size: var(--fs-l); color: var(--cyan); }
.tour__text { margin: 0 0 4px; font-size: var(--fs-s); }
.tour__nav { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-2); }
.tour__nav .btn--ghost { margin-right: auto; }
.tour-target { position: relative; z-index: 6; outline: 3px solid var(--cyan) !important; outline-offset: 3px; box-shadow: 0 0 0 6px var(--cyan-glow) !important; animation: tourpulse 1.6s ease-in-out infinite; }
@keyframes tourpulse { 50% { outline-color: var(--cyan-hi); } }
@media (prefers-reduced-motion: reduce) { .tour-target { animation: none; } }
body.has-tour .screen__body { padding-bottom: 230px; }

/* phones: a 1×1 slot shows the picture, quantity and FOL only (the name is in the item sheet and read aloud) */
@media (max-width: 959px) {
  .sgrid__tile.is-1x1 > .item { justify-content: center; align-items: center; padding: 2px; }
  .sgrid__tile.is-1x1 > .item .item__name { display: none; }
  .sgrid__tile.is-1x1 > .item .item__icon.has-art { width: 46px; height: 46px; margin: 0; }
  .sgrid__tile.is-1x1 > .item .item__fir { top: auto; bottom: 2px; right: 2px; }
  .sgrid__tile.is-1x1 .gcase { grid-template-rows: minmax(0, 1fr); padding: 2px; }
  .sgrid__tile.is-1x1 .gcase__name { display: none; }
  .sgrid__tile.is-1x1 .gcase__count { top: auto; bottom: 1px; right: 3px; font-size: 10.5px; background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 0 2px; }
}