/* xp-longpress.css — experimental UX styles (branch experimental/mobile-ux-v2): the
   long-press power-menu bottom sheet. ALL rules scoped under html.xp so nothing here
   can ever paint on the shipped experience while the flag is off.
   Terminal aesthetic: same panel/hairline/amber vocabulary as .modal-card, lowercase
   labels, mono UI font — a sibling of the existing modal idiom, not a new one. */

/* Anchored to the BOTTOM of the viewport (mobile-first law: thumb-reachable, never
   the tap point) via a flex-end backdrop. --z-sheet is above the hover-card rig and the
   mobile viewer so a long-press sheet is always the topmost thing — that ordering is the
   ruling this sheet was written to, and the ladder in app.css now states it by name. */
html.xp .lp-backdrop{
  position:fixed; inset:0; z-index:var(--z-sheet, 1400);
  background:rgba(4,5,7,.6);
  display:flex; align-items:flex-end; justify-content:center;
}
html.xp.lp-open{ overflow:hidden; } /* background scroll lock while the sheet is up */

html.xp .lp-sheet{
  width:100%; max-width:480px;
  background:var(--panel); color:var(--ink); font-family:var(--ui);
  border:1px solid var(--accent); border-bottom:none;
  border-radius:12px 12px 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.55);
  padding:0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  animation:lp-in .2s ease-out;
}
html.xp .lp-sheet.dragging{ transition:none; }
@keyframes lp-in{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  html.xp .lp-sheet{ animation:none; }
}

/* The grabber carries its own generous touch target (>=44px tall hit area) even
   though the visible pill is thin — a thumb should never have to aim precisely to
   start the dismiss-swipe. */
html.xp .lp-grabber{
  width:100%; height:28px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none;
}
html.xp .lp-grabpill{ width:36px; height:4px; border-radius:2px; background:var(--hair-hi); display:block; }

html.xp .lp-head{
  display:flex; align-items:center; gap:10px;
  padding-bottom:10px; margin-bottom:6px;
  border-bottom:1px solid var(--hair);
}
html.xp .lp-thumb{
  width:44px; height:44px; flex:0 0 auto;
  object-fit:cover; object-position:top;
  border:1px solid var(--hair-hi); background:var(--sunk);
}
html.xp .lp-title{
  font-size:12px; line-height:1.4; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

html.xp .lp-list{ display:flex; flex-direction:column; gap:2px; padding:4px 0 2px; }

/* >=44px touch targets throughout (mobile-first law). */
html.xp .lp-item{
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:44px; padding:10px 8px;
  background:none; border:none; border-radius:4px;
  color:var(--ink); font-family:var(--ui); font-size:12.5px;
  letter-spacing:calc(.02em * var(--track));
  text-align:left; text-decoration:none; cursor:pointer;
}
html.xp .lp-item:hover{ background:var(--raised); }
html.xp .lp-item:active{ background:var(--sunk); }
html.xp .lp-item:focus-visible{ outline:1px solid var(--accent); outline-offset:-1px; }
html.xp .lp-item:disabled{ opacity:.5; cursor:default; }
html.xp .lp-item .lp-ico{ width:20px; flex:0 0 auto; text-align:center; color:var(--accent); }
html.xp .lp-item .lp-lbl{ flex:1; }

/* A recognised long press swallows the tile's own hover/press chrome and the native
   OS "save image"/selection callout for as long as it is armed — the sheet itself is
   the feedback, a stray text-selection box or callout menu underneath would fight it. */
html.xp .tile.lp-armed{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}

html.xp .lp-toast{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%) translateY(6px);
  background:var(--raised); border:1px solid var(--accent); color:var(--bright);
  font-size:11px; letter-spacing:calc(.04em * var(--track));
  padding:6px 14px; border-radius:20px;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  white-space:nowrap;
}
html.xp .lp-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion:reduce){
  html.xp .lp-toast{ transition:none; }
}