/* Pacer shared tokens + components (popup, side panel, workspace) */
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root{
  color-scheme:light;
  --bg:#FFFFFF;--hover:#E6E8EC;--rowline:#EEF0F3;--subrow:#F9FAFB;--thead:#F7F8F9;--picked:#F5F6FF;--ctxrow:#F3F4F6;--grid:#E8EAEE;--faint:#C3C7CF;--muted2:#8A92A0;--text2:#2E3440;--ring:#7A828F;--bar:#D5D8DE;--bar2:#B5BAC4;--ink-hover:#2B303B;--on-ink:#FFFFFF;--toast-act:#C7CBFF;
  --ink:#14171F;--text:#444B57;--muted:#5C6370;--line:#E3E5E9;--line2:#CDD1D8;--ground:#F1F2F4;--soft:#F4F5F7;--chip:#EEF0F3;
  --accent:#3B46D6;--accent-t:#2F3AB8;--accent-bg:#EEF0FF;--accent-line:#C7CBFF;--danger:#B42318;
  --warn-bg:#FFF1D6;--warn-fg:#8A4B00;--ok-bg:#E4F5EC;--ok-fg:#17623B;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Instrument Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0}

/* buttons */
.iconbtn{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--text)}
.iconbtn:hover,.ghost:hover{background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:600;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--on-ink)}.btn-ink:hover{background:var(--ink-hover)}
.btn-line{border:1.5px solid var(--line2);background:var(--bg)}.btn-line:hover{background:var(--soft)}
.btn-text{color:var(--accent-t);padding:0 12px}.btn-text:hover{background:var(--soft)}
.btn-danger{color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:default}

/* small parts */
.dot{flex:none;width:10px;height:10px;border-radius:3px;display:inline-block}
.dot.round{width:8px;height:8px;border-radius:50%}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}.pill.risk{background:var(--warn-bg);color:var(--warn-fg)}
.count{font-size:12px;font-weight:600;color:var(--muted);background:var(--chip);border-radius:999px;padding:1px 8px}
.grp{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
.avatar{flex:none;width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--text2);display:grid;place-items:center;font-size:11px;font-weight:700}
.progress{height:8px;border-radius:4px;background:var(--line);overflow:hidden}.progress>i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;background:var(--chip);color:var(--text2);font-size:13.5px;font-weight:600}
.over{color:var(--danger)!important}

/* status checkbox */
.chk{flex:none;width:44px;height:44px;display:grid;place-items:center}
.chk .ring{width:20px;height:20px;border-radius:50%;border:1.75px solid var(--ring)}
.chk:hover .ring{border-color:var(--ink)}
.chk .tick{width:20px;height:20px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff}

/* small checkbox (subtasks) */
.box{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;border:1.75px solid var(--ring);background:var(--bg);color:#fff}.box.on{background:var(--accent);border-color:var(--accent)}

/* priority glyph */
.prio{flex:none;display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.prio i{width:3px;border-radius:1px;background:var(--bar)}
.prio i:nth-child(1){height:5px}.prio i:nth-child(2){height:8px}.prio i:nth-child(3){height:11px}.prio i:nth-child(4){height:14px}
.prio.p1 i:nth-child(-n+1),.prio.p2 i:nth-child(-n+2),.prio.p3 i:nth-child(-n+3){background:var(--muted)}
.prio.p4 i{background:var(--danger)}

/* form fields */
.fld{width:100%;height:44px;padding:0 10px;border:1px solid var(--line2);border-radius:10px;background:var(--bg);font-size:14px}
textarea.fld{height:auto;padding:10px 12px;line-height:1.45;resize:vertical}
.lbl{display:block;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--text)}

/* toast */
.toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto;max-width:420px;padding:0 6px 0 16px;height:48px;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:14px;box-shadow:0 8px 24px rgba(20,23,31,.28)}
.toast button{height:44px;padding:0 12px;font-size:14px;font-weight:700;color:var(--toast-act)}

