/* ===========================================================================
   Packing sheets: my kit, one item, trips, compare, import, quick pick,
   and the drag ghost. Rows and buttons come from base.css and rig.css;
   this file is the layout of each sheet. Tokens only.
   =========================================================================== */

/* ---- my kit ------------------------------------------------------------------- */
.pkg-locker { display: flex; flex-direction: column; gap: var(--s-3); }
.pkg-chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-5)); padding: 0 var(--s-5); }
.pkg-chips::-webkit-scrollbar { display: none; }
.pkg-chips .chip { flex: none; }
.pkg-llist { display: flex; flex-direction: column; }
.pkg-lhead { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.pkg-lrow { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: var(--s-1) 0; border-bottom: 1px solid var(--hairline); }
.pkg-lrow .pkg-thumb { width: 44px; height: 44px; border-radius: var(--r-thumb); background: var(--fill-1); object-fit: contain; flex: none; }
.pkg-lrow-t { flex: 1; min-width: 0; min-height: var(--target); display: flex; flex-direction: column; justify-content: center; text-align: left; }
.pkg-lrow-t:hover .pkg-item-n { text-decoration: underline; text-underline-offset: 3px; }
.pkg-item-n { font-size: var(--fs-body); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg-item-s { font-size: var(--fs-caption); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg-item-w { flex: none; font-size: var(--fs-caption); color: var(--ink-2); }
.pkg-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pkg-add-btn { flex: none; min-width: var(--target); }
.pkg-check { flex: none; width: var(--target); text-align: center; color: var(--ok); font-weight: 700; }
.pkg-lfoot { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-3); }
.pkg-note { font-size: var(--fs-caption); color: var(--ink-2); padding: var(--s-3) 0; }
.pkg-custom { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-card); background: var(--fill-1); }
.pkg-custom-r { display: grid; grid-template-columns: 1fr 88px; gap: var(--s-2); }
select.input { appearance: none; padding-right: var(--s-6); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select.input option { background: var(--bg); color: var(--ink-1); }

/* ---- one item ------------------------------------------------------------------- */
.pkg-itemsheet { display: flex; flex-direction: column; gap: var(--s-4); }
.pkg-ihero { display: grid; place-items: center; height: 160px; border-radius: var(--r-card); background: var(--fill-1); }
.pkg-ihero-img { width: 150px; height: 150px; object-fit: contain; }
.pkg-iname { font-size: var(--fs-title1); font-weight: 650; letter-spacing: var(--tr-title); line-height: var(--lh-tight); }
.pkg-isub { font-size: var(--fs-caption); color: var(--ink-2); margin-top: calc(-1 * var(--s-2)); }
.pkg-block { display: flex; flex-direction: column; gap: var(--s-2); }
.pkg-places { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pkg-why { font-size: var(--fs-caption); color: var(--ink-3); line-height: var(--lh-snug); }
.pkg-wrow { display: flex; align-items: center; gap: var(--s-2); }
.pkg-wrow .input { width: 120px; }
.pkg-u { color: var(--ink-3); font-size: var(--fs-caption); }

/* ---- trips ------------------------------------------------------------------------ */
.pkg-los { display: flex; flex-direction: column; gap: var(--s-2); }
.pkg-lo { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--fill-1); border: 1px solid transparent; }
.pkg-lo.on { border-color: var(--accent-ring); }
.pkg-lo-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: var(--s-3) var(--s-3) var(--s-1); text-align: left; }
.pkg-lo-n { font-size: var(--fs-title3); font-weight: 600; }
.pkg-lo-s { font-size: var(--fs-caption); color: var(--ink-3); }
.pkg-lo-acts { display: flex; gap: var(--s-1); padding: 0 var(--s-2) var(--s-2); }
.pkg-row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.pkg-rename { display: flex; gap: var(--s-2); padding: var(--s-2); }

/* ---- compare ------------------------------------------------------------------------- */
.pkg-cmp { display: flex; flex-direction: column; gap: var(--s-3); }
.pkg-cmp-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2); align-items: center; }
.pkg-vs { font-size: var(--fs-caption); color: var(--ink-3); }
.pkg-cmp-t { display: flex; flex-direction: column; }
.pkg-cmp-r { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-2); align-items: center; min-height: 40px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-caption); }
.pkg-cmp-r > :not(:first-child) { text-align: right; }
.pkg-cmp-r.is-h { color: var(--ink-3); font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; }
.pkg-cmp-r.is-big { font-size: var(--fs-title3); font-weight: 650; }
.pkg-cmp-k { color: var(--ink-2); }
.pkg-delta.up { color: var(--warn); }
.pkg-delta.down { color: var(--ok); }
.pkg-moved { display: flex; flex-direction: column; }
.pkg-mv { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; border-bottom: 1px solid var(--hairline); }
.pkg-mv .pkg-thumb { width: 40px; height: 40px; border-radius: var(--r-thumb); background: var(--fill-1); }

/* ---- import -------------------------------------------------------------------------- */
.pkg-import { display: flex; flex-direction: column; gap: var(--s-3); }
.pkg-ta { font-family: var(--font); font-variant-numeric: tabular-nums; }
.pkg-prev { display: flex; flex-direction: column; gap: var(--s-1); }
.pkg-prev-l { font-size: var(--fs-caption); color: var(--ink-2); }

/* ---- quick pick ------------------------------------------------------------------------ */
.pkg-quick { display: flex; flex-direction: column; gap: var(--s-3); }
.pkg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.pkg-tile { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-height: 88px; padding: var(--s-2) 2px; border-radius: var(--r-card); background: var(--fill-1); border: 1px solid var(--hairline); text-align: center; }
.pkg-tile:hover { background: var(--fill-2); }
.pkg-tile.on { border-color: var(--ink-1); background: var(--fill-2); }
.pkg-tile-img { width: 44px; height: 44px; object-fit: contain; }
.pkg-tile-l { font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; }

/* ---- drag and drop (desktop) ------------------------------------------------------------ */
.pkg-ghost {
  position: fixed; z-index: 80; pointer-events: none; transform: translate(12px, 12px);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  background: var(--e4-bg); border: 1px solid var(--e4-brd); box-shadow: var(--e4-shd);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-1); white-space: nowrap;
}
.pkg-dragging, .pkg-dragging * { cursor: grabbing !important; }
.pkg-thumb { background: var(--fill-1); border-radius: var(--r-thumb); object-fit: contain; }
.pkg-ghost[data-to]:not([data-to=""])::after { content: attr(data-to); margin-left: var(--s-2); color: var(--ok); }
.drop-chip {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--e1-bg); border: 1px dashed var(--ink-3);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-1); white-space: nowrap;
}
.drop-chip.on { background: var(--ink-1); color: var(--ink-on-plate); border-style: solid; border-color: var(--ink-1); }