:root{font-family:Inter,Aptos,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light;--page:#f6f8f6;--halo:#d9efec;--text:#073b45;--muted:#4d6c72;--top:#edf7f5;--panel:#fff;--border:#c9ddda;--control:#fbfdfc;--accent:#007d80;--warning:#9a6100;--danger:#a9273b;--shadow:0 .7rem 2rem rgba(8,59,69,.08)}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--page:#071b22;--halo:#123c43;--text:#eef9f8;--muted:#b4ced0;--top:#0b252d;--panel:#0f3038;--border:#3a6165;--control:#0a242c;--accent:#4ac5c0;--warning:#ffd166;--danger:#ff9e9e;--shadow:0 .8rem 2.2rem rgba(0,0,0,.22)}}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 90% 0,var(--halo),transparent 36%),var(--page)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1rem,calc((100vw - 920px)/2));border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--top) 92%,transparent)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none}.brand span:last-child{min-width:0}.brand strong{display:block}.brand small,.subtle{color:var(--muted)}.mark{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.7rem;background:var(--accent);color:#fff;font-weight:800}
nav,.actions,.heading{display:flex;align-items:center;gap:.6rem}.heading{justify-content:space-between;align-items:start}.heading h2{margin:0}.heading p{margin:.35rem 0 0}
main{max-width:920px;margin:auto;padding:2rem 1rem 4rem}.eyebrow{color:var(--accent);font-weight:800;letter-spacing:.12em;font-size:.75rem}h1{font-size:clamp(2rem,7vw,3.3rem);margin:.3rem 0}.lead{max-width:42rem;line-height:1.5}
.panel{margin-top:1.2rem;padding:1.35rem;border:1px solid var(--border);border-radius:1.05rem;background:var(--panel);box-shadow:var(--shadow)}.context{display:grid;gap:.6rem}
select,input,textarea{width:100%;max-width:32rem;padding:.75rem;border:1px solid var(--border);border-radius:.55rem;background:var(--control);color:var(--text);font:inherit}textarea{min-height:5.5rem;resize:vertical}
.button,.quiet{display:inline-block;padding:.65rem .9rem;border-radius:.65rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}.button{border:1px solid var(--accent);background:var(--accent);color:#fff;box-shadow:0 .35rem .9rem color-mix(in srgb,var(--accent) 22%,transparent)}.quiet{border:1px solid var(--border);background:transparent;color:var(--text)}button:disabled{opacity:.55;cursor:wait}
.filters{margin:1rem 0}.filters label{display:grid;gap:.35rem;color:var(--muted)}.cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;min-width:0}.card{width:100%;min-width:0;padding:1rem;border:1px solid var(--border);border-radius:.8rem;background:var(--control);overflow-wrap:anywhere}.card h3{margin:0}.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:.85rem 0;min-width:0}.metric{min-width:0;padding:.7rem;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--panel) 82%,transparent)}.metric strong,.metric span{display:block}.metric span{color:var(--muted);font-size:.84rem}
details{margin-top:.8rem}summary{cursor:pointer;font-weight:700}.timeline{list-style:none;padding:0;margin:.7rem 0}.timeline li{display:grid;grid-template-columns:7rem 1fr;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--border)}.timeline small{color:var(--muted)}.correction{display:grid;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.actions{flex-wrap:wrap}.status{display:inline-flex;width:auto;max-width:100%;padding:.25rem .6rem;border:1px solid var(--border);border-radius:99px;overflow-wrap:anywhere}.status.SUBMITTED{border-color:var(--warning)}.status.REVIEW_HOLD{border-color:var(--danger)}#message:not(:empty){margin:.8rem 0;padding:.75rem;border-left:4px solid var(--accent);background:var(--control)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}
@media(max-width:620px){.topbar{flex-wrap:wrap}.heading{display:grid}.summary{grid-template-columns:1fr}.timeline li{grid-template-columns:1fr}.panel{padding:1rem}.actions{display:grid;grid-template-columns:1fr}.actions>*{width:100%}nav{margin-left:auto}}

/* A brighter, still calm palette shared by employee-facing Time screens. */
:root{--halo:#d6f2eb;--accent:#087f8c;--accent-warm:#d97736;--accent-violet:#7256a8;--accent-blue:#4679c7;--accent-soft:#e5f5f3}
@media(prefers-color-scheme:dark){:root{--halo:#16434a;--accent:#53c8c3;--accent-warm:#f0a36c;--accent-violet:#b29be4;--accent-blue:#8eb8ff;--accent-soft:#153e45}}
.topbar{background:linear-gradient(100deg,color-mix(in srgb,var(--top) 94%,var(--accent-blue) 6%),color-mix(in srgb,var(--top) 93%,var(--accent) 7%))}
.mark{background:linear-gradient(145deg,var(--accent),var(--accent-blue));box-shadow:0 .25rem .75rem color-mix(in srgb,var(--accent) 28%,transparent)}
.panel{background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel) 94%,var(--accent) 6%))}
.card:nth-child(4n+1){border-top:3px solid var(--accent)}.card:nth-child(4n+2){border-top:3px solid var(--accent-blue)}.card:nth-child(4n+3){border-top:3px solid var(--accent-warm)}.card:nth-child(4n){border-top:3px solid var(--accent-violet)}
.metric:nth-child(4n+2){border-color:var(--accent-blue)}.metric:nth-child(4n+3){border-color:var(--accent-warm)}