/* APYCF task board — the official site's tokens, applied to a working tool. */

:root{
  --page:#F7F7F7; --white:#fff; --ink:#0B0B0B; --ink-2:#545454; --ink-3:#6B6B6B;
  --line:#E3E3E3; --line-2:#EFEFEF;
  --blue:#001991; --blue-br:#003BDE; --blue-tint:#EEF1FF;
  --todo:#8A8A8A; --doing:#1F6FEB; --review:#B8860B; --done:#1E8E4A; --late:#C0392B;
  --font:'Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --r:16px; --r-s:10px; --r-pill:999px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Reserve the scrollbar's width always. A tall month grid and a short list
   otherwise add and remove it between views, and the page jolts sideways. */
html{scrollbar-gutter:stable}
body{background:var(--page);color:var(--ink);font:400 15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased}
a{color:var(--blue-br);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{line-height:1.2}
h1{font-size:28px;font-weight:600;letter-spacing:-.015em}
h2{font-size:21px;font-weight:600}
h3{font-size:17px;font-weight:600}
.muted{color:var(--ink-3);font-size:13px}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--blue-br);outline-offset:2px}

.shell{width:min(100% - 36px,1280px);margin-inline:auto}

/* header */
.top{background:var(--white);border-bottom:1px solid var(--line)}
.top .shell{display:flex;align-items:center;gap:20px;padding-block:13px;flex-wrap:wrap}
.brand{font:800 18px/1 var(--font);color:var(--blue);letter-spacing:.01em}
.brand span{font:600 11px/1 var(--font);color:var(--ink-3);letter-spacing:.07em;
  text-transform:uppercase;margin-left:9px}
.top nav{display:flex;gap:16px;margin-left:auto;align-items:center}
.top nav a{font-weight:600;font-size:14px;color:var(--ink)}
.top nav a[aria-current]{color:var(--blue-br)}
.whoami{font-size:13px;color:var(--ink-3)}

/* buttons */
.btn{display:inline-block;border:1px solid var(--blue);background:var(--blue);color:#fff;
  border-radius:var(--r-pill);font:700 14px/1.4 var(--font);padding:9px 20px;cursor:pointer}
