/* 最初の7日で4日(web-retention)。DESIGN-TOKENS-2.0.md の Web の決まりに合わせる:
   カード = d-surface・角丸 d-card・罫線なし・d-card-shadow / 字の段 d-title・d-section・d-caption / 太さ d-heavy・d-medium / 余白 d-s* / 印の色はホームの輪と同じ d-ring と d-accent。
   2.0 は html.shell20 #app * で字の大きさ・太さ・角丸を打ち消してから部品ごとに付け直すので、同じ書き方(html.shell20 #app と !important)にする。
   ダイアログとボタンは habit の h20- の部品をそのまま使う。 */
html.shell20 #app [data-retention-week].r20-week{margin:var(--d-s5) 0 var(--d-s2);padding:var(--d-s4);border:0;border-radius:var(--d-card)!important;background:var(--d-surface)!important;box-shadow:var(--d-card-shadow);color:var(--d-ink)!important;display:grid;gap:var(--d-s3)}
html.shell20 #app [data-retention-week] .r20-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--d-s3)}
html.shell20 #app [data-retention-week] h2{margin:0;font-size:var(--d-title)!important;font-weight:var(--d-heavy)!important;line-height:1.4;color:var(--d-ink)!important}
html.shell20 #app [data-retention-week] .r20-count{font-size:var(--d-section)!important;font-weight:var(--d-heavy)!important;line-height:1;color:var(--d-accent)!important;font-variant-numeric:tabular-nums;white-space:nowrap}
html.shell20 #app [data-retention-week] .r20-count small{font-size:var(--d-caption)!important;font-weight:var(--d-medium)!important;color:var(--d-muted)!important;margin-left:2px}
html.shell20 #app [data-retention-week] .r20-stamps{display:flex;gap:var(--d-s3)}
html.shell20 #app [data-retention-week] .r20-stamp{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--d-circle)!important;background:var(--d-ring)!important;box-sizing:border-box}
html.shell20 #app [data-retention-week] .r20-stamp svg{width:18px;height:18px;opacity:0}
html.shell20 #app [data-retention-week] .r20-stamp[data-on="1"]{background:var(--d-accent)!important}
html.shell20 #app [data-retention-week] .r20-stamp[data-on="1"] svg{opacity:1;stroke:var(--d-on)}
html.shell20 #app [data-retention-week] .r20-stamp[data-new="1"]{animation:r20-pop .42s cubic-bezier(.2,1.6,.4,1) both}
html.shell20 #app [data-retention-week] p{margin:0;font-size:var(--d-caption)!important;font-weight:var(--d-normal)!important;color:var(--d-muted)!important}
@keyframes r20-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){html.shell20 #app [data-retention-week] .r20-stamp[data-new="1"]{animation:none}}
html.h20-static #app [data-retention-week] .r20-stamp[data-new="1"]{animation:none}
.r20-dialog p{margin:0 0 var(--d-s3)}
.r20-dialog .r20-actions{display:grid;gap:var(--d-s3);margin-top:var(--d-s2)}