:root{
  --bg:#f6f7f9; --panel:#ffffff; --panel-2:#fbfbfc; --border:#e3e6ea;
  --text:#1a1d21; --muted:#6b7280; --accent:#3b6ef5; --accent-soft:#eaf0ff;
  --high:#e5484d; --high-bg:#fdeced; --med:#d98216; --med-bg:#fdf3e4; --low:#3f9e5a; --low-bg:#e9f6ec;
  --done:#9aa3ad; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.06);
  color-scheme:light;
  --stale:#FFAD00; --stale-hover:#f0a400;
  --st-prog:#1d4ed8; --st-prog-bg:#e6eeff; --st-prog-bd:#b8ccff;
  --st-rev:#7a2cc0;  --st-rev-bg:#f3e8ff;  --st-rev-bd:#dcc0f5;
  --st-done:#237a3e; --st-done-bg:#e6f5ea; --st-done-bd:#b6e0c2;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111316; --panel:#181b1f; --panel-2:#1e2226; --border:#2a2f35;
    --text:#e8eaed; --muted:#9aa3ad; --accent:#6c8dff; --accent-soft:#1d2740;
    --high:#ff6369; --high-bg:#3a1e21; --med:#f0a94c; --med-bg:#3a2d18; --low:#5bc47a; --low-bg:#1c3423;
    --done:#6b7280; --shadow:none;
    color-scheme:dark;
    --st-prog:#9db8ff; --st-prog-bg:#1a2744; --st-prog-bd:#2e4577;
    --st-rev:#d4adff;  --st-rev-bg:#2a1d40;  --st-rev-bd:#4a3270;
    --st-done:#86d9a0; --st-done-bg:#16301e; --st-done-bd:#2a5536;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111316; --panel:#181b1f; --panel-2:#1e2226; --border:#2a2f35;
  --text:#e8eaed; --muted:#9aa3ad; --accent:#6c8dff; --accent-soft:#1d2740;
  --high:#ff6369; --high-bg:#3a1e21; --med:#f0a94c; --med-bg:#3a2d18; --low:#5bc47a; --low-bg:#1c3423;
  --done:#6b7280; --shadow:none;
  --st-prog:#9db8ff; --st-prog-bg:#1a2744; --st-prog-bd:#2e4577;
  --st-rev:#d4adff;  --st-rev-bg:#2a1d40;  --st-rev-bd:#4a3270;
  --st-done:#86d9a0; --st-done-bg:#16301e; --st-done-bd:#2a5536;
}
*{box-sizing:border-box}
/* Several rules below set display on elements we toggle with [hidden]. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:1000px; margin:0 auto; padding:28px 16px 80px}
header{display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap}
h1{font-size:22px; margin:0; letter-spacing:-.01em}
h2{font-size:17px; margin:0 0 12px}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:13px}

button,select,textarea,input[type=text],input[type=date],input[type=password],input[type=email]{
  font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px;
}
textarea{width:100%; resize:vertical; line-height:1.45; min-height:44px}
/* Every dropdown and button in the app is 13px, a step below body text (15px).
   The summary tiles are buttons too, but size their own number and label. */
select,button{font-size:13px}

/* descriptions: plain text, line breaks kept, long URLs allowed to wrap */
.desc{
  margin-top:3px; font-size:13.5px; color:var(--muted); white-space:pre-wrap;
  overflow-wrap:anywhere; max-width:68ch;
}
.desc a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.desc a:hover{text-decoration-thickness:2px}
.task.done .desc{opacity:.7}
table.grid .desc{font-size:12.5px; margin-top:4px}
.desc-field{grid-column:1/-1; position:relative}
.counter{display:block; text-align:right; font-size:11.5px; color:var(--muted); margin-top:2px}
.counter.full{color:var(--high); font-weight:600}
button{cursor:pointer; transition:background .12s,border-color .12s}
button:hover{border-color:var(--accent)}
button[disabled]{opacity:.55; cursor:default}
.btn-ghost{background:transparent}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.btn-primary:hover{filter:brightness(1.07)}
.btn-danger{color:var(--high); border-color:transparent; background:transparent}
.btn-danger:hover{border-color:var(--high)}
input[type=color]{width:42px; height:38px; padding:2px; background:var(--panel); border:1px solid var(--border); border-radius:8px}

/* login */
.login{min-height:100vh; display:grid; place-items:center; padding:20px}
.login-card{width:min(360px,100%); padding:26px; display:flex; flex-direction:column; gap:6px}
.login-card h1{margin-bottom:2px}
.login-card p{margin:0 0 10px}
.login-card label{font-size:13px; color:var(--muted); margin-top:8px}
.login-card button{margin-top:16px}
.form-error{
  margin-top:10px; padding:8px 10px; border-radius:8px; font-size:13.5px;
  background:var(--high-bg); color:var(--high);
}

