report.css

*{box-sizing:border-box}body{margin:0;background:#eae8e2;color:#263a3a;font-family:Arial,Helvetica,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}button{font:inherit;cursor:pointer}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1050px;margin:24px auto;padding:0 24px;font-size:13px;color:#5d6864}.toolbar div{display:flex;gap:8px}.toolbar button{background:#fff;border:1px solid #d7d7cd;padding:10px 14px;border-radius:24px;color:#263a3a}.toolbar button:first-child{background:var(--accent);color:#fff;border-color:var(--accent)}main{max-width:1000px;margin:0 auto 40px}.keepsake{position:relative;background:var(--cream);padding:42px 52px 24px;box-shadow:0 14px 55px #37403315;border-radius:8px;border-top:7px solid var(--accent)}.topline,.bottomline{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1.3px;color:#75807a}.topline span:first-child{font-weight:bold;color:var(--accent)}header{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:28px;padding:28px 0 25px}.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-size:10px;font-weight:bold;color:var(--accent);margin:0 0 13px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5vw,65px);font-weight:normal;line-height:1.05;letter-spacing:-2px;margin:0;overflow-wrap:anywhere}h1 em{color:var(--accent);font-weight:normal}.intro{font-size:14px;line-height:1.7;margin:18px 0 0;color:#62716a}.motif-art{width:100%;max-height:230px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:22px 0;border-top:1px solid #dddcd1;border-bottom:1px solid #dddcd1}.metric{padding:0 12px;border-right:1px solid #dddcd1}.metric:first-child{padding-left:0}.metric:last-child{border:0}.metric strong,.metric span,.metric small{display:block}.metric strong{font-family:Georgia,serif;font-size:38px;font-weight:normal;color:var(--accent);line-height:1.2}.metric span{font-size:12px;font-weight:bold;margin-top:7px}.metric small{font-size:10px;color:#6a7971;margin-top:6px}.activity{padding:23px 0 20px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}h2{font:normal 23px Georgia,serif;margin:0}.section-title>span{font-size:10px;color:#6a7971}.days{display:grid;grid-template-columns:repeat(14,1fr);gap:9px}.day{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:9px;color:#79827a}.subtle{font-size:10px;line-height:1.6;color:#6a7971}.activity .subtle{margin:14px 0 0}.pace{display:grid;grid-template-columns:1.5fr 1fr;gap:25px;background:var(--soft);padding:20px 22px;border-radius:10px;align-items:center}.pace .eyebrow{margin-bottom:8px}.pace h3{font:normal 18px Georgia,serif;margin:0 0 10px}.pace p:not(.eyebrow){font-size:11px;line-height:1.5;margin:0 0 8px}.pace small{font-size:9px;color:#65736a}.spark{height:72px;display:flex;align-items:flex-end;gap:5px}.spark i{flex:1;background:var(--accent);opacity:.63;border-radius:3px 3px 0 0;min-height:3px}footer{display:flex;align-items:center;gap:13px;padding:27px 0 22px}.star{color:var(--accent);font-size:35px}footer p{font:italic 17px Georgia,serif;margin:0 0 7px}footer div>span{font-size:10px;color:#6a7971}.signature{margin-left:auto;white-space:nowrap;font:italic 14px Georgia,serif;color:var(--accent);line-height:1.9}.signature span{color:#7b8879}.bottomline{font-size:8px;border-top:1px solid #dddcd1;padding-top:15px;letter-spacing:.3px}.details{display:none;background:var(--cream);padding:42px 52px;margin-top:25px;border-radius:8px}.journal-open .details{display:block}.details h3{font:normal 22px Georgia,serif;margin-top:35px}.details table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}.details th,.details td{text-align:left;padding:10px 7px;border-bottom:1px solid #deded1;vertical-align:top;overflow-wrap:anywhere}.details th{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent)}.details th:last-child,.details td:last-child{width:30%}.tv{background:var(--cream)}.tv .toolbar{position:fixed;z-index:2;right:0;top:0;opacity:0;transition:opacity .2s;background:var(--cream);margin:0;padding:12px}.tv .toolbar:hover,.tv .toolbar:focus-within{opacity:1}.tv .toolbar>span{display:none}.tv main{max-width:none;margin:0}.tv .keepsake{height:100vh;max-width:1600px;margin:auto;box-shadow:none;border:0;padding:3vh 4vw;display:flex;flex-direction:column;justify-content:space-between}.tv header{padding:1vh 0;grid-template-columns:1.5fr 1fr}.tv h1{font-size:clamp(42px,5.2vw,88px)}.tv .motif-art{max-height:23vh}.tv .intro{font-size:clamp(13px,1.1vw,20px);margin-top:1vh}.tv .metrics{padding:1.5vh 0}.tv .metric strong{font-size:clamp(30px,3vw,54px)}.tv .metric span{font-size:clamp(12px,1.1vw,20px)}.tv .metric small{font-size:clamp(10px,.8vw,15px)}.tv .activity{padding:1.5vh 0}.tv .pace{padding:1.5vh 2vw}.tv footer{padding:1.5vh 0}.tv .details{display:none!important}
@media(max-width:650px){.toolbar{flex-direction:column;margin:14px auto}.toolbar div{flex-wrap:wrap;justify-content:center}.toolbar button{font-size:11px;padding:9px 11px}.keepsake,.details{padding:25px 22px}.topline{font-size:8px;letter-spacing:.5px}header{gap:10px;grid-template-columns:1.5fr 1fr}h1{font-size:39px}.intro{font-size:11px}.metric{padding:0 6px}.metric strong{font-size:29px}.metric span{font-size:10px}.metric small{font-size:9px}.days{gap:2px}.pace{grid-template-columns:1fr;padding:16px;gap:13px}.spark{height:45px}h2{font-size:19px}footer{flex-wrap:wrap}.signature{margin-left:48px}.bottomline{font-size:7px}}
@media print{body{background:#fff}.toolbar{display:none!important}main{max-width:none;margin:0}.keepsake{border-radius:0;box-shadow:none;min-height:9.7in;padding:28px 32px 18px}header{padding:25px 0}h1{font-size:53px}.motif-art{max-height:205px}.metrics{padding:20px 0}.metric strong{font-size:34px}.activity{padding:20px 0}.days{gap:5px}.pace{padding:18px 20px}footer{padding:24px 0}.bottomline{margin-top:8px}.details{break-before:page;border-radius:0;margin:0;padding:24px 10px;box-shadow:none}.journal-open .details{display:block}tr{break-inside:avoid}thead{display:table-header-group}.tv .keepsake{height:auto;display:block;border-top:7px solid var(--accent);padding:28px 32px 18px}.tv h1{font-size:53px}.tv .motif-art{max-height:205px}.tv .intro{font-size:14px}.tv .metric span{font-size:12px}.tv .metric small{font-size:10px}.tv .details{display:none!important}}@page{margin:8mm}
/* Weekly keepsake: results first, with optional timing on every practiced level. */
.days{grid-template-columns:repeat(7,1fr)}
.level-progress{padding:0}.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.level-card{background:var(--soft);border-radius:10px;padding:15px 18px;break-inside:avoid}.level-card .eyebrow{margin-bottom:6px}.level-card h3{font:normal 16px Georgia,serif;margin:0 0 7px;overflow-wrap:anywhere}.level-card>p:not(.eyebrow){font-size:11px;margin:0;line-height:1.5}.level-timing{margin-top:10px}.level-timing p{font-size:10px;line-height:1.5}.level-timing .spark{height:30px}.tv #journal{display:none}.tv .level-card{padding:1.4vh 1.4vw}.tv .level-card h3{font-size:clamp(14px,1.15vw,22px)}.tv .level-card>p:not(.eyebrow){font-size:clamp(11px,.9vw,17px)}.tv .level-progress{padding:0}.tv .level-timing .spark{height:3vh}.tv .level-timing p{font-size:12px}
@media print{.level-grid{gap:9px}.level-card{padding:12px 15px}.level-card h3{font-size:14px}.level-card>p:not(.eyebrow){font-size:10px}.level-timing p{font-size:9px}.level-timing .spark{height:24px}.level-progress .section-title{margin-bottom:12px}}
@media(max-width:650px){.level-card{padding:12px}.level-card h3{font-size:14px}}

/* Earned stars: one per completed worksheet, with quiet space for days off. */
.achievement-star{display:block;width:24px;height:24px;flex:none;fill:#efd18b;stroke:var(--accent);stroke-width:1.15;stroke-linejoin:round}
.metric-value{display:flex;align-items:center;gap:12px}.metric-value .total-star{width:46px;height:46px;stroke-width:1}
.day-stars{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:3px;min-height:52px;max-width:82px}
.day-stars.many{gap:2px}.day-stars.many .achievement-star{width:15px;height:15px}
.rest-mark{width:12px;height:1px;background:#d7d3cb}.day.practiced>span{color:var(--accent)}
.tv .metric-value .total-star{width:clamp(40px,3.6vw,62px);height:clamp(40px,3.6vw,62px)}
.tv .day-stars{max-width:112px;min-height:5vh}.tv .day-stars .achievement-star{width:30px;height:30px}.tv .day-stars.many .achievement-star{width:18px;height:18px}
@media(max-width:650px){.metric-value{gap:6px}.metric-value .total-star{width:32px;height:32px}.day-stars{max-width:62px;min-height:42px;gap:2px}.day-stars .achievement-star{width:18px;height:18px}.day-stars.many .achievement-star{width:11px;height:11px}}
@media print{.metric-value .total-star,.tv .metric-value .total-star{width:40px;height:40px}.day-stars,.tv .day-stars{max-width:76px;min-height:44px}.day-stars .achievement-star,.tv .day-stars .achievement-star{width:21px;height:21px}.day-stars.many .achievement-star,.tv .day-stars.many .achievement-star{width:13px;height:13px}}