/* ─────────────────────────────────────────────────────────────────────────────
   DMU Tasks — the board.

   Same palette, type and weights as the Rep Center, deliberately: somebody who
   works in both all day should not have to learn two apps. One rule from there
   is carried over because it was learned the hard way, from Johanna on 21 Oct:
   weight 300 Poppins at small sizes reads as low contrast while measuring as
   AA, so body text here is 400 and nothing a person reads while working is
   lighter. --muted is for labels ABOUT content, never for content.

   Served with a one-year cache and busted by the file's own modification time,
   so an edit reaches everybody on the next page load and an unchanged file
   costs no request at all.
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap');

:root {
  --deep:#1e1e38; --mid:#2e2e49; --lift:#3a3a5c; --line:rgba(105,97,255,.22);
  --accent:#6961ff; --cyan:#8edefa; --text:#f0ede8; --muted:#a6a5c9;
  --good:#6ee7a8; --warn:#ffcf70; --bad:#ff8f8f;
  --radius:10px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Poppins',system-ui,sans-serif; font-weight:400;
  background:var(--deep); color:var(--text);
  font-size:14px; line-height:1.55;
  padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px));
}
body.plain { display:grid; place-items:center; min-height:100vh; }

a { color:inherit; text-decoration:none; }
a:hover { color:var(--cyan); }

/* ── header ───────────────────────────────────────────────────────────────── */
.top {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding:1.1rem 0; border-bottom:1px solid var(--line); margin-bottom:1.4rem;
}
.brand { display:flex; align-items:baseline; gap:.1rem; }
.logo { height:28px; width:auto; display:block; }
.suffix { font-weight:700; color:var(--accent); letter-spacing:-.02em; }
.top nav { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.top nav a { font-size:.82rem; font-weight:500; color:var(--muted); }
.top nav a.on { color:var(--text); border-bottom:2px solid var(--accent); padding-bottom:2px; }
.top nav a.quiet { color:var(--lift); }
.pill {
  display:inline-block; min-width:1.15rem; text-align:center; font-size:.68rem; font-weight:700;
  background:var(--accent); color:#fff; border-radius:999px; padding:0 .35rem; margin-left:.25rem;
}

/* ── flashes ──────────────────────────────────────────────────────────────── */
.flash {
  border-radius:var(--radius); padding:.7rem 1rem; margin-bottom:1.1rem; font-size:.85rem;
  border:1px solid var(--line); background:var(--mid);
}
.flash.ok   { border-color:rgba(110,231,168,.4); color:var(--good); }
.flash.warn { border-color:rgba(255,207,112,.4); color:var(--warn); }
.flash.err  { border-color:rgba(255,143,143,.45); color:var(--bad); }

.strip { display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.1rem; font-size:.82rem; color:var(--muted); }
.strip b { color:var(--cyan); }

/* ── headline, and the new-task box ───────────────────────────────────────── */
.headline { display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.4rem; }
h1 { font-size:1.45rem; font-weight:700; letter-spacing:-.02em; }
.sub { color:var(--muted); font-size:.85rem; margin-top:.2rem; }
.sub b { color:var(--text); }
.arith { color:var(--lift); }
.hint { color:var(--muted); font-size:.78rem; margin:.4rem 0; }
.empty { color:var(--lift); font-size:.82rem; font-style:italic; }
.pad { padding:2rem 0; }
.dim { color:var(--muted); }
.n { color:var(--muted); font-weight:400; font-size:.8rem; }

.btn {
  display:inline-block; background:var(--mid); border:1px solid var(--line); color:var(--text);
  font-family:inherit; font-size:.78rem; font-weight:600; letter-spacing:.04em;
  padding:.6rem 1.1rem; border-radius:var(--radius); cursor:pointer; list-style:none;
}
.btn.go { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:hover { border-color:var(--accent); }
summary.btn::-webkit-details-marker { display:none; }

.newbox { position:relative; }
.newbox[open] > .form {
  position:absolute; right:0; top:2.6rem; z-index:5; width:min(94vw,30rem);
  background:var(--mid); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.form { display:grid; gap:.7rem; }
.form label, .person label { display:grid; gap:.25rem; font-size:.72rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  width:100%; background:var(--deep); border:1px solid var(--line); color:var(--text);
  font-family:inherit; font-size:.86rem; font-weight:400; padding:.55rem .7rem;
  border-radius:8px; outline:none; text-transform:none; letter-spacing:0;
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
textarea { resize:vertical; }

.inline { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.5rem 0; }
.inline.grow { flex:1 1 20rem; }
.inline.grow input[type=text] { flex:1 1 12rem; }
.mini {
  background:var(--lift); border:1px solid transparent; color:var(--text); font-family:inherit;
  font-size:.72rem; font-weight:600; padding:.38rem .7rem; border-radius:7px; cursor:pointer;
}
.mini.go { background:var(--accent); color:#fff; }
.mini.warn { background:transparent; border-color:rgba(255,207,112,.45); color:var(--warn); }
.mini:hover { filter:brightness(1.15); }
.mini[disabled] { opacity:.4; cursor:not-allowed; }

/* ── the four columns ─────────────────────────────────────────────────────── */
.board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; align-items:start; }
.col { background:var(--mid); border:1px solid var(--line); border-radius:12px; padding:.9rem; min-width:0; }
.col h2 { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.8rem; }

.card {
  background:var(--deep); border:1px solid var(--line); border-left:3px solid var(--lift);
  border-radius:9px; padding:.7rem .8rem; margin-bottom:.7rem; min-width:0;
}
.card.pri-urgent { border-left-color:var(--warn); }
.card.pri-later  { border-left-color:var(--lift); }
.card.pri-now    { border-left-color:var(--accent); }
.card.voided { opacity:.55; }
.card-top { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin-bottom:.4rem; }
.tag { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.1rem .4rem; border-radius:4px; background:var(--lift); color:var(--text); }
.tag.urgent { background:rgba(255,207,112,.2); color:var(--warn); }
.tag.later  { background:transparent; color:var(--muted); border:1px solid var(--lift); }
.tag.rework { background:rgba(255,143,143,.18); color:var(--bad); }
.price { margin-left:auto; font-size:.8rem; font-weight:700; color:var(--cyan); }
.card-title { display:block; font-size:.88rem; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.card-foot { display:flex; gap:.6rem; justify-content:space-between; margin-top:.45rem;
  font-size:.72rem; color:var(--muted); }
.who.none { color:var(--lift); font-style:italic; }
.due.late { color:var(--warn); }
.card-acts { display:flex; gap:.35rem; margin-top:.55rem; flex-wrap:wrap; }
.card-acts form { display:contents; }

/* ── one task, and the admin screens ──────────────────────────────────────── */
.one { max-width:54rem; }
.back { font-size:.78rem; color:var(--muted); display:inline-block; margin-bottom:.6rem; }
.one h3 { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:1.6rem 0 .6rem; }
.note { background:var(--mid); border-left:3px solid var(--accent); border-radius:6px;
  padding:.6rem .8rem; margin:.8rem 0; font-size:.82rem; color:var(--muted); }
.note.warn { border-left-color:var(--warn); }
.note.err  { border-left-color:var(--bad); }
.brief { background:var(--mid); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1rem; margin:1rem 0; font-size:.88rem; }
.panes { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem; margin-top:1rem; }
.pane { background:var(--mid); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; min-width:0; }
.pane h3 { margin-top:0; }
.kv { display:flex; justify-content:space-between; gap:1rem; font-size:.82rem;
  padding:.3rem 0; border-bottom:1px solid rgba(105,97,255,.1); color:var(--muted); }
.kv b { color:var(--text); font-weight:500; text-align:right; }
.proof { background:var(--deep); border:1px solid var(--line); border-radius:7px;
  padding:.5rem .7rem; margin:.4rem 0; font-size:.8rem; overflow-wrap:anywhere; }

.askbox { margin-top:1.4rem; border-top:1px solid var(--line); padding-top:.9rem; }
.askbox summary { font-size:.78rem; font-weight:600; color:var(--muted); cursor:pointer; }
.askbox[open] summary { margin-bottom:.7rem; color:var(--text); }

.tl { list-style:none; display:grid; gap:.5rem; }
.tl li { font-size:.8rem; border-left:2px solid var(--lift); padding-left:.7rem; }
.tl b { text-transform:uppercase; font-size:.65rem; letter-spacing:.08em; color:var(--cyan); margin-right:.4rem; }
.tl i { display:block; color:var(--lift); font-style:normal; font-size:.72rem; }

.review { background:var(--mid); border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem 1rem; margin-bottom:.8rem; }
.review-acts { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.line { font-size:.88rem; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
.line i { color:var(--muted); font-style:normal; font-size:.75rem; }
.line b { color:var(--cyan); }

.rows { width:100%; border-collapse:collapse; margin-top:.8rem; font-size:.84rem; }
.rows th { text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); padding:.4rem .5rem; border-bottom:1px solid var(--line); }
.rows td { padding:.5rem .5rem; border-bottom:1px solid rgba(105,97,255,.1); }

.person { display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
  background:var(--mid); border:1px solid var(--line); border-radius:var(--radius);
  padding:.7rem 1rem; margin-bottom:.6rem; }
.person-who { min-width:12rem; }
.person-who i { display:block; font-style:normal; font-size:.72rem; color:var(--muted); }
.chk { display:inline-flex !important; align-items:center; gap:.3rem; font-size:.72rem;
  text-transform:none !important; letter-spacing:0 !important; color:var(--text) !important; }
.chk input { width:auto; }
.cats { display:flex; gap:.6rem; }

/* ── sign in ──────────────────────────────────────────────────────────────── */
.signin { width:min(92vw,22rem); background:var(--mid); border:1px solid var(--line);
  border-radius:14px; padding:2.2rem 1.8rem; display:grid; gap:.3rem; }
.signin .logo { height:34px; margin-bottom:.4rem; }
.eyebrow { font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1.4rem; }
.signin label { font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:.7rem; }
.signin button { margin-top:1.3rem; background:var(--accent); color:#fff; border:none;
  font-family:inherit; font-size:.76rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.8rem; border-radius:8px; cursor:pointer; }
.fineprint { font-size:.72rem; color:var(--lift); margin-top:.9rem; text-align:center; }

.foot { border-top:1px solid var(--line); margin-top:3rem; padding:1.2rem 0 2rem;
  font-size:.74rem; color:var(--lift); max-width:46rem; }

/* ── narrow ───────────────────────────────────────────────────────────────── */
/* The board is four columns by nature, so below a laptop it stacks rather than
   shrinking: three 200px columns is four unreadable ones. */
@media (max-width:1000px) {
  .board { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .board { grid-template-columns:1fr; }
  .row3 { grid-template-columns:1fr; }
  .newbox[open] > .form { position:static; width:100%; margin-top:.6rem; }
  .top { padding:.8rem 0; }
}