/* ============================================================
   SHARED GOALS v29 — keyframes + the two bits inline styles can't
   carry (a ::before pseudo-element and scrollbar-hiding), scoped
   under .sharedgoals. Only keyframes the ported style strings
   actually reference; st-pop is reused from status2.css (not
   redefined). Reduced-motion respected.
   ============================================================ */

@keyframes gp-fade{from{opacity:0}to{opacity:1}}

@keyframes gp-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes tab-charge{from{opacity:.22}to{opacity:1}}
@keyframes tab-echo{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.3,1.55);opacity:0}}

/* roster day diamond — missed-day ring drawn as two clipped fills
   (the design's style-before; a border would be clipped away) */

.sharedgoals input::placeholder{color:var(--dimmer)}
.sharedgoals [data-gp-sheet]::-webkit-scrollbar{width:0;height:0}
.sharedgoals [data-tabbar]::-webkit-scrollbar{width:0;height:0}
[data-share-card]::-webkit-scrollbar{width:0;height:0}

@media (prefers-reduced-motion: reduce) and (scripting: none){.sharedgoals *,[data-share-card] *{animation:none!important;transition-duration:0s!important}}

/* ADD IN WORKSHOP (Goals No Goals, plans/32's return): hover bg 16% + the accent border over 120 Move (pointers that hover), press bg 22% */
.gp-addws { transition: background var(--d-micro) var(--e-move), border-color var(--d-micro) var(--e-move); }
@media (hover: hover) { .gp-addws:hover { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; border-color: var(--accent) !important; } }
.gp-addws:active { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }

/* THE PHONE'S SHEET (Motion System E1): the scrim 240 Arrive in / 200 Leave out (flat, no blur on the phone); the sheet rises from 104%
   on 340 Arrive with its opacity over 160, and leaves on 240 Leave. Transform and opacity only. */
@keyframes gp-sheet-in { from { transform: translateY(104%) } to { transform: none } }
@keyframes gp-sheet-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes gp-sheet-out { from { transform: none; opacity: 1 } to { transform: translateY(104%); opacity: 0 } }
@media (hover: hover) { .gp-manage:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; border-color: var(--accent) !important; } }
.gp-manage { transition: background var(--d-micro) var(--e-move), border-color var(--d-micro) var(--e-move); }