/* ---- UX-F: private by default, share what you choose (pm-share.js) ----
   The Share sheet, "From Cameron" on what's shared with you, and the face stack on tiles you
   shared. Quiet Glass tokens only; ink is the accent; 44 px taps, 52 px primary. */

.face.xs { width: 18px; height: 18px; font-size: 8px; }

/* a tile someone else made */
.pm-from { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: var(--fs-cap, 12px); font-weight: 600; line-height: 18px; }
.pm-from-view { font-weight: 500; }
.pm-from-line { margin: 0 0 0 8px; }
.pm-from-line[hidden] { display: none; }

/* a tile you shared */
.pm-shared { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--muted); }
.pm-shared-ic svg, .pm-share-proj .pm-shared-ic svg { width: 14px; height: 14px; display: block; }
.pm-shared .face-stack .face + .face { margin-left: -5px; }

/* the Share button in the task sheet header: lit while it's shared */
.pm-share-btn.on { color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.pm-share-proj { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 8px; }

/* the sheet */
dialog.panel.pm-share { width: min(440px, calc(100vw - 32px)); padding: 22px; }
.pm-share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pm-share-title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pm-share-note { margin: 8px 0 16px; color: var(--muted); font-size: var(--fs-meta, 14px); }
.pm-share-list { display: grid; gap: 8px; max-height: 52dvh; overflow: auto; }
.pm-share-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pm-share-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--text); font: inherit; font-size: var(--fs-body, 16px); cursor: pointer; }
.pm-share-chip .face.sm { width: 32px; height: 32px; font-size: 12px; }
.pm-share-chip.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.pm-share-chip:disabled { cursor: default; opacity: 1; }
.pm-share-sub { color: var(--muted); font-size: var(--fs-cap, 12px); }
.pm-share-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.pm-share-seg button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: var(--fs-meta, 14px); font-weight: 600; cursor: pointer; }
.pm-share-seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.pm-share-done { width: 100%; height: var(--btn-h-lg, 52px); margin-top: 18px; }
.pm-share-empty { color: var(--muted); }
@media (max-width: 760px) {
  dialog.panel.pm-share { width: 100%; max-width: 100%; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .pm-share-chip { transition: border-color .15s var(--ease-calm), box-shadow .15s var(--ease-calm); }
}