*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%;display:block}
:root{
  --ground:#f3f5f3; --surface:#ffffff; --surface-2:#eaeeed; --surface-3:#e0e6e4;
  --line:#dce2e0; --line-strong:#c3cbc9;
  --ink:#141d1c; --ink-2:#42534f; --ink-3:#6f807c;
  --accent:#0e4f5e; --accent-ink:#ffffff; --accent-soft:#dfebee; --accent-line:#a8c8ce;
  --s-new:#5a6b78; --s-prog:#a4700a; --s-info:#b0472b; --s-done:#3d7a3a; --s-wont:#8a8f8d;
  --s-new-bg:#e6eaee; --s-prog-bg:#f6ecd8; --s-info-bg:#f7e4dd; --s-done-bg:#e2efdf; --s-wont-bg:#e9ebea;
  --hi:#b0472b; --shadow:0 1px 2px rgba(16,32,30,.06),0 10px 26px -14px rgba(16,32,30,.3);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0e1413; --surface:#151d1c; --surface-2:#1c2625; --surface-3:#243030;
    --line:#26302e; --line-strong:#3a4643;
    --ink:#e6ebe9; --ink-2:#a9b6b3; --ink-3:#7e8c89;
    --accent:#5ec2cf; --accent-ink:#08201f; --accent-soft:#12313a; --accent-line:#2d5761;
    --s-new:#9dadb8; --s-prog:#dba746; --s-info:#e28564; --s-done:#77c46d; --s-wont:#828c8a;
    --s-new-bg:#1e2830; --s-prog-bg:#2e2718; --s-info-bg:#33221c; --s-done-bg:#1d2c1e; --s-wont-bg:#212927;
    --hi:#e28564; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0e1413; --surface:#151d1c; --surface-2:#1c2625; --surface-3:#243030;
  --line:#26302e; --line-strong:#3a4643;
  --ink:#e6ebe9; --ink-2:#a9b6b3; --ink-3:#7e8c89;
  --accent:#5ec2cf; --accent-ink:#08201f; --accent-soft:#12313a; --accent-line:#2d5761;
  --s-new:#9dadb8; --s-prog:#dba746; --s-info:#e28564; --s-done:#77c46d; --s-wont:#828c8a;
  --s-new-bg:#1e2830; --s-prog-bg:#2e2718; --s-info-bg:#33221c; --s-done-bg:#1d2c1e; --s-wont-bg:#212927;
  --hi:#e28564; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
}
body{
  background:var(--ground); color:var(--ink);
  font-family:Archivo,"Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px 80px}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--ground); border-bottom:1px solid var(--line)}
.topbar-in{max-width:1120px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.mark{display:flex; align-items:baseline; gap:10px; margin-right:auto; min-width:0}
.mark h1{font-family:Newsreader,Georgia,serif; font-weight:500; font-size:23px; letter-spacing:-.01em; white-space:nowrap}
.mark .sub{font-size:12px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.who{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px 4px 4px}
.who .name{font-size:13px; font-weight:500}
.av{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff; flex:none}
.btn{border:1px solid var(--line-strong); background:var(--surface); border-radius:8px;
  padding:7px 13px; font-size:13px; font-weight:500; cursor:pointer}
.btn:hover:not(:disabled){background:var(--surface-2)}
.btn:disabled{opacity:.5; cursor:default}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover:not(:disabled){filter:brightness(1.12)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){background:var(--surface-2)}
.btn.sm{padding:4px 10px; font-size:12px}
.live{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-3);
  letter-spacing:.04em; text-transform:uppercase}
.live .pip{width:7px; height:7px; border-radius:50%; background:var(--s-done)}
.live.off .pip{background:var(--s-wont)}

/* ---------- banners ---------- */
.banner{margin:16px 0 0; padding:10px 14px; border-radius:8px; font-size:13px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  display:flex; gap:10px; align-items:baseline}
.banner b{color:var(--ink); font-weight:600}
.banner.warn{background:var(--s-info-bg); border-color:var(--s-info); color:var(--ink)}

/* ---------- dashboard ---------- */
.dash{margin-top:24px; display:flex; flex-direction:column; gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.section-h{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px}
.progress{padding:20px 22px}
.progress-top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:14px}
.progress-num{font-family:Newsreader,Georgia,serif; font-size:40px; line-height:1; font-weight:500}
.progress-num small{font-size:15px; color:var(--ink-3); font-family:Archivo,sans-serif; margin-left:6px}
.progress-cap{font-size:13px; color:var(--ink-2); max-width:46ch}
.meter{display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--surface-3); gap:2px}
.meter span{display:block; min-width:2px}
.meter-key{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tile{display:flex; align-items:center; gap:8px; padding:6px 11px 6px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:12.5px; cursor:pointer}
.tile:hover{border-color:var(--line-strong)}
.tile[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.tile .dot{width:9px; height:9px; border-radius:50%; flex:none}
.tile .n{font-family:"IBM Plex Mono",monospace; font-weight:500; font-variant-numeric:tabular-nums}
.tile .lbl{color:var(--ink-2)}
.grid2{display:grid; grid-template-columns:1.15fr 1fr; gap:16px}
@media (max-width:800px){.grid2{grid-template-columns:1fr}}
.panel{padding:18px 20px}
.bars{display:flex; flex-direction:column; gap:9px}
.bar-row{display:grid; grid-template-columns:minmax(96px,auto) 1fr auto; gap:10px; align-items:center; font-size:13px}
.bar-row .lab{color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{height:9px; border-radius:5px; background:var(--surface-3); overflow:hidden; display:flex; gap:1px}
.bar-track i{display:block}
.bar-row .cnt{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.feed{display:flex; flex-direction:column; gap:11px; max-height:230px; overflow-y:auto}
.feed li{display:flex; gap:9px; font-size:13px; line-height:1.4}
.feed .txt{color:var(--ink-2)}
.feed .txt b{color:var(--ink); font-weight:600}
.feed .when{color:var(--ink-3); font-size:11px; white-space:nowrap; margin-left:auto; padding-left:8px}
.empty{color:var(--ink-3); font-size:13px; font-style:italic}

/* right-hand stack: Completed above Activity */
.rcol{display:flex; flex-direction:column; gap:16px; min-width:0}
.donelist{display:flex; flex-direction:column; max-height:260px; overflow-y:auto}
.donelist li + li{border-top:1px solid var(--line)}
.done-row{width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline;
  background:none; border:0; text-align:left; padding:7px 4px; cursor:pointer; border-radius:6px}
.done-row:hover{background:var(--surface-2)}
.done-row .dt{font-size:13px; line-height:1.35; color:var(--ink-2); min-width:0}
.done-row .da{font-size:11px; color:var(--ink-3); white-space:nowrap}
.done-row .tick{color:var(--s-done); font-weight:700}
.panel-h{display:flex; align-items:baseline; gap:8px; margin-bottom:12px}
.panel-h .section-h{margin-bottom:0}
.panel-h .hint{font-size:11px; color:var(--ink-3); margin-left:auto}

/* ---------- toolbar ---------- */
.toolbar{margin-top:28px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line)}
.search{flex:1 1 220px; min-width:180px; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:7px 12px; font-size:13px}
.search::placeholder{color:var(--ink-3)}
select.filter{background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; font-size:13px; cursor:pointer}
.count-note{font-size:12px; color:var(--ink-3); margin:14px 0 10px}

/* ---------- request rows ---------- */
.rows{display:flex; flex-direction:column; gap:8px}
.row{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  border-left:3px solid var(--pri,var(--line)); overflow:hidden}
.row.open{box-shadow:var(--shadow); border-color:var(--line-strong)}
.row-head{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px 16px; cursor:pointer; width:100%; text-align:left; background:none; border:0}
.row-head:hover{background:var(--surface-2)}
.rid{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}
.rtitle{font-size:14.5px; font-weight:500; line-height:1.35; text-wrap:balance}
.rmeta{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:4px}
.tag{font-size:11px; color:var(--ink-3); background:var(--surface-2); border-radius:4px; padding:1px 6px}
.tag.hi{color:var(--hi); background:transparent; border:1px solid var(--hi); font-weight:600}
.pill{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px}
.right-col{display:flex; align-items:center; gap:10px}
.row-body{padding:4px 16px 18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:18px}
.detail{font-size:14px; color:var(--ink-2); line-height:1.6; max-width:70ch; white-space:pre-wrap; padding-top:14px}
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 0;
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line)}
.controls .lab{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:2px}
/* Pushed to the far end of the controls row: it opens a modal, unlike the
   one-click status and priority buttons beside it, so it should not read as
   one of them. */
.controls .edit-btn{margin-left:auto}
.thread{display:flex; flex-direction:column; gap:14px}
.cmt{display:grid; grid-template-columns:auto 1fr; gap:10px}
.cmt-b{background:var(--surface-2); border-radius:8px; padding:9px 12px}
.cmt-h{display:flex; gap:8px; align-items:baseline; margin-bottom:3px}
.cmt-h .n{font-size:13px; font-weight:600}
.cmt-h .t{font-size:11px; color:var(--ink-3)}
.cmt-b p{font-size:13.5px; color:var(--ink-2); line-height:1.5; white-space:pre-wrap}
.composer{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
textarea.ta{width:100%; min-height:64px; resize:vertical; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13.5px}
textarea.ta::placeholder{color:var(--ink-3)}
.composer-actions{display:flex; justify-content:flex-end; margin-top:8px}
.composer-actions{align-items:center; gap:12px; justify-content:space-between}
.composer-hint{font-size:11.5px; color:var(--ink-3)}
.composer-hint b{color:var(--ink-2); font-weight:700}
.composer-main{position:relative; min-width:0}

/* ---------- @mentions ---------- */
.mention{color:var(--accent); font-weight:600; border-radius:3px; padding:0 1px}
/* Tagging you is worth spotting in a wall of text, so it gets a ground of its
   own rather than just a heavier weight. */
.mention.me{background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-line) inset}
.tag.at{color:var(--accent); background:var(--accent-soft); font-weight:600}
.btn.mention-filter.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.btn.mention-filter b{font-variant-numeric:tabular-nums; margin-left:2px}

/* The picker under the comment box. Capped in height so a long roster cannot
   push the Post button off the screen. */
.mpick{list-style:none; margin:6px 0 0; padding:4px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow);
  max-height:196px; overflow-y:auto}
.mpick button{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:0; border-radius:6px; padding:5px 7px; font-size:13.5px;
  color:var(--ink); cursor:pointer}
.mpick button:hover, .mpick button.on{background:var(--surface-2)}
.mpick button.on{box-shadow:0 0 0 1px var(--accent-line) inset}
.mpick .mn{font-weight:500}
.mpick .you{margin-left:auto; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3)}