/* shared task row (popup + side panel) */
.trow{display:flex;align-items:center;min-height:54px;border-radius:10px;padding-right:12px}
.trow:hover{background:var(--soft)}
.trow .body{flex:1;min-width:0;padding:7px 0}
.trow .ttl{display:block;width:100%;font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .ttl.done{color:var(--muted);text-decoration:line-through}
.trow .sub{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted);white-space:nowrap}
.trow .sub b{font-weight:600}.trow .sub .t{overflow:hidden;text-overflow:ellipsis}
.trow .prio{margin-left:10px}
.trow .avatar{margin-left:10px}
.ghead{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;margin-top:6px}
.ghead .l{display:flex;align-items:center;gap:8px}
.empty{margin:24px 12px;padding:28px 18px;border:1.5px dashed var(--line2);border-radius:16px;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.5}
.empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* dark theme: same tokens, new values (chosen in Settings, or follows the system) */
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#1B1F26;--hover:#262B34;--rowline:#272C35;--subrow:#20252D;--thead:#222731;--picked:#232850;--ctxrow:#1F242B;--grid:#2B303A;--faint:#4B5260;--muted2:#8D95A3;--text2:#DDE0E6;--ring:#808997;--bar:#4A5160;--bar2:#626B7C;--ink-hover:#FFFFFF;--on-ink:#14171F;--toast-act:#3B46D6;
  --ink:#ECEEF2;--text:#B9BFCA;--muted:#9AA2AF;--line:#2D323C;--line2:#3F4551;--ground:#14171D;--soft:#252A33;--chip:#2A303A;
  --accent:#6C76F2;--accent-t:#A3AAFF;--accent-bg:#252B52;--accent-line:#4A52A0;--danger:#F2766B;
  --warn-bg:#4A3510;--warn-fg:#F5C26B;--ok-bg:#16382A;--ok-fg:#6FD3A0;
}
:root[data-theme=dark] .tlbar{filter:brightness(1.05)}
:root[data-theme=dark] img[src*="icon"]{filter:none}

/* sticky notes (shared by workspace and popup) */
.note{--nbg:#FFF1A8;--nfg:#3A3410;display:flex;flex-direction:column;background:var(--nbg);color:var(--nfg);border-radius:6px 6px 14px 6px;box-shadow:0 2px 8px rgba(20,23,31,.16);padding:6px 10px 4px 6px;min-height:170px}
.note.c-pink{--nbg:#FFD6E2;--nfg:#43202B}.note.c-blue{--nbg:#CFE6FF;--nfg:#17304A}.note.c-green{--nbg:#D2F3D9;--nfg:#17382A}.note.c-purple{--nbg:#E4D9FF;--nfg:#2F2252}.note.c-orange{--nbg:#FFE0C2;--nfg:#4A2A0E}
:root[data-theme=dark] .note{--nbg:#4A4413;--nfg:#FBF1B8;box-shadow:0 2px 8px rgba(0,0,0,.4)}
:root[data-theme=dark] .note.c-pink{--nbg:#5A2B3C;--nfg:#FFD9E4}:root[data-theme=dark] .note.c-blue{--nbg:#25415F;--nfg:#D6E9FF}:root[data-theme=dark] .note.c-green{--nbg:#25483A;--nfg:#D6F5DF}:root[data-theme=dark] .note.c-purple{--nbg:#41346A;--nfg:#E8DEFF}:root[data-theme=dark] .note.c-orange{--nbg:#5E3A1B;--nfg:#FFE3C7}
.note textarea{flex:1;display:block;width:100%;min-height:96px;margin:0;padding:4px 4px 4px 8px;resize:none;border:0;background:transparent;color:inherit;font:inherit;font-size:15px;line-height:1.45;outline:none;overflow:hidden}
.note textarea::placeholder{color:inherit;opacity:.5}
.note:focus-within{box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(20,23,31,.16)}
.note .ntop{display:flex;align-items:center;gap:0}.note .ntop .handle{color:inherit;opacity:.55}
.nbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:inherit;opacity:.7}.nbtn:hover,.nbtn.on{opacity:1;background:rgba(128,128,128,.22)}
.note .nfoot{display:flex;align-items:center;gap:0;padding-left:4px}
.nsw{width:30px;height:36px;display:grid;place-items:center}
.nsw i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.25);background:#FFE97A}
:root[data-theme=dark] .nsw i{border-color:rgba(255,255,255,.35)}
.nsw.on i{border-color:var(--nfg);box-shadow:0 0 0 2px var(--nbg),0 0 0 3.5px var(--nfg)}
.sw-pink i{background:#FF9DB9}.sw-blue i{background:#8FC3FF}.sw-green i{background:#8EDDA0}.sw-purple i{background:#BFA8FF}.sw-orange i{background:#FFB677}
.ndate{font-size:12px;opacity:.65;padding-right:4px}
.note.dropover{box-shadow:inset 0 3px 0 var(--accent),0 2px 8px rgba(20,23,31,.16)}

.chk .ring.dashed{border-style:dashed}.chk .ring.faint{border-color:var(--faint);border-width:1.5px}