/* Home - colours and type come from assets/theme.css */
body{background:var(--bg); color:var(--ink); font-family:var(--font-ui); line-height:1.6}
.wrap{max-width:1000px; margin:0 auto; padding:0 20px}
header.hero{padding:46px 0 34px; border-bottom:1px solid var(--line); background:var(--surface)}
header.hero h1{font-family:var(--font-display); margin:0 0 8px; font-size:2.1rem; letter-spacing:-.01em; font-weight:600}
header.hero p{margin:0; color:var(--ink-2); font-size:1rem; max-width:62ch}
main{padding:30px 0 70px}
h2.sec{font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; color:var(--warm); border-bottom:1px solid var(--line); padding-bottom:6px; margin:0 0 16px; font-weight:700; font-family:var(--font-ui)}
.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px}
a.tool{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--warm-2); border-radius:var(--radius); padding:20px 20px 18px; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:.16s}
a.tool:hover{transform:translateY(-2px); border-color:var(--accent); border-top-color:var(--accent); box-shadow:var(--shadow-lg)}
a.tool .ico{font-size:1.6rem; line-height:1; margin-bottom:10px}
a.tool h3{font-family:var(--font-display); margin:0 0 6px; font-size:1.15rem; font-weight:600}
a.tool p{margin:0; color:var(--ink-2); font-size:.85rem; flex:1}
a.tool .go{margin-top:14px; font-size:.78rem; color:var(--accent); letter-spacing:.03em}
.statstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:30px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)}
.stat .n{font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.1; font-variant-numeric:tabular-nums}
.stat .l{font-size:.7rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; margin-top:5px}
.signedout{background:var(--surface); border:1px dashed var(--warm-2); border-radius:var(--radius); padding:18px 20px; margin-bottom:30px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.signedout p{margin:0; flex:1; min-width:220px; font-size:.87rem; color:var(--ink-2)}
.signedout code{font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); padding:1px 5px; border-radius:4px}
.signedout a{font-size:.85rem; font-weight:600; text-decoration:none; background:var(--accent-fill); color:var(--on-accent); padding:10px 18px; border-radius:var(--radius-sm)}
.signedout a:hover{background:var(--accent-hover)}
.note{font-size:.82rem; color:var(--ink-3); margin-top:26px; padding-top:16px; border-top:1px solid var(--line)}
footer.page{border-top:1px solid var(--line); padding:18px 0; color:var(--ink-3); font-size:.75rem; text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none !important} a.tool:hover{transform:none}}

/* This week: the two weekly goals side by side */
.wkgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-bottom:30px}
a.wkbar{display:grid; grid-template-columns:1fr auto; gap:6px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); text-decoration:none; color:inherit}
a.wkbar:hover{border-color:var(--accent)}
.wkl{font-size:.7rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; font-weight:700; align-self:center}
.wkn{font-size:1.5rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; text-align:right}
.wkn small{font-size:.8rem; font-weight:600; color:var(--ink-2); margin-left:2px}
.wks{grid-column:1/-1; display:grid; grid-template-columns:repeat(var(--segs),1fr); gap:5px}
.wks span{height:9px; border-radius:5px; background:var(--surface-3)}
.wks span.on{background:var(--accent-fill)} .wks span.extra.on{background:var(--green-fill)}