/* "Your week": a pill that opens into the recap card (public/js/your-week.js).
   Tokens only from app.css; the brand pill and the stat row are the
   site-wide ones. The mount is empty until the recap API answers for a
   signed-in member the flag allows. html[data-yw] (set before first paint
   when this browser showed the pill last time) reserves the pill's height,
   so its arrival moves nothing. */
.yw-mount:empty{display:none}
html[data-yw] .yw-mount:empty{display:block;height:48px;margin:0 0 18px}
.yw{--yw-h:48px;position:relative;box-sizing:border-box;margin:0 0 18px;border:1px solid color-mix(in srgb,var(--violet) 28%,var(--rule));
  border-radius:calc(var(--yw-h) / 2);background:linear-gradient(100deg,color-mix(in srgb,var(--violet) 9%,var(--pane)) 0%,var(--pane) 62%);
  transition:border-radius .2s ease-out}
.yw.is-open{border-radius:var(--r-lg)}
.yw-pill{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;height:calc(var(--yw-h) - 2px);margin:0;padding:0 14px 0 16px;
  border:0;border-radius:inherit;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.yw-pill:hover .yw-pill-act{color:var(--violet)}
.yw-pill:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.yw-dot{flex:none;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--violet) 35%,var(--rule))}
.yw.is-new .yw-dot{background:var(--violet-fill);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 22%,transparent)}
.yw-pill-k{flex:none;font-size:14px;font-weight:700;color:var(--violet)}
.yw-pill-sep{flex:none;color:var(--ink-2)}
.yw-pill-t{flex:0 1 auto;min-width:0;overflow:hidden;font-size:14.5px;font-weight:600;color:var(--ink);text-overflow:ellipsis}
.yw-short{display:none}
.yw-new{flex:none;padding:3px 9px;border-radius:var(--r-pill);background:var(--violet-fill);color:#fff;font-size:12px;font-weight:700;line-height:1.2}
.yw-pill-act{flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.yw-act-close,.yw.is-open .yw-act-open{display:none}
.yw.is-open .yw-act-close{display:inline}
.yw-chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease-out}
.yw.is-open .yw-chev{transform:rotate(180deg)}
/* A gentle glow while there is something new; still, with a ring, for reduced motion. */
@keyframes yw-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet) 0%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--violet) 18%,transparent)}}
.yw.is-new:not(.is-open){border-color:color-mix(in srgb,var(--violet) 55%,var(--rule));animation:yw-glow 2.6s ease-in-out 3}
@media (prefers-reduced-motion:reduce){
  .yw,.yw-chev{transition:none}
  .yw.is-new:not(.is-open){animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 20%,transparent)}
  .yw.is-anim .yw-panel{transition:none}
}

/* The card opens in place below the pill. */
.yw-panel{display:grid;grid-template-rows:0fr}
.yw-panel[hidden]{display:none}
.yw.is-anim .yw-panel{transition:grid-template-rows .22s ease-out}
.yw.is-shown .yw-panel{grid-template-rows:1fr}
.yw-panel-in{min-height:0;overflow:hidden}
.yw-card{box-sizing:border-box;padding:4px 22px 20px;border-top:1px solid var(--rule)}
.yw-head{margin:14px 0 12px}
.yw-eyebrow{display:block;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:var(--violet)}
.yw-title{margin:2px 0 0;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.yw-title:focus{outline:none}
.yw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin:12px 0 0}
.yw-foot .yw-links{margin:0}
.yw-min{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 -10px 0 auto;padding:0 12px;border:0;border-radius:var(--r-md);background:none;color:var(--ink-2);font:650 13.5px var(--sans);cursor:pointer}
.yw-chev-up{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.yw-min:hover{background:color-mix(in srgb,var(--violet) 10%,var(--pane));color:var(--ink)}
.yw-min:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.yw-card .stat-row{margin:0 0 14px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.yw-section{margin:0 0 12px}
.yw-section:last-of-type{margin-bottom:0}
.yw-h{margin:0 0 4px;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.yw-note{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.yw-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.yw-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:28px;font-size:14px;line-height:1.4;color:var(--ink)}
.yw-item .brand-pill{flex:none}
.yw-event{color:var(--ink-2)}
.yw-event.is-up{color:var(--tone-money);font-weight:600}
.yw-event.is-down{color:var(--tone-posts);font-weight:600}
.yw-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--rule)}
.yw-pick:first-child{border-top:0;padding-top:0}
.yw-pick-pay{grid-column:2;grid-row:1;font-size:13.5px;font-weight:650;color:var(--tone-pay);white-space:nowrap;font-variant-numeric:tabular-nums}
.yw-pick-why{grid-column:1/3;margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.yw-line{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.yw-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;font-size:14px}
.yw-links a{color:var(--violet);font-weight:650;text-decoration:none}
.yw-links a:hover{text-decoration:underline}
.yw-stale{margin:0 0 10px;font-size:13px;color:var(--ink-2)}
@media (max-width:600px){
  .yw-pill{gap:8px;padding:0 10px 0 14px}
  .yw-long,.yw-act-open,.yw-act-close,.yw-new{display:none!important}
  .yw-short{display:inline}
  .yw-pill-t{font-size:14px}
  .yw-card{padding:2px 14px 16px}
  .yw-card .stat-row{padding:10px 0}
  .yw-pick{grid-template-columns:minmax(0,1fr)}
  .yw-pick-pay{grid-column:1;grid-row:auto}
  .yw-pick-why{grid-column:1}
}