.or{display:flex; align-items:center; gap:10px; margin:18px 0 14px; color:var(--muted); font-size:12.5px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--border)}
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel);
  color:var(--text); font-size:13px; font-weight:500;
}
.google-btn:hover{border-color:var(--accent); background:var(--panel-2)}

/* header bits */
.who{font-size:13px; color:var(--muted)}
.who b{color:var(--text); font-weight:600}
.role{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 6px; border-radius:99px; background:var(--accent-soft); color:var(--accent); margin-left:6px;
}
.viewtabs,.subtabs{display:flex; gap:4px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:3px}
.subtabs{margin-bottom:16px; width:fit-content}
.tab{border:0; background:transparent; padding:6px 12px; border-radius:7px; font-size:13px; color:var(--muted)}
.tab:hover{color:var(--text)}
.tab.is-on{background:var(--panel); color:var(--text); font-weight:600; box-shadow:var(--shadow)}

.stale-notice{
  position:sticky; top:0; z-index:10; padding:10px 16px; text-align:center; font-size:14px;
  background:var(--high); color:#fff;
}
.banner{margin-bottom:14px; padding:10px 14px; border-radius:10px; background:var(--high-bg); color:var(--high); border:1px solid currentColor; font-size:14px}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
.stat{
  display:block; width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  box-shadow:var(--shadow); transition:background .12s, border-color .12s, transform .08s;
}
.stat .n{display:block; font-size:22px; font-weight:650; letter-spacing:-.02em}
.stat .l{display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
/* hover: tint; the tile whose filter is showing stays outlined in the accent colour */
.stat:hover{background:var(--accent-soft); border-color:var(--accent)}
.stat:hover .l{color:var(--accent)}
.stat:active{transform:translateY(1px)}
.stat[aria-pressed="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.stat[aria-pressed="true"] .l{color:var(--accent); font-weight:600}
.stat:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.bar{height:6px; background:var(--border); border-radius:99px; overflow:hidden}
.bar>i{display:block; height:100%; background:var(--accent); width:0; transition:width .25s}

.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow)}
/* add form: title across the top, the settings in one row, description underneath */
form.add{padding:14px; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) auto; gap:8px; margin:18px 0 14px}
form.add input[type=text]{width:100%}
form.add #f-title{grid-column:1/-1}
form.add select,form.add input[type=date]{min-width:0; width:100%}

/* add-form lists: greyed while showing their label ("Category", "Priority"...) */
select.pick.is-placeholder{color:var(--muted)}
select.pick option{color:var(--text)}
select.pick option:disabled{color:var(--muted)}
form.rowform{padding:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
form.rowform input[type=text],form.rowform input[type=password]{flex:1; min-width:140px}

.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.toolbar .grow{flex:1; min-width:160px}
.count{font-size:13px; color:var(--muted)}

/* task list */
ul.list{list-style:none; margin:0; padding:0}
/* one task row: status | title with its tags underneath | description | edit, delete */
li.task{
  display:grid; grid-template-columns:148px minmax(0, 1fr) minmax(0, 1.25fr) 76px;
  align-items:start; gap:14px; padding:12px 14px; border-bottom:1px solid var(--border);
}
li.task:last-child{border-bottom:0}
li.task:hover{background:var(--panel-2)}
.col-title,.col-desc{min-width:0}
.col-desc .desc{margin-top:1px; max-width:none}

/* status picker, coloured by stage */
select.status{width:100%; padding:5px 8px; font-size:13px; font-weight:600; border-width:1px}
select.status.st-open{color:var(--text); background:var(--panel)}
select.status.st-in_progress{color:var(--st-prog); background:var(--st-prog-bg); border-color:var(--st-prog-bd)}
select.status.st-review{color:var(--st-rev); background:var(--st-rev-bg); border-color:var(--st-rev-bd)}
select.status.st-completed{color:var(--st-done); background:var(--st-done-bg); border-color:var(--st-done-bd)}
select.status:disabled{opacity:.75; cursor:not-allowed}
.person{font-size:12px; color:var(--muted); font-weight:500}
.person.to-me{color:var(--accent); font-weight:600}
.title{word-break:break-word}
.task.done .title{text-decoration:line-through; color:var(--done)}
.meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:5px}
.tag{font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:99px; letter-spacing:.02em}
.cat{background:var(--accent-soft); color:var(--accent)}
.p-high{background:var(--high-bg); color:var(--high)}
.p-medium{background:var(--med-bg); color:var(--med)}
.p-low{background:var(--low-bg); color:var(--low)}
/* A task still hanging around more than 14 days after it was created. The amber is
   fixed in both themes, so its text is pinned dark for contrast. */
