/* =====================================================================
   app-shell.css — APP SHELL (2026-10-04): MERPY-style app pages — the MaliTrip
   planner, the MaliBills bill split, and MERPY itself on phones. Loaded after
   /ui-kit.css where that exists. Motion lives in /app-shell.js.
     ≥1081px  summary (.pl-left) | one view at a time (.pl-center .pl-views)
              | floating column (.pl-right .pl-float: label, tab list, + Add)
     ≤1080px  one column: summary, a sticky sideways tab strip, the view
   ===================================================================== */
.pl-grid {
  width: min(1500px, calc(100% - 56px)); margin: 0 auto; padding: 24px 0 92px;
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 720px) minmax(220px, 1fr);
  gap: 28px; align-items: start;
}
.pl-center { min-width: 0; }
.pl-views { display: grid; gap: 20px; }
.pl-views > [hidden] { display: none !important; }
.pl-left, .pl-right .pl-float { position: sticky; top: calc(var(--nav-h, 76px) + 14px); }
.pl-right .pl-float { display: grid; gap: 14px; max-width: 260px; }

/* label at the top of the right column (MERPY's circle label) */
.pl-trip {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); border: 2px solid var(--edge); border-radius: 16px; box-shadow: var(--hard-sm); font: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.pl-trip:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink-sh, var(--ink)); }
.pl-trip:active { transform: translateY(2px); box-shadow: none; }
.pl-trip-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--edge); background: var(--app-soft); }
.pl-trip-ic img { width: 26px; height: 26px; }
.pl-trip-t { display: grid; gap: 2px; min-width: 0; }
.pl-trip-t b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-trip-t small { font-size: 12.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* + Add …: MERPY's "+ Add a quest" */
.pl-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 800; color: #fff; background: var(--accent);
  border: 2px solid var(--edge); border-radius: 16px; box-shadow: var(--hard-sm);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pl-add b { font-size: 20px; line-height: 1; }
.pl-add:active, .pl-add.active { transform: translateY(3px); box-shadow: none; }
.pl-add.ghost { background: var(--surface); color: var(--text); font-size: 14px; padding: 10px; }
.pl-views > .pl-add-inline { display: none !important; }

/* the section tab list: sticker + label rows; a highlight glides to the current one */
.planner-tabbar {
  position: relative; display: grid; gap: 6px; padding: 10px;
  border: 2px solid var(--edge); border-radius: 22px; background: var(--surface); box-shadow: var(--hard-sm);
}
.planner-tab {
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer; box-shadow: none;
  position: relative; z-index: 1; min-height: 42px; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px; align-items: center; padding: 0 10px; border-radius: 15px;
  color: var(--muted); font-size: 13px; font-weight: 800; text-decoration: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.planner-tab:hover, .planner-tab.active { background: var(--app-soft); color: var(--text); }
.planner-tab.active { box-shadow: inset 0 0 0 2px var(--app); }
.planner-tab:hover { transform: translateX(2px); }
.planner-tab[hidden] { display: none; }
.tab-ic { width: 22px; height: 22px; display: block; }
.pl-tab-glide {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: 15px; background: var(--app-soft); box-shadow: inset 0 0 0 2px var(--app);
  transition: transform 820ms cubic-bezier(.34, 1.15, .5, 1), width 820ms cubic-bezier(.34, 1.15, .5, 1),
              height 820ms cubic-bezier(.34, 1.15, .5, 1), opacity 200ms ease;
}
.pl-tab-glide.no-anim { transition: none; }
.planner-tabbar.has-glide .planner-tab.active { background: transparent; box-shadow: none; }
.planner-tabbar.has-glide .planner-tab.active:hover { background: transparent; }
.planner-tab .tab-ic { transition: transform 300ms ease; }
.planner-tab:hover .tab-ic { transform: translateY(-2px) rotate(-6deg); }
.planner-tab.just .tab-ic { animation: plTabPop 720ms cubic-bezier(.34, 1.4, .5, 1); }
@keyframes plTabPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18) rotate(-6deg); } 100% { transform: none; } }

@media (max-width: 1080px) {
  .pl-grid { width: min(760px, calc(100% - 28px)); grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pl-left, .pl-right, .pl-center, .pl-float { min-width: 0; }
  .pl-left { position: static; order: 1; }
  .pl-right { order: 2; position: sticky; top: calc(var(--nav-h, 68px) + 6px); z-index: 30; }
  .pl-center { order: 3; }
  .pl-right .pl-float { position: static; max-width: none; display: block; }
  .pl-trip, .pl-add { display: none; }
  .pl-views > .pl-add-inline:not([hidden]) { display: flex !important; justify-content: center; width: 100%; }
  /* the tab list becomes a sticky sideways strip */
  .planner-tabbar { display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .planner-tabbar::-webkit-scrollbar { display: none; }
  .planner-tab { flex: none; grid-template-columns: 22px auto; min-height: 38px; scroll-snap-align: center; }
  .planner-tab:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-tab-glide, .planner-tab .tab-ic, .pl-trip, .pl-add { transition: none; }
  .planner-tab.just .tab-ic { animation: none; }
  .pl-trip:hover { transform: none; }
}
.pl-views > [data-off] { display: none !important; }   /* views switched by class-free attribute (MaliBills keeps [hidden] for "empty") */
.planner-tab .ui-ic { width: 22px; height: 22px; display: block; }


/* MOTION v4 (2026-10-11): the tab highlight glides quickly */
.pl-tab-glide { transition: transform 380ms cubic-bezier(.3, 1.15, .5, 1), width 380ms cubic-bezier(.3, 1.15, .5, 1), height 380ms cubic-bezier(.3, 1.15, .5, 1), opacity 160ms ease; }
.planner-tab.just .tab-ic { animation-duration: 420ms; }