/* Chuck Progress Tracking — light/cream theme (synced with the How Chuck Works mindmap) */ :root{ --bg:#f8f7f3; --panel:#fffdf8; --card:#fffdf8; --card2:#faf8f1; --line:#ded9cd; --border:#ded9cd; --line-soft:#ece7dc; --text:#202124; --ink:#202124; --muted:#68645f; --accent:#2d5d9f; --green:#287849; --red:#ad3a2e; --amber:#b77711; --purple:#6b47a3; --teal:#176e68; --gray:#57534e; --amber-bg:#fff4d8; --blue-bg:#eaf2ff; --green-bg:#e7f4ea; --red-bg:#fde9e6; --teal-bg:#e2f4f2; --purple-bg:#f1ebfb; --gray-bg:#efeee9; --shadow:0 18px 55px rgba(32,33,36,.12); --surface:rgba(255,253,248,.88); --surface-strong:rgba(255,253,248,.92); --surface-soft:rgba(255,253,248,.5); /* phase color code — learn once, used everywhere */ --p-direct:#2d5d9f; --p-planning:#b77711; --p-learning:#6b47a3; --p-other:#57534e; } /* dark theme — overrides the cream :root when data-theme="dark" on */ :root[data-theme="dark"]{ --bg:#0d1117; --panel:#161b22; --card:#161b22; --card2:#1c2230; --line:#2d333b; --border:#2d333b; --line-soft:#21262d; --text:#e6edf3; --ink:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --green:#3fb950; --red:#f85149; --amber:#d29922; --purple:#bc8cff; --teal:#39c5cf; --gray:#9aa4b2; --amber-bg:#3a2a0f; --blue-bg:#10233a; --green-bg:#0f2a18; --red-bg:#3a1a18; --teal-bg:#0e2b2b; --purple-bg:#241a3a; --gray-bg:#21262d; --shadow:0 18px 55px rgba(0,0,0,.5); --surface:rgba(22,27,34,.88); --surface-strong:rgba(22,27,34,.92); --surface-soft:rgba(22,27,34,.5); --p-direct:#58a6ff; --p-planning:#d29922; --p-learning:#bc8cff; --p-other:#9aa4b2; } :root[data-theme="dark"] body{ background:radial-gradient(circle at top left, rgba(88,166,255,.06), transparent 32rem), #0d1117; } /* theme toggle button (in nav) */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px; border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink); cursor:pointer;font-size:15px;line-height:1;padding:0} .theme-toggle:hover{border-color:var(--muted)} *{box-sizing:border-box;margin:0;padding:0} body{ background: radial-gradient(circle at top left, rgba(45,93,159,.08), transparent 32rem), linear-gradient(180deg,#fbfaf7 0%,var(--bg) 48%,#f5f2ec 100%); background-attachment:fixed; color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; min-height:100vh; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} code{background:var(--gray-bg);border-radius:4px;padding:1px 6px;font-size:13px;color:var(--accent)} .wrap{max-width:1080px;margin:0 auto;padding:0 16px 64px} /* top nav — mirrors the mindmap topbar */ .nav{position:sticky;top:0;z-index:10;background:var(--surface-strong);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 16px} .nav .brand{font-weight:700;letter-spacing:-.3px;color:var(--ink)} .nav .brand b{color:var(--accent)} .nav a.link{color:var(--muted);font-size:14px;font-weight:700} .nav a.link.active,.nav a.link:hover{color:var(--ink);text-decoration:none} .nav .spacer{flex:1} header.page{padding:28px 0 8px} header.page h1{font-size:24px;letter-spacing:-.3px;line-height:1.05} header.page p{color:var(--muted);margin-top:6px;font-size:14px} /* banners */ .banner{border-radius:8px;padding:12px 16px;margin:16px 0;font-size:14px;border:1px solid} .banner.warn{background:var(--amber-bg);color:var(--amber)} .banner.info{background:var(--blue-bg);color:var(--accent)} .banner.ok{background:var(--green-bg);color:var(--green)} .chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.3px;margin-left:6px} .chip.unmapped{background:var(--red-bg);color:var(--red)} /* metric tiles */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0} .tile{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px;box-shadow:0 1px 2px rgba(32,33,36,.05)} .tile .num{font-size:24px;font-weight:700;color:var(--ink)} .tile .lbl{font-size:12px;color:var(--muted);margin-top:2px} .tile .sub{font-size:11px;color:var(--muted);margin-top:6px} .tile.good .num{color:var(--green)} .tile.bad .num{color:var(--red)} .tile.warn .num{color:var(--amber)} /* cards / sections */ .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:18px 0;box-shadow:0 1px 3px rgba(0,0,0,.06)} .card h2{font-size:16px;margin-bottom:4px;color:var(--ink)} .card .hint{color:var(--muted);font-size:12px;margin-bottom:14px} .chart-box{position:relative;height:280px} /* tables */ table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px;padding:8px 10px;border-bottom:1px solid var(--line)} td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top} tr:last-child td{border-bottom:none} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} /* phase pills */ .phase{display:inline-flex;align-items:center;gap:6px;font-weight:600} .dot{width:9px;height:9px;border-radius:50%;display:inline-block} .dot.direct{background:var(--p-direct)} .dot.planning{background:var(--p-planning)} .dot.learning{background:var(--p-learning)} .dot.other{background:var(--p-other)} /* tags (changelog categories + statuses) — mindmap bg/fg pairs */ .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.3px} .tag.prompt_fix{background:var(--blue-bg);color:var(--accent)} .tag.code_fix{background:var(--purple-bg);color:var(--purple)} .tag.business{background:var(--amber-bg);color:var(--amber)} .tag.infra{background:var(--teal-bg);color:var(--teal)} .tag.experiment{background:var(--green-bg);color:var(--green)} .tag.observation{background:var(--gray-bg);color:var(--gray)} .tag.shipped{background:var(--green-bg);color:var(--green)} .tag.partial{background:var(--amber-bg);color:var(--amber)} .tag.open{background:var(--red-bg);color:var(--red)} .tag.watching{background:var(--blue-bg);color:var(--accent)} .tag.rolled_back{background:var(--red-bg);color:var(--red)} /* verdict */ .verdict{font-weight:700} .verdict.improved{color:var(--green)} .verdict.regressed{color:var(--red)} .verdict.no_change{color:var(--muted)} .verdict.pending{color:var(--amber)} .verdict.inconclusive{color:var(--gray)} /* progress bar (goals) */ .bar{height:10px;background:var(--gray-bg);border-radius:6px;overflow:hidden;margin-top:8px} .bar > i{display:block;height:100%;background:var(--accent)} /* directory list */ .daygroup{margin:18px 0} .daygroup h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px} .entry{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.05)} .entry:hover{border-color:var(--muted);text-decoration:none;transform:translateY(-1px);transition:transform .12s ease,border-color .12s ease} .entry .t{font-weight:600;color:var(--ink)} .entry .s{color:var(--muted);font-size:13px;margin-top:3px} .empty{color:var(--muted);font-size:14px;padding:24px;text-align:center;border:1px dashed var(--line);border-radius:8px;background:var(--surface-soft)} .muted{color:var(--muted)} .loading{color:var(--muted);font-size:14px;padding:20px} footer{color:var(--muted);font-size:12px;text-align:center;margin-top:28px} /* ---- mobile ---- */ @media(max-width:760px){ .wrap{padding:0 12px 56px} header.page{padding:20px 0 4px} header.page h1{font-size:21px} .nav-inner{flex-wrap:wrap;gap:8px 14px;padding:10px 14px} .nav .spacer{display:none} .nav .brand{flex:1 1 auto} .nav .theme-toggle{order:2} .nav a.link{order:3;font-size:13px} .tiles{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px} .tile{padding:12px 14px} .tile .num{font-size:21px} .card{padding:16px;overflow-x:auto} .card h2{font-size:15px} .chart-box{height:240px} th,td{white-space:nowrap;padding:7px 8px} } @media(max-width:420px){ .tiles{grid-template-columns:1fr 1fr} .tile .num{font-size:19px} .nav a.link{font-size:12px} }