/* Keep the chain: the Streak sheet, the gold session, the You tab, the glazes. */
.app-chain .yo { background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 50%), radial-gradient(420px circle at 88% 4%, rgba(var(--haze), 0.2), rgba(var(--haze), 0) 100%), radial-gradient(320px circle at 8% 92%, rgba(var(--haze), 0.1), rgba(var(--haze), 0) 100%), var(--paper); }
.app-chain .ch-sheet { background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 50%), radial-gradient(420px circle at 88% 4%, rgba(var(--haze), 0.2), rgba(var(--haze), 0) 100%), var(--paper); }
.cs-hero { position: absolute; left: 22px; right: 22px; top: 66px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cs-flame { width: 88px; height: 152px; margin-bottom: -4px; }
.cs-n { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cs-l { font-size: 20px; font-weight: 700; color: var(--ink2); }
.cs-s { font-size: 14px; color: var(--ink3); }
.cs-stats { position: absolute; left: 22px; right: 22px; top: 385px; display: flex; gap: 10px; }
.cs-stats span { flex: 1; padding: 12px 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.cs-stats b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-stats small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.cs-week { position: absolute; left: 22px; right: 22px; top: 474px; }
.cs-week > p { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cs-week > p b { font-size: 16px; font-weight: 600; }
.cs-week > p small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.cs-bars { display: flex; gap: 6px; }
.cs-bars span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cs-bars small { font-size: 10px; font-weight: 700; color: var(--ink3); }
.cs-bars span.today small { color: var(--streak); font-weight: 800; }
.cs-bars i { width: 100%; height: 8px; border-radius: 4px; background: var(--muted); }
.cs-bars i.on { background: rgba(255, 140, 82, 0.7); }
.cs-bars span.today i { box-shadow: inset 0 0 0 1.5px rgba(255, 140, 82, 0.55); background: var(--muted); }
.cs-hot { position: absolute; left: 22px; right: 22px; top: 560px; display: flex; flex-direction: column; }
.cs-hot > b { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.cs-hot p { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cs-hot p span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cs-hot p span b { font-size: 16px; font-weight: 600; }
.cs-hot p span small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.cs-hot em { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; color: var(--streak); }
.cs-hot em .sym { width: 11px; height: 11px; }

/* You */
.yo-col { position: absolute; left: 22px; right: 22px; top: 63px; display: flex; flex-direction: column; gap: 20px; }
.yo-head { display: flex; justify-content: space-between; align-items: flex-start; }
.yo-head p { display: flex; flex-direction: column; gap: 4px; }
.yo-head b { font-size: 28px; font-weight: 700; }
.yo-head span { font-size: 14px; color: var(--ink2); }
.yo-head i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.yo-head i .sym { width: 16px; height: 16px; }
.yo-tiles { display: flex; gap: 10px; }
.yo-tiles span { flex: 1; padding: 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.yo-tiles .sym { width: 15px; height: 15px; --knock: #fff; }
.yo-tiles .f { color: var(--streak); } .yo-tiles .a { color: var(--acc); } .yo-tiles .g { color: var(--learnt); }
.yo-tiles b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.yo-tiles small { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); line-height: 1.2; }
.yo-card { padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.yo-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yo-h b { font-size: 16px; font-weight: 600; flex-basis: 100%; }
.yo-h small { font-size: 10px; font-weight: 800; color: var(--ink3); flex: 1; }
.yo-h em { font-size: 10px; font-weight: 800; color: var(--ink2); }
.yo-act .yo-h b { flex-basis: auto; flex: 1; }
.yo-act .yo-h small { flex-basis: 100%; order: 3; margin-top: -6px; }
.yo-mem .yo-h b { flex-basis: auto; flex: 1; }
.yo-mem .yo-h em.g { font-size: 15px; color: var(--learnt); }
.yo-bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; margin-top: 16px; }
.yo-bars span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.yo-bars small { font-size: 10px; font-weight: 700; color: var(--ink3); font-variant-numeric: tabular-nums; }
.yo-bars i { display: block; width: 100%; height: var(--h); border-radius: 6px; transform-origin: 50% 100%; background: linear-gradient(180deg, rgba(148, 148, 158, 0.35), rgba(148, 148, 158, 0.18)); }
.yo-bars b { font-size: 11px; font-weight: 500; color: var(--ink3); }
.yo-bars span.today small { color: var(--acc); }
.yo-bars span.today i { background: linear-gradient(180deg, var(--acc), rgba(46, 97, 209, 0.65)); box-shadow: inset 0 0 0 1.5px rgba(46, 97, 209, 0.55); }
.yo-bars span.today b { color: var(--ink); font-weight: 800; }
.yo-dots { display: flex; margin-top: 14px; }
.yo-dots span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.yo-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.yo-dots i.on { background: rgba(255, 140, 82, 0.75); }
.yo-dots span.today i { width: 10px; height: 10px; background: var(--streak); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px rgba(255, 140, 82, 0.5); }
.yo-dots small { font-size: 10px; font-weight: 500; color: var(--ink3); }
.yo-dots span.today small { color: var(--ink); font-weight: 800; }
.yo-today { display: flex; align-items: center; gap: 18px; }
.yo-ring { position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center; color: var(--learnt); }
.yo-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.yo-ring .tr { fill: none; stroke: rgba(46, 97, 209, 0.14); stroke-width: 9; }
.yo-ring .pr { fill: none; stroke: var(--learnt); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; }
.yo-ring > .sym { width: 20px; height: 20px; position: relative; }
.yo-today p { display: flex; flex-direction: column; gap: 6px; }
.yo-today b { font-size: 16px; font-weight: 600; }
.yo-today span { font-size: 14px; color: var(--ink2); }
.yo-today small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.yo-t { display: block; font-size: 16px; font-weight: 600; }
.yo-rr { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.yo-donut, .yo-mring { position: relative; flex: none; display: grid; place-items: center; }
.yo-donut { width: 120px; height: 120px; }
.yo-mring { width: 96px; height: 96px; }
.yo-donut svg, .yo-mring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.yo-donut circle { fill: none; stroke-width: 14; }
.yo-donut .d0 { stroke: var(--learnt); } .yo-donut .d2 { stroke: var(--review); }
.yo-donut p { position: relative; display: flex; flex-direction: column; align-items: center; }
.yo-donut p b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.yo-donut p small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.yo-mring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.yo-mring .m0 { stroke: rgba(232, 227, 214, 0.6); } .yo-mring .m1 { stroke: var(--learnt); } .yo-mring .m2 { stroke: var(--review); }
.yo-mring b { position: relative; font-size: 20px; font-weight: 800; }
.yo-leg { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.yo-leg p { display: flex; align-items: center; gap: 8px; }
.yo-leg i { width: 8px; height: 8px; border-radius: 50%; }
.yo-leg span { flex: 1; font-size: 14px; color: var(--ink2); }
.yo-leg b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.yo-leg small { width: 32px; text-align: right; font-size: 10px; font-weight: 800; color: var(--ink3); }
.yo-mem .n-split { margin-top: 16px; }
.yo-glaze > small { display: block; margin-top: 3px; font-size: 10px; font-weight: 800; color: var(--ink3); }
.yo-sw { display: flex; gap: 10px; margin-top: 12px; }
.yo-g { flex: 1; padding: 12px 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(224, 224, 230, 0.35); }
.yo-g.on { background: rgba(224, 224, 230, 0.7); }
.yo-g i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: transparent; background: radial-gradient(circle, var(--h), var(--h)), var(--p); box-shadow: inset 0 0 0 1px var(--border); }
.yo-g.on i { color: var(--ink); }
.yo-g i .sym { width: 11px; height: 11px; }
.yo-g small { font-size: 10px; font-weight: 800; color: var(--ink2); }
.yo-g.on small { color: var(--ink); }

/* the You tab keeps the status bar; what scrolls up fades out beneath it */
.yo-sb { position: absolute; left: 0; top: 0; width: 393px; height: 54px; z-index: 3; }
.app-chain .yo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 62%, transparent); }