li.task.stale{background:var(--stale); color:#1a1d21}
li.task.stale:hover{background:var(--stale-hover)}
li.task.stale .title,li.task.stale .due,li.task.stale .age,li.task.stale .owner{color:#1a1d21}
li.task.stale .desc,table.grid tr.stale .desc{color:#3d2e00}
li.task.stale .desc a,table.grid tr.stale .desc a{color:#1f3fae}
li.task.stale.done .title{color:#6b5200}
li.task.stale .tag{background:rgba(255,255,255,.75); color:#1a1d21}
li.task.stale .icon{color:#5c4400}
li.task.stale .icon:hover{background:rgba(255,255,255,.6); color:#1a1d21}
table.grid tr.stale td{background:var(--stale); color:#1a1d21}
table.grid tr.stale input,table.grid tr.stale select{background:rgba(255,255,255,.85); color:#1a1d21; border-color:rgba(0,0,0,.18)}

.age{font-size:12px; font-weight:600}
.owner{font-size:12px; color:var(--muted)}
.tag.vis{background:var(--accent-soft); color:var(--accent); border:1px solid currentColor}
.due{font-size:12px; color:var(--muted)}
.due.overdue{color:var(--high); font-weight:600}
.actions{display:flex; gap:4px; align-items:center; justify-content:flex-end; opacity:0; transition:opacity .12s}
li.task:hover .actions,li.task:focus-within .actions{opacity:1}
.actions select{padding:4px 6px; font-size:13px}
.icon{background:transparent; border:0; padding:4px 7px; border-radius:6px; color:var(--muted); font-size:13px}
.icon:hover{background:var(--border); color:var(--text)}
.empty{padding:44px 20px; text-align:center; color:var(--muted)}
footer{margin-top:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted)}

/* admin tables */
.card:has(> table.grid){overflow-x:auto}
table.grid{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
table.grid th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border);
}
table.grid td{padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr:hover{background:var(--panel-2)}
table.grid input[type=text],table.grid input[type=date],table.grid select{padding:5px 7px; font-size:13.5px; width:100%}
table.grid select{font-size:13px}
table.grid td.tight{width:1%; white-space:nowrap}
/* Controls in a 1%-wide column would otherwise shrink to nothing. */
table.grid td.tight select,table.grid td.tight input{width:auto}
table.grid td.tight input[type=date]{min-width:132px}
table.grid td.tight input[type=color]{width:34px; height:30px}
table.grid td.tight input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent); cursor:pointer}
table.grid tr.done td input[type=text]{color:var(--done); text-decoration:line-through}
.you{font-size:11px; color:var(--muted); margin-left:6px}
.linked{color:var(--low); font-weight:700; margin-left:4px}
.swatch{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle}
.dot{display:inline-block; width:8px; height:8px; border-radius:99px; margin-right:6px; background:var(--low)}
.dot.off{background:var(--muted)}

/* dialog */
dialog{
  border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text);
  padding:22px; width:min(340px,92vw); box-shadow:0 12px 32px rgba(0,0,0,.2);
}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog label{display:block; font-size:13px; color:var(--muted); margin-top:10px}
dialog input,dialog textarea,dialog select{width:100%; margin-top:4px}
dialog.wide{width:min(600px,94vw)}
dialog menu{display:flex; gap:8px; justify-content:flex-end; margin:20px 0 0; padding:0}
dialog h2 + .small{margin:-6px 0 4px}
.dialog-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 12px; margin-top:4px}

/* theme toggle: a moon in light mode (switch to dark), a sun in dark mode */
.theme-btn{display:inline-flex; align-items:center; justify-content:center; padding:7px 9px; line-height:0}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}

/* mid-width: description drops under the title instead of squeezing beside it */
@media (max-width:980px){
  li.task{grid-template-columns:140px minmax(0,1fr) 76px}
  .col-desc{grid-column:2 / 3; grid-row:2}
}

@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  form.add{grid-template-columns:1fr 1fr}
  form.add .btn-primary{grid-column:1/-1}
  .dialog-grid{grid-template-columns:1fr 1fr}
  .actions{opacity:1}
  li.task{grid-template-columns:minmax(0,1fr) auto; gap:8px 10px}
  .col-status{grid-column:1 / -1}
  .col-status select.status{width:auto; min-width:150px}
  .col-title{grid-column:1; grid-row:2}
  .col-desc{grid-column:1 / -1; grid-row:3}
  li.task .actions{grid-column:2; grid-row:2}
  header{gap:8px}
  .who{order:5; width:100%}
  table.grid{font-size:13px}
  table.grid th,table.grid td{padding:8px 6px}
}