:root{
  --bg:#ffffff;          /* Leeside's palette, turned over: white page */
  --card:#fbfaf6;        /* cards a shade warm so they lift off the white */
  --line:#e6e3da;
  --ink:#0e140e;         /* the site's near-black green, now the text */
  --mut:#63685f;
  --gold:#c9a84c;        /* fills only: buttons, the tick, the note rule */
  --goldink:#8a6b21;     /* the same gold darkened so it can carry text */
  --pad:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
h1,h2,p{margin:0}
button,input,textarea{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide{display:none}
:focus-visible{outline:2px solid var(--goldink);outline-offset:3px}

/* ---------- code screen ---------- */

/* Anchored near the top, not centred: on a phone the keyboard covers the lower half
   of the screen the moment the code field is tapped, and a centred card jumps. */
.gatewrap{min-height:100svh;display:flex;align-items:flex-start;justify-content:center;padding:max(72px,16svh) 24px 24px}
.gatecard{width:100%;max-width:380px;text-align:center}
.eyebrow{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--goldink);
  margin-bottom:10px;
}
.gatecard h1{font-size:34px;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.lede{color:var(--mut);font-size:15px;margin-top:10px}
.gatecard form{margin-top:28px;display:grid;gap:12px}
#code{
  width:100%;height:56px;text-align:center;font-size:22px;letter-spacing:.34em;font-weight:600;
  padding:0 0 0 .34em;   /* trailing letter-spacing pushes the text left; this puts it back */
  background:var(--card);border:1px solid #cfccc3;border-radius:8px;
  text-transform:uppercase;-webkit-appearance:none;appearance:none;
}
#code::placeholder{letter-spacing:0;font-weight:400;font-size:16px;color:#9a9a92;text-transform:none}
#code:focus{border-color:var(--goldink);outline:none}
.gatecard button{
  height:56px;border:0;border-radius:8px;background:var(--gold);color:var(--ink);
  font-weight:600;font-size:17px;cursor:pointer;
}
.err{margin-top:16px;color:#a33223;font-size:15px}

/* ---------- header ---------- */

.top{border-bottom:1px solid var(--line);background:var(--bg)}
.topin{max-width:720px;margin:0 auto;padding:22px var(--pad) 18px}
.top h1{font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.count{margin-top:6px;color:var(--mut);font-size:15px}
.toprow{margin-top:12px;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.pill{
  min-height:40px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--mut);font-size:15px;
}
.pill[aria-pressed="true"]{border-color:var(--goldink);color:var(--goldink)}
.out{color:var(--mut);font-size:15px;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:0 4px}
.out:hover{color:var(--ink)}

/* ---------- sections ---------- */

main{max-width:720px;margin:0 auto;padding:0 var(--pad) 8px}
.sec{padding-top:36px}
.sechead{padding-bottom:8px}
.sec h2{font-size:24px;font-weight:600;letter-spacing:-.01em}
.rank{
  margin-top:6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--goldink);
}
.seccount{margin-top:8px;color:var(--mut);font-size:15px}
.secnote{margin-top:10px;color:var(--mut);font-size:15px}
.grp{
  margin:26px 0 10px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.grank{color:var(--goldink);letter-spacing:.1em}

/* ---------- a task ---------- */

.task{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  margin-top:12px;padding:4px 4px 4px 0;
}
.tick{display:flex;gap:14px;align-items:flex-start;padding:14px 16px 12px;cursor:pointer;min-height:56px}
.tick input{position:absolute;opacity:0;width:0;height:0}
.box{
  flex:0 0 auto;width:26px;height:26px;margin-top:1px;border-radius:6px;
  border:1.5px solid #bdb9ac;background:#fff;position:relative;
}
.tick input:checked + .box{background:var(--gold);border-color:var(--gold)}
.tick input:checked + .box::after{
  content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.tick input:focus-visible + .box{outline:2px solid var(--goldink);outline-offset:3px}
.txt{display:block}
.ttl{display:block;font-weight:600;line-height:1.35;text-wrap:pretty}
.sub{display:block;margin-top:6px;color:var(--mut);font-size:15px;line-height:1.5}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:14px}
.who{color:var(--goldink)}
.who-ashton{color:#2f5d8a}
.who-both{color:var(--mut)}
.by{color:var(--mut)}
.by:empty{display:none}

.is-done .ttl{color:var(--mut);text-decoration:line-through;text-decoration-color:#bdb9ac}
.is-done .sub{color:#8c9089}

/* ---------- detail and notes ---------- */

.more{margin:0 16px 4px 56px;border-top:1px solid var(--line)}
.more summary{
  list-style:none;cursor:pointer;color:var(--goldink);font-size:15px;
  min-height:44px;display:flex;align-items:center;
}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" +";margin-left:6px}
.more[open] summary::after{content:" –"}
.more p{color:var(--mut);font-size:15px;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.more a{color:var(--goldink);text-decoration:underline;text-underline-offset:3px}
.more[open] p:first-of-type{margin-top:2px}

.notewrap{margin:0 16px 10px 56px}
.notes:not(:empty){margin-bottom:6px}
.note{
  border-left:2px solid var(--gold);padding:2px 0 2px 12px;margin:10px 0;
  font-size:15px;line-height:1.55;
}
.note .notetxt{margin:0}
.noteby{margin-top:6px;color:var(--mut);font-size:14px}
.unnote{
  background:transparent;border:0;padding:0 0 0 8px;color:var(--mut);font-size:14px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:32px;
}
.unnote:hover{color:var(--ink)}
.addnote{
  background:transparent;border:0;padding:0;min-height:40px;
  color:var(--mut);font-size:14px;cursor:pointer;
}
.addnote:hover{color:var(--ink)}
.editor textarea{
  width:100%;background:#fff;border:1px solid #cfccc3;border-radius:8px;
  padding:12px;font-size:16px;line-height:1.5;resize:vertical;
}
.editor textarea:focus{border-color:var(--goldink);outline:none}
.erow{display:flex;gap:10px;margin-top:10px}
.save,.cancel{
  min-height:44px;padding:0 18px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;
}
.save{background:var(--gold);color:var(--ink);border:0}
.cancel{background:transparent;color:var(--mut);border:1px solid var(--line);font-weight:400}

.fail{color:#a33223;font-size:14px;margin-top:8px}

/* ---------- footer ---------- */

.foot{
  max-width:720px;margin:0 auto;padding:36px var(--pad) 44px;
  color:var(--mut);font-size:14px;line-height:1.6;border-top:1px solid var(--line);margin-top:40px;
}
.foot p + p{margin-top:4px}

@media (min-width:760px){
  :root{--pad:24px}
  .top h1{font-size:32px}
  .sec{padding-top:48px}
}