/* UX-C: the five places, swipe and hover actions on cards, and the drop dock (pm-gestures.js).
   Loaded just before quiet-glass.css; Quiet Glass tokens only (ink, glass, the status hues). */

/* ---- the five places: which tab-bar items each view shows ---- */
:root[data-view="simple"] .uxc-full-only { display: none !important; }
:root:not([data-view="simple"]) .uxc-simple-only { display: none !important; }
@media (max-width: 350px) {
  /* very narrow, Simple view: there's no More sheet, so the mic keeps its place and New task gives
     way (it's on the board's own header) */
  :root[data-view="simple"] .fab-stack > .fab-talk:not([hidden]) { display: grid; }
  :root[data-view="simple"] .fab-stack > .fab-add { display: none; }
}

/* ---- cards: room for a swipe ---- */
.pm-cell { position: relative; }
.pm-card { translate: var(--uxc-dx, 0) 0; }
@media (hover: none), (pointer: coarse) {
  #pm-lanes .pm-card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.pm-card.uxc-swiping { z-index: 2; background: var(--surface-solid); transition: none; }
.pm-card.uxc-anim { transition: translate 200ms var(--ease-calm); }
.pm-card.uxc-swiping:active, .pm-card.uxc-open:active { transform: none; }

/* nothing scrolls sideways while a card is out to one side */
html.uxc-swipe-on, html.uxc-swipe-on body { overflow-x: clip; }

/* what a swipe uncovers: Finish (left) or the date tray (right), behind the card */
.uxc-under { position: absolute; z-index: 1; top: var(--uxc-top); left: var(--uxc-left); width: var(--uxc-w); height: var(--uxc-h); display: flex; align-items: stretch; justify-content: space-between; border-radius: var(--r-row); overflow: hidden; }
.uxc-under-finish { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: var(--r-row); background: var(--ok-soft); color: var(--ok); font-size: 15px; font-weight: 600; opacity: 0; }
.uxc-under-finish svg { width: 22px; height: 22px; }
.uxc-under:has(+ .pm-card.uxc-right) .uxc-under-finish { opacity: 1; }
.uxc-under:has(+ .pm-card.uxc-commit.uxc-right) .uxc-under-finish { background: var(--ok); color: var(--bg); }
.uxc-tray { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; opacity: 0; }
.uxc-under:has(+ .pm-card.uxc-left) .uxc-tray, .uxc-under:has(+ .pm-card.uxc-open) .uxc-tray { opacity: 1; }
.uxc-tray-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 64px; height: 44px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--btn-r); background: var(--surface-solid); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.uxc-tray-btn:active { transform: scale(0.97); }
.uxc-tray-btn:focus-visible, .uxc-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* a date input laid over its button: a tap opens the system date picker */
.uxc-pick { position: relative; overflow: hidden; }
.uxc-pick input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.uxc-pick input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---- mouse: the same actions as small icon buttons on hover or keyboard focus ---- */
/* They sit on the card's top edge (over its padding, never over its own buttons) and show after a
   short rest, so a pointer just passing on its way to Chase or → In motion never meets them. */
.uxc-acts { position: absolute; top: -30px; right: 10px; z-index: 3; display: none; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-solid); box-shadow: var(--elevation); visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .pm-card .uxc-acts { display: flex; }
  .pm-card:is(:hover, :focus-within) .uxc-acts { visibility: visible; transition: visibility 0s 250ms; }
  .pm-card:focus-within .uxc-acts { transition-delay: 0s; }
}
:root body.uxc-dragging .uxc-acts { display: none; }
.uxc-act { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }
.uxc-act:hover { background: var(--raised); }
.uxc-act svg { width: 16px; height: 16px; pointer-events: none; }
.uxc-act-finish { color: var(--ok); }

/* ---- touch drag: the card under the finger ---- */
.uxc-ghost { position: fixed; z-index: 60; top: 0; left: 0; width: var(--uxc-gw); max-width: 80vw; margin: 0; pointer-events: none; translate: calc(var(--uxc-gx) - 50%) calc(var(--uxc-gy) - 70%); background: var(--surface-solid); box-shadow: var(--elevation), 0 18px 40px rgb(0 0 0 / 0.35); opacity: 0.95; rotate: -1.5deg; animation: none !important; }

/* ---- the drop dock: slides up while a card is dragged ---- */
.uxc-dock { position: fixed; z-index: 50; left: 50%; bottom: 16px; width: min(1100px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elevation-sheet); -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet); translate: -50% calc(100% + 24px); opacity: 0; transition: translate 220ms var(--ease-calm), opacity 220ms; }
.uxc-dock[hidden], .uxc-dock-row[hidden], .uxc-drop[hidden] { display: none; }
.uxc-dock.on { translate: -50% 0; opacity: 1; }
.uxc-dock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uxc-dock-label { margin-right: 4px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.uxc-drop { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background 120ms, color 120ms; }
.uxc-drop * { pointer-events: none; }
.uxc-drop svg { width: 16px; height: 16px; }
.uxc-drop.here { border-color: var(--input); }
.uxc-drop.here::after { content: '· here'; color: var(--muted); font-weight: 500; }
.uxc-drop-finish { color: var(--ok); }
.uxc-drop.over { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
@media (max-width: 760px) {
  .uxc-dock { left: 0; right: 0; bottom: 0; width: auto; translate: 0 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--surface-solid); }
  .uxc-dock.on { translate: 0 0; }
  .uxc-dock-label { flex: 1 1 100%; }
  .uxc-drop { padding: 0 12px; font-size: 14px; }
}

/* ---- Finish: a check lands where the card was ---- */
.uxc-landed { position: fixed; z-index: 70; top: var(--uxc-ly); left: var(--uxc-lx); display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--ok); color: var(--bg); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); pointer-events: none; animation: uxc-land 820ms var(--ease-calm) both; }
.uxc-landed svg { width: 28px; height: 28px; stroke-width: 2.4; }
@keyframes uxc-land {
  0% { opacity: 0; scale: 0.4; }
  35% { opacity: 1; scale: 1.12; }
  55% { scale: 0.96; }
  70% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1; translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .uxc-landed { animation: none !important; opacity: 1; } /* the check shows, still, then goes */
  .pm-card.uxc-anim, .uxc-dock { transition: none; }
  .uxc-ghost { rotate: none; }
}