/* ---------- attachments ---------- */
.atts{display:flex; flex-wrap:wrap; gap:10px}
.att{position:relative; border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
  overflow:hidden; width:132px}
.att a.thumb{display:block; height:88px; background:var(--surface-3)}
.att a.thumb img{width:100%; height:100%; object-fit:cover}
.att .ph{height:88px; display:grid; place-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
.att .meta{padding:6px 8px; border-top:1px solid var(--line)}
.att .fn{font-size:11.5px; line-height:1.3; word-break:break-word; display:block; color:var(--ink)}
.att .sz{font-size:10.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.att .rm{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface); cursor:pointer;
  font-size:13px; line-height:1; display:grid; place-items:center; padding:0}
.att .rm:hover{background:var(--s-info-bg); border-color:var(--s-info); color:var(--s-info)}
.picker-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.filebtn{position:relative; overflow:hidden; display:inline-flex}
.filebtn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:100px}
.att-hint{font-size:11.5px; color:var(--ink-3)}
.att-list{display:flex; flex-direction:column; gap:5px; margin-top:8px}
.att-list li{display:flex; gap:8px; align-items:baseline; font-size:12.5px; color:var(--ink-2)}
.att-list .x{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}
.att-list button{border:0; background:none; color:var(--hi); cursor:pointer; font-size:11.5px; padding:0}

