:root{--bg:#0d1014;--panel:#151a21;--panel2:#1b222b;--line:#242c37;--ink:#e8e4da;
--dim:#9aa3ae;--faint:#6d7681;--acc:#e0554f;--acc2:#c9a24d;--ok:#4ea87a;--err:#e0554f}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;
padding:14px 28px;background:rgba(13,16,20,.94);border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.12em;font-size:17px;color:var(--ink)}
.brand span{color:var(--faint);font-weight:400;letter-spacing:.06em;font-size:12px;margin-left:8px}
nav{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap}
nav a{color:var(--dim);font-size:14.5px}nav a:hover{color:var(--ink);text-decoration:none}
/* divider between what you do with your own sheet and what admins do to others */
nav .sep{width:1px;align-self:stretch;min-height:18px;background:var(--line);margin:0 2px}
.who{color:var(--acc2);font-size:14px}
main{max-width:1080px;margin:0 auto;padding:26px 22px 60px}
h1{font-size:26px;margin:0 0 6px}h2{font-size:18px;margin:26px 0 10px}
.lede{color:var(--dim);margin:0 0 18px}
input,select{background:var(--panel);color:var(--ink);border:1px solid var(--line);
border-radius:7px;padding:7px 9px;font:inherit;font-size:14px;width:100%}
input:focus{outline:1px solid var(--acc2);border-color:var(--acc2)}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:7px;
padding:9px 16px;font:inherit;font-size:14px;cursor:pointer}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn.danger{background:transparent;border:1px solid #5c2c2c;color:#e07a75}
.btn.danger:hover{border-color:var(--err);filter:none}
/* Submit is the one that ends the month: green, and pushed to the right so it is
   never the button you hit by accident next to Save. */
.btn.primary{background:var(--ok)}
p.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
p.actions .btn.primary{margin-left:auto}
/* status of a month, in the admin table and on a member's page */
.st{font-size:13px;white-space:nowrap}
.st.ok{color:#8fd3ac}.st.warn{color:#e3cc93}.st.mut{color:var(--faint)}
/* accounts table: an address editor, a password reset and a role switch per row */
td.rowact{white-space:nowrap}
td.rowact form.inline{margin-right:8px}
input.mailcell{width:210px;padding:5px 8px;font-size:13px}
/* creating an account: one row above the table it adds a line to */
section.newuser{border:1px solid var(--line);border-radius:9px;background:var(--panel);
padding:12px 14px 14px;margin:0 0 18px}
section.newuser h2{margin:0 0 10px;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--faint);font-weight:600}
form.newacct{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
form.newacct label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;
color:var(--dim);width:auto}
form.newacct input{width:196px;padding:6px 8px;font-size:13.5px}
form.newacct select{width:132px;padding:6px 8px;font-size:13.5px}
form.newacct .btn{margin-left:auto}
code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
padding:1px 5px;font-size:13px}
.btn.small{padding:5px 10px;font-size:13px}
form.inline{display:inline-flex;gap:8px;align-items:center;margin:0}
.stack{display:flex;flex-direction:column;gap:12px;max-width:380px}
.stack label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--dim)}
.narrow{max-width:420px;margin:0 auto}
.flash{border-radius:8px;padding:10px 14px;font-size:14px;margin:0 0 14px}
.flash.ok{background:#12241c;border:1px solid var(--ok);color:#9ad9b8}
.flash.err{background:#2a1516;border:1px solid var(--err);color:#f0a3a0}
.flash.warn{background:#241f12;border:1px solid var(--acc2);color:#e3cc93}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--faint);font-weight:600;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;padding:8px 8px;border-bottom:1px solid var(--line)}
td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.we td{background:#12161c}tr.we .d{color:var(--faint)}
td.d{width:104px;color:var(--dim);white-space:nowrap}
td.h{width:88px}td.p{width:230px}
/* month grid: one row per week, Monday to Sunday across */
table.grid{table-layout:fixed}
table.grid th{text-align:center;padding:8px 4px}
table.grid th.wk,table.grid td.wk{width:76px;text-align:left}
table.grid td{padding:5px;text-align:center;position:relative}
table.grid td.pad{background:transparent}
table.grid td.we{background:#12161c}
table.grid td.we .dc{color:var(--faint)}
.dc{display:block;font-size:11px;color:var(--faint);margin:0 0 3px}
table.grid input{text-align:center;padding:5px 4px}
/* weekdays carry the hours that have to be accounted for: their box keeps a
   red border so nobody forgets one. Sat/Sun stay neutral. */
table.grid input.wd{border-color:var(--err)}
/* a day is coloured by nature of its code: billable work green, non-billable
   violet, leave amber, holiday blue. The colour is on the cell, so a filled
   month reads at a glance. */
table.grid td.cW{background:#12241c}
table.grid td.cN{background:#201b2c}
table.grid td.cL{background:#241f12}
table.grid td.cH{background:#161f2e}
table.grid td.cW .dc,table.grid td.cN .dc,table.grid td.cL .dc,table.grid td.cH .dc{color:#98a3af}
table.grid select{margin-top:4px;padding:5px 4px;font-size:12.5px}
/* A day is one line by default. The small + in the corner splits it in two
   (4h billable + 4h holiday), the − joins it back: same place, one click, and
   it is a plain form submit so it works without JavaScript. */
.seg+.seg{margin-top:3px}
button.add{position:absolute;top:1px;right:1px;width:17px;height:17px;padding:0;
background:none;border:1px solid transparent;border-radius:4px;color:var(--faint);
font:inherit;font-size:14px;line-height:14px;cursor:pointer;opacity:.45}
button.add:hover{opacity:1;color:var(--acc2);border-color:var(--line)}
/* the admin's read-only view of somebody else's month: same grid, values as text */
table.grid td.ro{vertical-align:top;padding:6px 4px}
table.grid td.ro .segv{display:block;font-size:14px;font-weight:600;margin:1px 0 0;
line-height:1.25}
table.grid td.ro .segv i{font-style:normal;font-weight:400;font-size:10.5px;color:var(--dim)}
table.grid tr.total td[colspan]{text-align:left;padding-left:14px}
tr.total td{border-top:2px solid var(--line);font-weight:700}
.monthbar{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.monthbar .cur{font-size:17px;font-weight:700;min-width:190px;text-align:center}
.badge{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;
padding:2px 7px;border:1px solid var(--line);color:var(--dim)}
.badge.admin{border-color:var(--acc2);color:var(--acc2)}
.mut{color:var(--faint);font-size:13px}
/* the row of tools under a table: download on the left, mail it on the right */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0}
form.sendcsv{margin-left:auto}
form.sendcsv label{display:inline-flex;align-items:center;gap:8px;font-size:13px;
color:var(--dim);white-space:nowrap}
form.sendcsv input{width:228px;padding:5px 8px;font-size:13px}
footer{border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;
padding:14px 28px;display:flex;justify-content:space-between}