/* Shared "picks" UI — pick buttons, the live-sync status row, and the
   picked-item highlight. Linked by both itinerary pages. Assumes the dossier's
   CSS custom properties (--aqua, --aqua-deep, --ink, --ink-soft, --ink-faint,
   --glass-line, --focus) are already defined by the page's inline <style>. */

/* The Add / "✓ name" toggle injected into each item header. Sized to match the
   status pills beside it; when picked it becomes a solid aqua "✓ name" stamp. */
.pick-btn{
  margin:0 0 0 auto;
  display:inline-flex;align-items:center;
  font-family:inherit;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:5px 12px;border-radius:100px;white-space:nowrap;cursor:pointer;
  color:var(--ink-soft);background:rgba(255,255,255,.05);border:1px solid var(--glass-line);
  transition:color .18s,border-color .18s,background .18s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.pick-btn:hover{border-color:var(--aqua);color:var(--ink);}
.pick-btn:active{transform:scale(.96);}
.pick-btn:focus-visible{outline:none;box-shadow:var(--focus);}
.pick-btn.on{background:linear-gradient(135deg,var(--aqua),var(--aqua-deep));border-color:var(--aqua);color:#06141b;font-weight:700;}
/* The Reject button shares the pill base; when active it's a warm coral stamp. */
.pick-btn.reject:hover{border-color:#e8857b;color:var(--ink);}
.pick-btn.reject.on{background:linear-gradient(135deg,#e8857b,#c8564b);border-color:#e8857b;color:#2a0c08;font-weight:700;}

/* Header layout: the Add/✓ pill floats top-right and the item name flows beside
   it, wrapping to the FULL width on later lines (no narrow column); the
   mode/status pills sit on their own line underneath via the .hp group. */
.item .h{display:block;margin-bottom:6px;}
.item .h::after{content:"";display:block;clear:both;}
.item .h > .pick-actions{float:right;display:inline-flex;gap:6px;margin:1px 0 6px 12px;}
.pick-actions .pick-btn{margin:0;}
.item .h > .name{display:inline;}
.item .h > .hp{clear:both;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:9px;}
.item .h > .hp:empty{display:none;}

/* Picked item — an aqua check medallion before the name, plus a soft
   aqua-tinted panel behind the item. The panel is a ::before that extends into
   the card gutter, so it has breathing room and the dashed item separators stay
   clean & full-width (no layout shift on toggle). */
.item{position:relative;z-index:0;}
.item.is-picked::before{content:"";position:absolute;z-index:-1;inset:6px -14px;border-radius:13px;background:rgba(95,214,198,.09);box-shadow:inset 0 0 0 1px rgba(95,214,198,.4);}
/* The last item has little bottom padding, so drop the panel lower to clear its chips. */
.item:last-child.is-picked::before{bottom:-8px;}

/* Stingray departure-dock picks — the .op operator rows inside the .ops block.
   The pick button sits top-right of the row; a picked dock gets a soft panel. */
.op{position:relative;z-index:0;}
.op > .pick-actions{position:absolute;top:0;right:0;display:inline-flex;gap:6px;}
.op-main{padding-right:132px;}
.op.is-picked::before{content:"";position:absolute;z-index:-1;inset:-7px -10px;border-radius:12px;background:rgba(95,214,198,.08);box-shadow:inset 0 0 0 1px rgba(95,214,198,.35);}
.op.is-picked .op-name{color:var(--aqua);font-weight:700;}
.item.is-picked > .h > .name{font-weight:700;}
.item.is-picked > .h > .name::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:9px;border-radius:50%;background:var(--aqua);color:#06141b;font-size:.7rem;font-weight:800;transform:translateY(-1px);}

/* Rejected item (no approvers) — a coral ✕ medallion + soft coral panel, so a
   vetoed pick is easy to spot when you scan back through. A split item (some
   yes, some no) keeps the aqua "picked" look and just shows both chip rows. */
.item.is-rejected:not(.is-picked)::before{content:"";position:absolute;z-index:-1;inset:6px -14px;border-radius:13px;background:rgba(232,133,123,.07);box-shadow:inset 0 0 0 1px rgba(232,133,123,.32);}
.item:last-child.is-rejected:not(.is-picked)::before{bottom:-8px;}
.op.is-rejected:not(.is-picked)::before{content:"";position:absolute;z-index:-1;inset:-7px -10px;border-radius:12px;background:rgba(232,133,123,.07);box-shadow:inset 0 0 0 1px rgba(232,133,123,.3);}
.op.is-rejected:not(.is-picked) .op-name{color:#e89589;font-weight:700;}
.item.is-rejected:not(.is-picked) > .h > .name{font-weight:700;}
.item.is-rejected:not(.is-picked) > .h > .name::before{content:"\2715";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:9px;border-radius:50%;background:#e8857b;color:#2a0c08;font-size:.7rem;font-weight:800;transform:translateY(-1px);}

/* Approver chips — "Approved · Mom ×  Dad ×" — shown under a picked item's
   header (and under a dock's .op-main). Each name has a × to remove that one
   approval; anyone can remove anyone's. Your own chip is brighter (.me). */
.pickby{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 9px;}
.pickby:empty{display:none;}
.pickby-lab{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-right:2px;}
.pickby-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:100px;font-size:.74rem;font-weight:600;color:var(--ink);background:rgba(95,214,198,.1);border:1px solid rgba(95,214,198,.28);}
.pickby-chip.me{background:rgba(95,214,198,.2);border-color:var(--aqua);}
.pickby-nm{line-height:1.1;}
.pickby-x{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.92rem;line-height:1;color:var(--ink-soft);background:rgba(255,255,255,.08);transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.pickby-x:hover{background:var(--aqua);color:#06141b;}
.pickby-x:focus-visible{outline:none;box-shadow:var(--focus);}

/* Rejecter chips — "Rejected · Mom ×" — the coral counterpart to .pickby. */
.pickno{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 9px;}
.pickno:empty{display:none;}
.pickno-lab{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#cf8278;font-weight:700;margin-right:2px;}
.pickno-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:100px;font-size:.74rem;font-weight:600;color:var(--ink);background:rgba(232,133,123,.12);border:1px solid rgba(232,133,123,.32);}
.pickno-chip.me{background:rgba(232,133,123,.24);border-color:#e8857b;}
.pickno-x{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.92rem;line-height:1;color:var(--ink-soft);background:rgba(255,255,255,.08);transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.pickno-x:hover{background:#e8857b;color:#2a0c08;}
.pickno-x:focus-visible{outline:none;box-shadow:var(--focus);}

/* Intro line in the hero alert. */
.picknote{margin-top:16px;color:var(--ink-soft);font-size:.9rem;line-height:1.5;}
.picknote strong{color:var(--ink);font-weight:600;}

/* Live-sync status row injected into the hero alert. */
.syncrow{
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;
  font-size:.84rem;color:var(--ink-soft);
}
.syncind{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink-soft);}
.syncind .dotc{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex:none;}
.syncind.on{color:var(--ink);}
.syncind.on .dotc{background:var(--aqua);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,214,198,.45);}70%{box-shadow:0 0 0 7px rgba(95,214,198,0);}100%{box-shadow:0 0 0 0 rgba(95,214,198,0);}}
.synccount{color:var(--ink-faint);}
.syncname{
  margin-left:auto;display:inline-flex;align-items:center;min-height:38px;
  padding:8px 16px;border-radius:100px;
  font:inherit;font-size:.78rem;font-weight:600;
  color:var(--aqua);background:rgba(95,214,198,.08);
  border:1px solid rgba(95,214,198,.32);cursor:pointer;
  transition:background .18s,border-color .18s;
}
.syncname:hover{background:rgba(95,214,198,.14);border-color:var(--aqua);}
.syncname:focus-visible{outline:none;box-shadow:var(--focus);}
.syncreset{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border-radius:100px;font:inherit;font-size:.78rem;font-weight:600;color:var(--ink-faint);background:transparent;border:1px solid var(--glass-line);cursor:pointer;transition:color .18s,border-color .18s;}
.syncreset:hover{color:var(--ink-soft);border-color:var(--ink-soft);}
.syncreset:focus-visible{outline:none;box-shadow:var(--focus);}
@media (max-width:560px){.syncname{margin-left:0;}.item.is-picked::before{inset:6px -12px;}}

@media print{
  .pick-btn,.syncrow,.picknote,.pickby-x,.pickno-x{display:none!important;}
  .pickby-chip,.pickno-chip{background:none;border:none;padding:0 6px 0 0;}
  .item.is-picked::before,.op.is-picked::before,.item.is-rejected::before,.op.is-rejected::before{display:none;}
  .item.is-picked > .h > .name,.item.is-rejected:not(.is-picked) > .h > .name{font-weight:700;}
  .item.is-picked > .h > .name::before{content:"\2713\00a0";background:none;color:inherit;width:auto;height:auto;margin:0;transform:none;}
  .item.is-rejected:not(.is-picked) > .h > .name::before{content:"\2715\00a0";background:none;color:inherit;width:auto;height:auto;margin:0;transform:none;}
}