.btn:hover{background:#00126B;border-color:#00126B;text-decoration:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-line{background:transparent;color:var(--ink);border-color:#BFBFBF;font-weight:600}
.btn-line:hover{background:var(--white);border-color:var(--ink);color:var(--ink)}
.btn-ok{background:var(--done);border-color:var(--done)}
.btn-ok:hover{background:#17703a;border-color:#17703a}
.btn-no{background:var(--late);border-color:var(--late)}
.btn-no:hover{background:#9c2d20;border-color:#9c2d20}
.btn-s{padding:6px 14px;font-size:13px}

/* cards + forms */
.card{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:22px}
.card+.card{margin-top:16px}
.grid{display:grid;gap:14px 18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f{display:flex;flex-direction:column;gap:6px}
.f-wide{grid-column:1/-1}
.f label{font-weight:700;font-size:13px}
.f input,.f select,.f textarea{font:400 15px/1.5 var(--font);color:var(--ink);
  background:var(--page);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;width:100%}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;background:var(--white);
  border-color:var(--blue-br);box-shadow:0 0 0 3px rgba(0,59,222,.12)}
.check{display:flex;align-items:center;gap:9px;font-size:14px}
.check input{width:auto}
.note{background:var(--blue-tint);border-radius:var(--r-s);padding:12px 16px;font-size:13.5px;line-height:1.6}
.note-bad{background:#FDECE8;color:#7A2415}
.msg{margin-top:14px;font-size:14px;display:none}
.msg.on{display:block}
.msg.ok{color:var(--done)} .msg.err{color:var(--late)}

/* status pills */
.pill{display:inline-block;border-radius:var(--r-pill);padding:3px 11px;
  font:700 11.5px/1.5 var(--font);letter-spacing:.02em;color:#fff;white-space:nowrap}
.s-todo{background:var(--todo)} .s-doing{background:var(--doing)}
.s-review{background:var(--review)} .s-done{background:var(--done)}
.s-late{background:var(--late)}

/* calendar */
.calbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
/* A fixed slot, so Month, Open and Completed all put the controls that follow
   it in the same place. The heading takes what is left and truncates rather
   than widening the group. */
.calnav{display:flex;align-items:center;gap:12px;flex:0 0 368px;width:368px}
.calbar h2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Hidden, still occupying its place. */
.slot{visibility:hidden;pointer-events:none}
#view.swap{animation:swap .18s ease-out}
@keyframes swap{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#view.swap{animation:none}}
.seg{display:flex;gap:4px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:none;border-radius:var(--r-pill);padding:6px 15px;
  font:600 13px/1.4 var(--font);cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.cal{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-head div{padding:10px 12px;font:700 12px/1 var(--font);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-2)}
.day{min-height:116px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:7px 8px;cursor:pointer;position:relative}
.day:nth-child(7n){border-right:0}
.day:hover{background:#FAFBFF}
.day.other{background:#FBFBFB;color:#BDBDBD}
.day.today .dnum{background:var(--blue);color:#fff;border-radius:var(--r-pill);
  width:24px;height:24px;display:grid;place-items:center}
.dnum{font:700 12.5px/1 var(--font);color:var(--ink-3);margin-bottom:6px;height:24px;
  display:flex;align-items:center}
.ev{display:block;width:100%;text-align:left;border:0;cursor:pointer;border-radius:6px;
  padding:3px 7px;margin-bottom:3px;font:600 11.5px/1.45 var(--font);color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* list view + detail */
.row{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line-2);
  cursor:pointer}
.row:last-child{border-bottom:0}
.row:hover{background:#FAFBFF}
.row-t{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-w{font-size:13px;color:var(--ink-3);white-space:nowrap}

/* The universal reset above sets margin:0 on everything, and margin:auto is
   exactly how a browser centres a modal <dialog>. Put it back. */
dialog{margin:auto;border:0;border-radius:var(--r);padding:0;max-width:min(680px,94vw);width:100%;
  background:var(--white);box-shadow:0 20px 60px rgba(0,0,0,.22)}
dialog::backdrop{background:rgba(10,16,40,.44)}
.dlg{padding:24px}
.dlg-head{display:flex;align-items:start;gap:14px;margin-bottom:4px}
.dlg-head h2{flex:1}
.x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-3);padding:0 4px}
.acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

/* timeline */
.tl{margin-top:20px;border-top:1px solid var(--line-2);padding-top:16px}
.tl-i{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:9px 0;font-size:13.5px;
  border-bottom:1px solid var(--line-2)}
.tl-i:last-child{border-bottom:0}
.tl-when{color:var(--ink-3);font-size:12.5px}
.tl-who{font-weight:700}
.tl-rej{background:#FDECE8;border-radius:var(--r-s);padding:10px 12px;margin:2px 0}
.tl-rej .tl-who{color:#7A2415}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}

.center{min-height:100dvh;display:grid;place-items:center;padding:24px}
.center .card{width:min(100%,420px)}
@media(max-width:720px){
  .calnav{flex:1 1 100%;width:auto}
  .day{min-height:84px}
  .tl-i{grid-template-columns:1fr;gap:2px}
  .cal-head div{font-size:10px;padding:8px 4px}
}

/* admin: two panes, one job each — the add form is folded away because the
   table is what you come here to read */
.tabs{display:flex;gap:4px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px;width:max-content;margin-bottom:18px}
.tabs button{border:0;background:none;border-radius:var(--r-pill);padding:8px 22px;
  font:700 14px/1.4 var(--font);cursor:pointer;color:var(--ink-2)}
.tabs button[aria-selected=true]{background:var(--blue);color:#fff}
.pane[hidden]{display:none}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:11px 18px;min-width:118px}
.stat b{display:block;font:700 22px/1.1 var(--font);color:var(--blue)}
.stat span{font-size:12.5px;color:var(--ink-3)}
details.fold{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);
  margin-bottom:16px}
details.fold>summary{cursor:pointer;padding:15px 22px;font-weight:700;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:'+ ';color:var(--blue-br)}
details.fold[open]>summary::before{content:'– '}
details.fold .inner{padding:0 22px 22px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.filters select{font:400 14px/1.4 var(--font);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 14px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--page);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 8px 5px 13px;font-size:13px}
.chip button{border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:15px;line-height:1;padding:0 3px}
.chip button:hover{color:var(--late)}
.chip.fixed{background:var(--blue-tint);border-color:#C9D2FF}

/* attachments */
.files{margin-top:16px;border-top:1px solid var(--line-2);padding-top:14px}
.file{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.file:last-of-type{border-bottom:0}
.file-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-s{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.drop{border:1.5px dashed var(--line);border-radius:var(--r-s);padding:14px;text-align:center;
  font-size:13.5px;color:var(--ink-3);cursor:pointer;margin-top:10px}
.drop:hover{border-color:var(--blue-br);color:var(--blue-br);background:#FBFCFF}
.drop input{display:none}