:root{
  --bg:#faf8f4; --panel:#fff; --panel-2:#fdfcfa; --ink:#181b1a; --ink-2:#3d4442;
  --muted:#6a716e; --line:#e6e0d6; --line-2:#efeae1;
  --accent:#14594a; --accent-2:#1d7a63; --accent-ink:#fff; --accent-soft:#e7f0ec;
  --add:#0f6b46; --add-bg:#e6f4ec; --chg:#8a5300; --chg-bg:#fdf1d8;
  --del:#a02020; --del-bg:#fbe9e9;
  --r:14px; --r-sm:10px; --r-pill:999px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(24,27,26,.04),0 2px 10px rgba(24,27,26,.05);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#111413;--panel:#191e1d;--panel-2:#1d2322;--ink:#eef1ef;--ink-2:#c7cec9;
    --muted:#98a29d;--line:#2a3130;--line-2:#232a29;--accent:#6ec6a8;--accent-2:#8fd8bf;
    --accent-ink:#08120e;--accent-soft:#1b2a25;
    --add:#7fd6a8;--add-bg:#16301f;--chg:#e8bd6d;--chg-bg:#33280f;
    --del:#f0a0a0;--del-bg:#3a1c1c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.28)}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1{font-size:1.6rem;letter-spacing:-.015em;margin:.2em 0 .3em}
main{max-width:960px;margin:0 auto;padding:1.2rem 1rem 4rem}
.muted{color:var(--muted)}
.lede{color:var(--ink-2);max-width:64ch}
.small{font-size:.86rem}

.bar{position:sticky;top:0;z-index:10;display:flex;gap:.8rem;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding:.6rem 1rem;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2)}
.brand{font-weight:700;text-decoration:none;color:var(--ink)}
.brand .mark{color:var(--accent)}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;overflow-x:auto}
.tabs button{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  padding:.35rem .7rem;border-radius:var(--r-pill);font:inherit;font-size:.87rem;
  font-weight:600;cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tabs .count{opacity:.75;margin-left:.3rem;font-variant-numeric:tabular-nums}

.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--r-sm);
  padding:.55rem .95rem;font:inherit;font-weight:650;cursor:pointer}
.btn:hover{background:var(--accent-2)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent)}
.btn.small{padding:.4rem .7rem;font-size:.86rem}
.btn.danger{background:var(--panel);color:var(--del);border:1px solid var(--line)}
.btn.danger:hover{background:var(--del-bg)}

.list{display:grid;gap:.9rem;margin-top:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.chead{display:flex;gap:.7rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding:.9rem 1rem;border-bottom:1px solid var(--line-2)}
.ctitle{font-weight:700;font-size:1.05rem}
.cmeta{color:var(--muted);font-size:.87rem;margin-top:.12rem}
.tags{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.tag{font-size:.74rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em;
  padding:.22rem .55rem;border-radius:var(--r-pill);background:var(--accent-soft);
  color:var(--accent)}
.tag.new{background:var(--chg-bg);color:var(--chg)}
.tag.pending{background:var(--chg-bg);color:var(--chg)}
.tag.approved{background:var(--add-bg);color:var(--add)}
.tag.rejected{background:var(--del-bg);color:var(--del)}
.tag.followup{background:var(--accent-soft);color:var(--accent)}

table.diff{width:100%;border-collapse:collapse;font-size:.92rem}
table.diff th{text-align:left;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding:.5rem 1rem;font-weight:750;
  border-bottom:1px solid var(--line-2);background:var(--panel-2)}
table.diff td{padding:.5rem 1rem;border-bottom:1px solid var(--line-2);
  vertical-align:top;overflow-wrap:anywhere}
table.diff tr:last-child td{border-bottom:0}
.fname{color:var(--muted);white-space:nowrap}
.val{font-family:var(--mono);font-size:.86rem}
.was{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.row-changed{background:var(--chg-bg)}
.row-added{background:var(--add-bg)}
.row-changed .fname,.row-added .fname{color:inherit;font-weight:650}
.pick{width:1.05rem;height:1.05rem;accent-color:var(--accent);cursor:pointer}
.cfoot{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.85rem 1rem;
  background:var(--panel-2);border-top:1px solid var(--line-2)}
.cfoot input[type=text]{flex:1 1 12rem;min-width:0;padding:.5rem .7rem;font:inherit;
  font-size:.9rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink)}
.note{padding:.8rem 1rem;background:var(--chg-bg);color:var(--chg);font-size:.9rem}
.res{font-size:.88rem;font-weight:650}
.res.ok{color:var(--add)} .res.err{color:var(--del)}

.signin{max-width:340px;margin:12vh auto;padding:0 1rem;text-align:center}
.signin h1{font-size:1.5rem;margin-bottom:.1rem}
.signin .mark{color:var(--accent)}
/* A class selector beats the browser's [hidden] rule, so the hidden step has to
   be turned off explicitly or both steps render at once. */
[hidden]{display:none!important}
.signin form{margin-top:1.6rem;display:grid;gap:.5rem;text-align:left}
.signin .step{display:grid;gap:.5rem}
.signin .sentto{font-size:.88rem;color:var(--muted);margin:0 0 .2rem}
.signin .code{font-family:var(--mono);font-size:1.5rem;letter-spacing:.35em;
  text-align:center;padding:.7rem .5rem}
.signin .change{background:none;border:0;color:var(--accent);font:inherit;
  font-size:.86rem;text-decoration:underline;cursor:pointer;padding:.2rem;
  justify-self:center}
.signin label{font-size:.8rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.signin input{padding:.7rem .85rem;font:inherit;font-size:1rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink)}
.signin input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.signin .btn{margin-top:.4rem}
.msg{font-size:.9rem;min-height:1.2em;margin:.2rem 0 0}
.msg.err{color:var(--del);font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}