/* 记忆 App · 共享事实 (js/apps/memory-shared-facts.js): the 总览 row, the list (#memory-sf) and the A1 notification card on the detail page */
#memory-sf-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* 总览 row */
.sf-home .sf-av{width:42px;height:42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:17px;background:linear-gradient(135deg,#b9a9d6,#8e7bb0)}
.sf-fine{margin:8px 4px 0;font-size:11.5px;line-height:1.65;color:var(--mm-ink2)}

/* list */
.sf-page{padding-top:2px}
.sf-head .ly-t h2{margin-top:2px}
.sf-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:-4px 6px 12px;font-size:11.5px;color:var(--mm-ink2)}
.sf-key span{display:inline-flex;align-items:center;gap:5px}
.sf-key i{width:8px;height:8px;border-radius:2px}
.sf-g{margin:0 0 12px;padding:0;overflow:hidden;animation:mo-in .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--k,0) * 70ms)}
.sf-g>h3{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--mm-ink)}
.sf-g>h3 .sf-gav{width:30px;height:30px;font-size:13px;flex:none}
.sf-g>h3 small{margin-left:auto;font-family:inherit;font-size:12px;font-weight:400;color:var(--mm-ink2)}
.sf-li{display:flex;align-items:center;gap:10px;width:100%;max-height:120px;padding:11px 14px;border:0;border-top:1px dashed var(--mm-line);background:none;font:inherit;color:var(--mm-ink);text-align:left;cursor:pointer;transition:background .5s}
.sf-li .k{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--kc) 22%,transparent);color:color-mix(in srgb,var(--kc) 80%,var(--mm-ink))}
.sf-li .k svg{width:16px;height:16px}
.sf-li .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sf-li .t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-li .t small{font-size:11.5px;color:var(--mm-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-li em{flex:none;font-style:normal;font-size:11px;color:var(--mm-ink2)}
.sf-li.bump{background:var(--mm-ap);animation:sfPop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes sfPop{from{transform:scale(.94)}}
.sf-li.gone{overflow:hidden;pointer-events:none;animation:sfGone .42s cubic-bezier(.5,0,.75,0) forwards}
@keyframes sfGone{60%{transform:scale(.7);opacity:0;max-height:120px}to{transform:scale(.7);opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-top-width:0}}
.sf-empty{margin:24px 12px;font-size:13px;line-height:1.7;color:var(--mm-ink2);text-align:center}

/* detail */
.sf-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 14px 4px}
.sf-hint{margin:-2px 0 0;text-align:center;font-size:11.5px;color:var(--mm-ink2)}
.sf-stline{display:flex;flex-wrap:wrap;gap:6px;padding:8px 6px 0}
.sf-stline span{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--mm-ap);color:var(--mm-ad);transition:background .3s,color .3s}
.sf-stline span.sl{background:color-mix(in srgb,var(--mm-ink2) 16%,transparent);color:var(--mm-ink2)}
.sf-seg button{position:relative;z-index:1;width:48px;padding:6px 0;text-align:center;transition:color .25s}
.sf-seg button[aria-checked="true"]{color:var(--mm-ad);font-weight:600}
.sf-ctl .r .tx b,.sf-ctl .r .tx small{transition:color .3s}
.sf-ctl .r.dim .tx b{color:var(--mm-ink2)}
.sf-st{flex:none;font-size:11px;padding:2px 9px;border-radius:999px;transition:background .3s,color .3s}
.sf-st.ok{background:color-mix(in srgb,#6f927d 20%,transparent);color:#4b6c59}
.sf-st.no{background:color-mix(in srgb,#a8506c 14%,transparent);color:#a8506c}
.sf-st.flip{animation:sfFlip .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes sfFlip{from{transform:scale(.8);opacity:.3}}
.sf-ctlnote{margin:0;padding:2px 16px 14px;font-size:11.5px;line-height:1.6;color:var(--mm-ink2)}
#memory-detail-body .sf-detail .mm-actions{margin-top:6px;padding-bottom:calc(18px + var(--sab,0px))}

/* A1 notification card: the fact on top, the older updates as the cards stacked under it */
.sf-hn{position:relative;display:block;width:100%;max-width:300px;padding:0 0 14px;border:0;background:none;font:inherit;color:var(--mm-ink);text-align:left;cursor:pointer}
div.sf-hn{cursor:default}
.sf-hn .c{position:relative;z-index:2;display:block;overflow:hidden;padding:12px 14px 13px;border-radius:22px;background:color-mix(in srgb,var(--mm-solid) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--mm-solid) 92%,transparent);box-shadow:0 18px 30px -18px rgba(70,55,100,.5)}
.sf-hn .s1,.sf-hn .s2{position:absolute;bottom:6px;left:12px;right:12px;height:34px;border-radius:0 0 20px 20px;background:color-mix(in srgb,var(--mm-solid) 60%,transparent);border:1px solid color-mix(in srgb,var(--mm-solid) 80%,transparent);z-index:1}
.sf-hn .s2{bottom:0;left:26px;right:26px;opacity:.6;z-index:0}
.sf-hn .top,.sf-hx .it2 .top{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mm-ink2)}
.sf-hn .top i,.sf-hx .it2.cur .top i{position:relative;flex:none;width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.sf-hn .top i svg,.sf-hx .it2.cur .top i svg{width:13px;height:13px}
.sf-hn .top>span,.sf-hx .it2 .top>span{flex:1}
.sf-hn b{display:block;margin-top:8px;font-size:14.5px;font-weight:600}
.sf-hn .p{display:block;margin-top:2px;font-size:13px;line-height:1.6}
.sf-hnic .lk{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border-radius:50%;background:#a8506c;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--mm-solid)}
.sf-hnic .lk svg{width:8px;height:8px;color:#fff;stroke-width:2.4}
.sf-hnic .lk.pop{animation:sfLk .45s cubic-bezier(.3,1.6,.5,1) both}
.sf-hnic .lk.out{animation:sfLkOut .2s ease both}
@keyframes sfLk{from{transform:scale(.85);opacity:0}}
@keyframes sfLkOut{to{transform:scale(0);opacity:0}}
.sf-hn.arrive .c{animation:sfIn .6s cubic-bezier(.3,1.45,.5,1) both}
.sf-hn.arrive .s1{animation:sfS .5s cubic-bezier(.3,1.3,.5,1) .08s both}
@keyframes sfIn{from{transform:translateY(-28px) scale(.93);opacity:0}}
@keyframes sfS{from{transform:translateY(-16px);opacity:0}}
.sf-hn.sweep .c::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,#fff 75%,transparent) 50%,transparent 70%);transform:translateX(-110%);animation:sfSweep .9s ease .1s both;pointer-events:none}
@keyframes sfSweep{to{transform:translateX(110%)}}

/* expanded: the history fans out below the card */
.sf-hx{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px}
.sf-hx .hd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px;font-size:12px;color:var(--mm-ink2)}
.sf-hx .hd span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-hx .hd button{flex:none;padding:5px 12px;border-radius:999px;font:inherit;font-size:12px;background:color-mix(in srgb,var(--mm-solid) 75%,transparent);border:1px solid var(--mm-line);color:var(--mm-ink);cursor:pointer}
.sf-hx .it2{position:relative;padding:11px 14px;border-radius:20px;background:color-mix(in srgb,var(--mm-solid) 72%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--mm-solid) 90%,transparent);box-shadow:0 12px 24px -18px rgba(70,55,100,.5)}
.sf-hx .it2.cur{padding:12px 14px 13px;border-radius:22px;background:color-mix(in srgb,var(--mm-solid) 84%,transparent)}
.sf-hx .it2 .top{font-size:11px}
.sf-hx .it2:not(.cur) .top i{flex:none;width:18px;height:18px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.sf-hx .it2:not(.cur) .top i svg{width:11px;height:11px}
.sf-hx .it2 p{margin:5px 0 0;font-size:13px;line-height:1.55}
.sf-hx .it2.cur b{display:block;margin-top:8px;font-size:14.5px;font-weight:600}
.sf-hx .it2.cur p{margin-top:2px;line-height:1.6}
.sf-hx .hmon{margin:6px 6px 0;font-size:11.5px;font-weight:600;color:var(--mm-ink2);letter-spacing:.06em}
.sf-hx .hmore{padding:10px;border-radius:16px;font:inherit;font-size:12.5px;color:var(--mm-ad);background:color-mix(in srgb,var(--mm-solid) 55%,transparent);border:1px dashed var(--mm-line);text-align:center;cursor:pointer}
.sf-hx.open .it2:not(.cur),.sf-hx.open .hmon{animation:sfFan .52s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--n) * 45ms)}
.sf-hx.open .hd{animation:sfHd .3s ease both}
.sf-hx.closing .it2:not(.cur),.sf-hx.closing .hmon,.sf-hx.closing .hmore{animation:sfFanC .26s ease both}
.sf-hx.closing .hd{animation:sfHdC .2s ease both}
@keyframes sfFan{from{transform:translateY(calc(var(--n) * -62px)) scale(.94);opacity:0}}
@keyframes sfFanC{to{transform:translateY(calc(var(--n,1) * -62px)) scale(.94);opacity:0}}
@keyframes sfHd{from{opacity:0}}@keyframes sfHdC{to{opacity:0}}

/* edit dialog */
.sf-ed h3{margin:0;font-size:17px;font-weight:600;text-align:center}
.sf-ed .sub{margin:6px 0 12px;font-size:12.5px;line-height:1.6;color:var(--mm-ink2);text-align:center}
.sheet .sf-ta{box-sizing:border-box;width:100%;min-height:96px;resize:none;border-radius:14px;border:1px solid var(--mm-line);background:var(--mm-ap);padding:10px 12px;height:auto;font:15px/1.75 var(--font-display);color:var(--mm-ink);outline:none;transition:border-color .2s}
.sheet .sf-ta:focus{border-color:var(--mm-a)}
.sf-cnt{display:flex;justify-content:flex-end;margin-top:6px;font-size:11.5px;color:var(--mm-ink2);font-variant-numeric:tabular-nums}
.sf-ed .mm-go-bt .yes:disabled{opacity:.45;cursor:default}

@media (prefers-reduced-motion:reduce){.sf-g,.sf-li.bump,.sf-st.flip,.sf-hn.arrive .c,.sf-hn.arrive .s1,.sf-hx.open .it2,.sf-hx.open .hmon,.sf-hx.open .hd,.sf-hnic .lk.pop{animation:none}.sf-hn.sweep .c::after{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sf-st.ok{background:color-mix(in srgb,#6f927d 26%,transparent);color:#a9cdb5}:root:not([data-theme="light"]) .sf-st.no{background:color-mix(in srgb,#e6a6bc 18%,transparent);color:#e6a6bc}:root:not([data-theme="light"]) .sf-li .k{color:color-mix(in srgb,var(--kc) 50%,var(--mm-ink))}}
:root[data-theme="dark"] .sf-st.ok{background:color-mix(in srgb,#6f927d 26%,transparent);color:#a9cdb5}:root[data-theme="dark"] .sf-st.no{background:color-mix(in srgb,#e6a6bc 18%,transparent);color:#e6a6bc}:root[data-theme="dark"] .sf-li .k{color:color-mix(in srgb,var(--kc) 50%,var(--mm-ink))}
