/* report and progress */
body[data-screen=done] #app, body[data-screen=progress] #app { max-width:720px; }
ul { margin:6px 0; padding-inline-start:22px; } .msg { white-space:pre-wrap; background:var(--sunk); border-radius:12px; padding:14px; } .big { font:600 19px/1.6 var(--body); }
.tag { display:inline-block; font:700 22px var(--display); border:3px double currentColor; border-radius:10px; padding:4px 20px 6px; transform:rotate(-3deg); margin:4px 0 8px; }
.tag.closed { color:var(--jade); } .tag.lost { color:var(--coral); } .tag.open { color:var(--brass-text); } .tag.unclear { color:var(--soft); }
.sc { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:10px 0; border-top:1px solid var(--rule); } .sc b { font:700 15px var(--body); white-space:nowrap; }
.sc .scorebar { grid-column:1 / -1; order:3; height:6px; border-radius:3px; background:linear-gradient(to left, var(--primary) var(--v), var(--sunk) var(--v)); }
.q { color:var(--soft); font-size:14px; margin-top:3px; }
.rep { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 14px; padding:8px 0; border-top:1px solid var(--rule); } .rep:first-of-type { border-top:0; } .rep b { font:600 16px var(--body); }
.trend { margin:8px 0 0; font-weight:600; } .trend.up { color:var(--jade); } .trend.down { color:var(--coral); } .trend.flat { color:var(--soft); }
.drill { padding:12px 0; border-top:1px solid var(--rule); } .drill:first-of-type { border-top:0; } .drill p { margin:0 0 6px; }

.learn-card { background:radial-gradient(120% 90% at 85% 0%, var(--sea-2) 0%, var(--sea) 70%); color:var(--on-sea); border-color:transparent; }
.learn-card h2 { color:var(--on-sea); font:700 20px/1.5 var(--display); margin:6px 0 4px; } .learn-card .hint { color:var(--on-sea-soft); margin:0 0 10px; }
.learn-tag { font:600 12px var(--body); letter-spacing:.05em; color:var(--on-sea-soft); } .learn-done { font:600 17px/1.6 var(--body); margin:6px 0 2px; }
.learn-card .opt { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--on-sea); } .learn-card .opt:hover { border-color:var(--on-sea); }
.learn-card .link { color:var(--on-sea-soft); }
body[data-depth=terse] .cue small { display:none; }