@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root { --ink:#17211d; --muted:#66716c; --paper:#f4f1e8; --panel:#fffdf7; --line:#d8d9cd; --brand-blue:#0070ad; --brand-blue-light:#d9eff8; --brand-blue-pale:#eaf6fb; --coral:#f4876f; --blue:#9ed9e0; --gold:#f3c764; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 90% 0%, var(--brand-blue-light) 0, transparent 34%), var(--paper); font-family:'Space Grotesk', sans-serif; }
.shell { max-width:1440px; margin:0 auto; padding:48px 32px 56px; }
.masthead { display:flex; justify-content:space-between; gap:32px; align-items:end; padding:18px 0 42px; }
.eyebrow { margin:0 0 10px; color:#737e57; font:500 11px 'IBM Plex Mono', monospace; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:10px; font-size:clamp(42px, 7vw, 88px); line-height:.9; letter-spacing:-.04em; } h2 { margin:0; font-size:25px; letter-spacing:-.03em; }
.lede { color:var(--muted); font-size:17px; margin:0; }.period-badge { border-left:3px solid var(--ink); padding:10px 0 10px 16px; min-width:220px; }.period-badge span,.period-badge strong { display:block; }.period-badge span { color:var(--muted); font:11px 'IBM Plex Mono',monospace; text-transform:uppercase; }.period-badge strong { margin-top:7px; font-size:14px; }
.controls { background:var(--ink); color:#fffdf7; padding:18px 20px; margin-bottom:20px; } form { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; } label { display:grid; gap:7px; align-self:flex-end; color:#d8e0cf; font:11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; } input,select { height:42px; min-height:42px; border:1px solid #6a756d; background:#26332c; color:#fffdf7; padding:0 11px; font:14px 'Source Sans 3',sans-serif; } button { height:42px; min-height:42px; border:0; padding:0 18px; background:var(--brand-blue); color:#fffdf7; font:600 14px 'Source Sans 3',sans-serif; cursor:pointer; } button:hover { background:#1688c4; }
.date-range { display:flex; align-self:flex-end; gap:14px; flex-wrap:nowrap; }
.controls input:disabled { cursor:not-allowed; opacity:1; color:#fffdf7; -webkit-text-fill-color:#fffdf7; background:#56645b; border-color:#b7c4b4; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }.stat { position:relative; min-height:140px; padding:20px; background:var(--panel); border:1px solid var(--line); overflow:hidden; }.stat:after { content:''; position:absolute; width:100px; height:100px; right:-35px; bottom:-44px; border-radius:50%; background:var(--accent); opacity:.7; }.stat span,.stat small { display:block; color:var(--muted); font-size:13px; }.stat strong { display:block; margin:15px 0 5px; font-size:42px; letter-spacing:-.05em; }.accent-lime { --accent:var(--brand-blue-light); }.accent-coral { --accent:var(--coral); }.accent-blue { --accent:var(--brand-blue-light); }.accent-gold { --accent:var(--gold); }
.panel { background:var(--panel); border:1px solid var(--line); margin-bottom:20px; }.panel-heading { display:flex; justify-content:space-between; align-items:end; padding:25px 25px 19px; border-bottom:1px solid var(--line); }.chip { padding:7px 10px; background:var(--brand-blue-pale); color:var(--brand-blue); font:11px 'DM Mono',monospace; text-transform:uppercase; }.table-wrap { overflow:auto; }.matrix,.details { width:100%; border-collapse:collapse; font-size:13px; }.matrix th,.matrix td,.details th,.details td { border-bottom:1px solid #e5e5da; padding:13px 12px; text-align:left; }.matrix thead th { background:#f3f4e8; color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; white-space:nowrap; }.matrix thead th:not(:first-child) { text-align:center; }.matrix thead span,.matrix thead b { display:block; }.matrix thead b { color:var(--ink); font:600 15px 'Space Grotesk',sans-serif; margin-top:4px; }.matrix tbody th { min-width:160px; font-weight:600; white-space:nowrap; }.matrix tbody td { min-width:64px; color:#a0a69a; text-align:center; font:12px 'DM Mono',monospace; }.matrix tbody td.has-hours { color:var(--ink); background:var(--brand-blue-pale); }.matrix .row-total { color:var(--ink); font-weight:600; background:#faf8ed; }.details th { color:var(--muted); font:11px 'DM Mono',monospace; text-transform:uppercase; }.details td { vertical-align:top; }.details tr:last-child td { border-bottom:0; }.details .nowrap { white-space:nowrap; }.issue-id { color:var(--brand-blue); font:12px 'DM Mono',monospace; }.details .hours { color:var(--brand-blue); font:600 13px 'DM Mono',monospace; white-space:nowrap; }.event { min-width:280px; color:var(--muted); }.empty { padding:38px 25px; color:var(--muted); } footer { color:var(--muted); font:11px 'DM Mono',monospace; } code { color:var(--ink); }
.issue-matrix tbody th { min-width:260px; white-space:normal; }.issue-matrix tbody th strong { display:block; margin-top:5px; font-weight:600; }.issue-matrix .issue-id em { color:var(--muted); font-style:normal; }
.table-legend { color:var(--muted); font:400 13px 'DM Mono',monospace; letter-spacing:0; }.matrix thead th.weekend { background:#f7e2d8; color:#9a5f4d; }.matrix thead th.weekend b { color:#8b4938; }.matrix td.weekend { background:#fff1ea; }.matrix td.weekend.has-hours { background:#f4e9bd; }
.issue-id a { color:inherit; text-decoration:underline; text-decoration-color:var(--brand-blue-light); text-underline-offset:3px; }.issue-id a:hover { color:var(--brand-blue); text-decoration-color:currentColor; }
.stats { grid-template-columns:repeat(6,minmax(0,1fr)); }.stats .stat { min-width:0; }
@media (max-width:760px) { .shell { padding:25px 16px 40px; }.masthead { display:block; padding-bottom:28px; }.period-badge { margin-top:25px; }.stats { grid-template-columns:repeat(2,1fr); }.stat { min-height:120px; padding:15px; }.stat strong { font-size:32px; }.panel-heading { padding:20px 16px 16px; } }