/* ---------- modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,20,19,.5); z-index:60;
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 20px 40px; overflow-y:auto}
.modal{background:var(--surface); border:1px solid var(--line-strong); border-radius:14px;
  width:100%; max-width:560px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.modal-h{padding:20px 24px 0}
.modal-h h2{font-family:Newsreader,Georgia,serif; font-weight:500; font-size:22px}
.modal-h p{font-size:13px; color:var(--ink-3); margin-top:4px}
.modal-b{padding:18px 24px; display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:5px}
.field > label{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{background:var(--ground); border:1px solid var(--line);
  border-radius:8px; padding:9px 12px; font-size:14px; width:100%}
.field-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.modal-f{padding:0 24px 20px; display:flex; gap:10px; justify-content:flex-end; align-items:center}
.err{font-size:12.5px; color:var(--hi); margin-right:auto}

/* ---------- gate (sign-in / not-on-team / loading) ---------- */
.gate{min-height:100vh; display:grid; place-items:center; padding:40px 20px}
.gate-card{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:34px 34px 30px; max-width:430px; width:100%; box-shadow:var(--shadow)}
.gate-card h1{font-family:Newsreader,Georgia,serif; font-weight:500; font-size:27px; letter-spacing:-.01em}
.gate-card .eyebrow{font-size:11px; color:var(--ink-3); letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px}
.gate-card p{font-size:14px; color:var(--ink-2); margin-top:10px; line-height:1.55}
.gate-form{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.gate-form input{background:var(--ground); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; font-size:15px; width:100%}
.gate-note{font-size:12.5px; color:var(--ink-3); margin-top:16px; line-height:1.5}
.gate-ok{background:var(--s-done-bg); border:1px solid var(--s-done); color:var(--ink);
  border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.5; margin-top:20px}
/* the address, set to be proofread rather than skimmed */
.sent-addr{display:block; margin-top:8px !important; padding:11px 14px;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:8px;
  font-size:14.5px; color:var(--ink) !important; word-break:break-all; line-height:1.4}
.sent-facts{margin-top:18px; display:flex; flex-direction:column; gap:8px}
.sent-facts li{position:relative; padding-left:18px; font-size:13.5px;
  color:var(--ink-2); line-height:1.5}
.sent-facts li::before{content:""; position:absolute; left:2px; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--accent)}
.link-btn{background:none; border:0; padding:0; margin:0; font:inherit; color:var(--accent);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;
  cursor:pointer}
.link-btn:hover{filter:brightness(1.25)}
.gate-err{background:var(--s-info-bg); border:1px solid var(--s-info); color:var(--ink);
  border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.5; margin-top:16px}
.spin{width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong);
  border-top-color:var(--accent); margin:0 auto}
@media (prefers-reduced-motion:no-preference){ .spin{animation:sp .7s linear infinite} }
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80;
  background:var(--ink); color:var(--ground); font-size:13px; padding:10px 16px;
  border-radius:999px; box-shadow:var(--shadow); max-width:min(90vw,460px)}
.toast.bad{background:var(--hi); color:#fff}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:rise .18s ease-out}
  @keyframes rise{from{opacity:0; transform:translate(-50%,8px)}}
}
footer.foot{margin-top:40px; font-size:12px; color:var(--ink-3); line-height:1.6}