/* Checkpoint — calm, dense, fast. Dark by default with a light option.
   No external fonts or CDNs, so the CSP stays strict and pages load instantly. */

:root{
  --bg:#0e1116; --panel:#151a21; --panel-2:#1b222b; --panel-3:#222b36;
  --line:#232c37; --line-2:#313d4b;
  --txt:#c9d2dc; --txt-strong:#eef2f7; --muted:#7d8894; --muted-2:#5d6773;
  --accent:#4c8dff; --accent-glow:rgba(76,141,255,.14); --accent-ink:#04122b;
  --done:#2ea043; --warn:#d29922; --danger:#e5484d;
  --p-high:#e5484d; --p-med:#d29922; --p-low:#5d6773;
  /* Sidebar groups sit in a recess: a shade below the sidebar itself, with the
     group's own heading a shade below that. Two steps is enough to read as
     "inside a container" without turning the sidebar into a stack of boxes. */
  --cat-bg:#0b0e13; --cat-head:#070a0e; --side-rail:#0c0f14;
  /* Small metadata (the % on a project row) needs more than label grey to stay
     legible at 10px against the darker group panel. */
  --meta:#8f9aa7;
  --radius:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#fff; --panel-2:#f7f9fb; --panel-3:#eef2f6;
  --line:#e2e8ef; --line-2:#cbd5e0;
  --txt:#3d4753; --txt-strong:#131922; --muted:#6b7684; --muted-2:#8b95a2;
  --accent:#1f6feb; --accent-glow:rgba(31,111,235,.10); --accent-ink:#fff;
  /* Light theme goes the same direction — a step down from white, not literally
     dark, or the sidebar would look like a hole in the page. */
  --cat-bg:#e7ebf1; --cat-head:#dce2ea; --side-rail:#f3f5f9;
  --meta:#586472;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none}
.hidden{display:none!important}
.mono{font-family:var(--mono)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.btn{background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{padding:5px 11px;font-size:12px}
.btn.block{width:100%}
.linkish{color:var(--accent);font-size:12.5px}
.input,select.input,textarea.input{
  width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;
  color:var(--txt-strong);padding:9px 11px;font-family:inherit;font-size:13.5px;outline:none
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
textarea.input{resize:vertical;min-height:80px;line-height:1.6}
.field{margin-bottom:11px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:4px}
.msg{min-height:18px;font-size:12.5px;margin:6px 0}
.msg.err{color:var(--danger)} .msg.ok{color:var(--done)}

/* ── gate ── */
.gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:var(--bg)}
.gate-card{width:100%;max-width:370px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
.brand-row{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.logo-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.logo-text{font-weight:700;font-size:16px;color:var(--txt-strong);letter-spacing:-.2px}
.gate-sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.gate-alt{text-align:center;margin-top:12px;font-size:12.5px;color:var(--muted)}
.gate-alt a{cursor:pointer;text-decoration:underline}

/* ── frame ── */
/* --side-w is set by the drag handle and remembered per device. */
.app{--side-w:224px;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
/* A faint vertical wash makes the sidebar sit behind the board rather than
   beside it, and the rail down its edge gives the column an actual end. */
.side{background:linear-gradient(180deg,var(--panel) 0%,var(--side-rail) 100%);
  border-right:1px solid var(--line-2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.side::-webkit-scrollbar{width:9px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:20px;
  border:3px solid transparent;background-clip:content-box}
.side::-webkit-scrollbar-thumb:hover{background:var(--muted-2);background-clip:content-box}
/* Both classes sit on the same button and .icon-btn is declared later, so this
   needs the extra class to win the cascade. */
.icon-btn.nav-btn{display:none}   /* desktop keeps the sidebar pinned open */
.side-scrim{display:none}
.side-brand{padding:15px 16px;border-bottom:1px solid var(--line);margin:0;
  background:var(--panel);position:sticky;top:0;z-index:2}
/* Section headings carry a hairline out to the edge, so Projects / Notes / Inbox
   read as separate territory without needing more chrome. */
.side-label{display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;
  letter-spacing:1.3px;color:var(--muted-2);padding:15px 16px 7px;font-weight:600}
.side-label::after{content:"";flex:1;height:1px;background:var(--line);min-width:10px}
.side-label-row::after{display:none}     /* that row already ends in the filter */

/* Body text, not label grey: these are project and note names, and once they sit
   on the darker group panel the old muted grey dropped under AA in light theme.
   Hierarchy still comes from weight and the accent on the active row. */
.side-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 16px;
  color:var(--txt);font-size:13px;border-radius:0;transition:background .13s,color .13s}
.side-item:hover{background:var(--panel-2);color:var(--txt-strong)}
.side-item.active{color:var(--accent);background:var(--accent-glow);box-shadow:inset 2px 0 0 var(--accent);font-weight:600}
.side-item .pct{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--meta)}
.side-item.active .pct{color:var(--accent)}
.side-add{width:100%;text-align:left;padding:8px 16px;color:var(--accent);font-size:12.5px;
  transition:background .13s}
.side-add:hover{background:var(--accent-glow)}
.side-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--line);background:var(--panel)}
.who{font-size:11.5px;color:var(--muted-2);margin-top:8px;word-break:break-all}

.main-col{display:flex;flex-direction:column;min-width:0}
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.crumb{font-weight:600;color:var(--txt-strong)}
.spacer{margin-left:auto}
.icon-btn{position:relative;width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--muted);font-size:14px}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.pip{position:absolute;top:4px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
.main{padding:18px;min-width:0}

/* ── project header ── */
.proj-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.proj-title{font-size:19px;font-weight:700;color:var(--txt-strong)}
.proj-desc{font-size:13px;color:var(--muted);margin-top:3px;max-width:62ch}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 12px;min-width:78px}
.stat .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted-2)}
.stat .v{font-family:var(--mono);font-size:16px;color:var(--txt-strong);margin-top:1px}
.stat .v.warn{color:var(--warn)} .stat .v.bad{color:var(--danger)} .stat .v.good{color:var(--done)}
.progress{height:6px;border-radius:4px;background:var(--panel-3);overflow:hidden;margin-top:8px;width:100%}
.progress span{display:block;height:100%;background:var(--done);transition:width .35s ease}

/* ── toolbar ── */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .input{width:auto;min-width:150px;padding:7px 10px;font-size:12.5px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{padding:7px 13px;font-size:12.5px;color:var(--muted)}
.seg button.active{background:var(--accent-glow);color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--line-2);color:var(--muted)}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* ── board ── */
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.col{flex:0 0 268px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;max-height:calc(100vh - 210px)}
.col-head{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--line)}
.col-name{font-size:12px;font-weight:600;color:var(--txt-strong);text-transform:uppercase;letter-spacing:.6px}
.col-count{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.col-add{margin-left:auto;color:var(--muted);font-size:16px;line-height:1}
.col-add:hover{color:var(--accent)}
.col-body{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:60px}
.col.drag-over{border-color:var(--accent)}
.col.drag-over .col-body{background:var(--accent-glow)}

.card{background:var(--panel-2);border:1px solid var(--line);border-left-width:3px;border-radius:8px;padding:9px 10px;cursor:grab}
.card:hover{border-color:var(--line-2)}
.card.dragging{opacity:.45}
.card.p-high{border-left-color:var(--p-high)}
.card.p-medium{border-left-color:var(--p-med)}
.card.p-low{border-left-color:var(--p-low)}
.card-top{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.card-ref{font-family:var(--mono);font-size:10px;color:var(--muted-2)}
.card-type{font-size:10px;padding:0 5px;border-radius:4px;border:1px solid var(--line-2);color:var(--muted)}
.card-type.bug{color:var(--danger);border-color:var(--danger)}
.card-title{font-size:13px;color:var(--txt-strong);line-height:1.4}
.card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;font-size:11px;color:var(--muted)}
.labels{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.label{font-size:10px;padding:1px 7px;border-radius:20px;color:#fff;white-space:nowrap}
.due{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--panel-3)}
.due.over{background:rgba(229,72,77,.16);color:var(--danger)}
.due.today{background:rgba(210,153,34,.16);color:var(--warn)}
.avatar{width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:9.5px;font-weight:700}
.avatar.none{background:var(--panel-3);color:var(--muted-2)}

/* ── list view ── */
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted-2);
  font-weight:500;padding:9px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--panel-2)}

/* ── drawer ── */
.drawer{position:fixed;inset:0;z-index:200;background:rgba(4,7,11,.55);display:flex;justify-content:flex-end}
.drawer-panel{width:min(660px,100%);background:var(--bg);border-left:1px solid var(--line);
  height:100%;overflow-y:auto;padding:20px}
.d-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.d-title{font-size:17px;font-weight:700;color:var(--txt-strong);line-height:1.35;flex:1}
.d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.d-sec{margin-top:20px}
.d-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2);margin-bottom:8px}
.check-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.check-row.done span{text-decoration:line-through;color:var(--muted-2)}

/* ── task checklist ─────────────────────────────────────────────────────────
   Ticking a step brightens it and leaving it unticked reads dim — the opposite
   way round from crossing things out. What is done is what you want to see, and
   a struck-through line is harder to read at exactly the moment it becomes the
   record of what happened. Scoped to #t-check so it beats the strikethrough rule
   above without disturbing the other .check-row users. */
#t-check .check-row span{color:var(--muted);transition:color .15s ease}
#t-check .check-row.done span{color:var(--txt-strong);text-decoration:none}
#t-check .check-row input[type=checkbox]{accent-color:var(--accent);flex:0 0 auto}
.comment{border-top:1px solid var(--line);padding:10px 0}
.comment.reply{margin-left:26px;border-left:2px solid var(--line);padding-left:10px;border-top:none}
.c-head{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:3px}
.c-body{font-size:13.5px;color:var(--txt);white-space:pre-wrap;word-wrap:break-word}
.c-body .mention{color:var(--accent);font-weight:600}
.file-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;border-top:1px solid var(--line)}

/* ── modal, notifications, misc ── */
.modal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:20px;background:rgba(4,7,11,.6)}
.modal-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:22px;max-height:86vh;overflow-y:auto}
.modal-card h3{font-size:15px;color:var(--txt-strong);margin-bottom:12px}
.notif{position:absolute;right:16px;top:52px;z-index:70;width:min(340px,92vw);background:var(--panel);
  border:1px solid var(--line-2);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.45);overflow:hidden}
.notif-item{padding:10px 13px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:var(--accent-glow)}
.notif-item .t{font-size:10.5px;color:var(--muted-2);margin-top:2px}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state .big{font-size:34px;opacity:.35;margin-bottom:10px}
.empty-state h2{font-size:17px;color:var(--txt-strong);margin-bottom:6px}
.empty-state p{margin-bottom:14px;font-size:13px}
.muted{color:var(--muted)} .small{font-size:12px}
.act-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.act-row:last-child{border-bottom:none}
.act-row b{color:var(--txt-strong);font-weight:600}
.inbox-item{padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.inbox-item .row{display:flex;gap:6px;margin-top:5px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card-move{margin-left:auto;color:var(--muted);font-size:15px;line-height:1;padding:2px 6px;border-radius:6px}
.card-move:hover{color:var(--accent);background:var(--panel-3)}

/* ── priority, roles, sidebar rows, assignee pickers ── */
.prio{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:20px;
  border:1px solid currentColor;font-weight:600;vertical-align:middle;white-space:nowrap}
.prio-high{color:var(--p-high)} .prio-medium{color:var(--p-med)} .prio-low{color:var(--muted-2)}
.role-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:20px;
  border:1px solid var(--line-2);color:var(--muted);vertical-align:middle}

.side-row{display:flex;align-items:center}
.side-row.dragging{opacity:.4}
.side-row .side-item{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.side-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grip{width:14px;flex:0 0 auto;text-align:center;color:var(--muted-2);font-size:9px;line-height:1;
  cursor:grab;letter-spacing:-2px;user-select:none}
.grip.blank{cursor:default}
.side-row:hover .grip{color:var(--muted)}
.side-menu{flex:0 0 auto;padding:0 10px 0 4px;color:var(--muted-2);font-size:15px;line-height:1}
.side-menu:hover{color:var(--accent)}

/* ── sidebar groups, filter and change flags ──────────────────────────────
   A category folds away like a disclosure; anything unread inside it keeps
   shouting through the fold, so closing a group never hides news.

   Each group is a recessed panel a shade darker than the sidebar, so a long list
   of projects reads as a few labelled areas instead of one undifferentiated
   column. The heading is darker again and sticks to the top of its group while
   you scroll past it. */
.side-label-row{display:flex;align-items:center;gap:8px}
.side-filter{margin-left:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  color:var(--muted);font:inherit;font-size:10.5px;text-transform:none;letter-spacing:0;padding:2px 5px;
  max-width:112px;cursor:pointer;transition:border-color .15s,color .15s}
.side-filter:hover{color:var(--txt-strong);border-color:var(--line-2)}
.side-filter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

.cat-group{margin:0 8px 7px;background:var(--cat-bg);border:1px solid var(--line);
  border-radius:9px;overflow:hidden}
.cat-head{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:7px 11px;
  background:var(--cat-head);border-bottom:1px solid var(--line);
  color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  position:sticky;top:0;z-index:1;transition:color .15s}
.cat-head:hover{color:var(--txt-strong)}
.cat-head:hover .cat-name{color:var(--txt-strong)}
.cat-head .caret{font-size:9px;transition:transform .18s ease;flex:0 0 auto;opacity:.75}
/* The group name and its count are small and uppercase, so both are a step
   stronger than the surrounding label grey to stay legible at 10px. */
.cat-head .cat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
  color:var(--txt);transition:color .15s}
.cat-head .cat-count{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);
  letter-spacing:0;text-transform:none;background:var(--panel);border:1px solid var(--line-2);
  border-radius:20px;padding:0 6px;min-width:20px;text-align:center}
.cat-group.closed .caret{transform:rotate(-90deg)}
.cat-group.closed .cat-head{border-bottom:none}
.cat-group.closed .cat-body{display:none}
.cat-body{padding:4px 0}
/* Rows inside a group are inset from the group's own edge, not the sidebar's. */
.cat-body .side-item{padding-left:8px;padding-right:9px;border-radius:6px}
.cat-body .side-row{padding:0 5px}
.cat-body .side-item.active{box-shadow:inset 2px 0 0 var(--accent)}
.cat-body .grip{width:11px}

/* ── archive ────────────────────────────────────────────────────────────────
   Finished projects fold away above "+ New project": present enough to restore
   from, quiet enough to ignore. */
.archive-toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.9px;font-weight:600}
.archive-toggle:hover{color:var(--txt-strong);background:var(--panel-2)}
.archive-toggle .caret{font-size:9px;opacity:.75;transition:transform .18s ease;transform:rotate(-90deg)}
.archive-toggle.open .caret{transform:none}
.archive-toggle .arch-count{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:0;
  color:var(--meta);background:var(--panel);border:1px solid var(--line-2);border-radius:20px;
  padding:0 6px;min-width:20px;text-align:center}

#archive-list{background:var(--cat-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:3px 0}
.arch-row .side-item{color:var(--muted)}
.arch-row .side-item:hover{color:var(--txt-strong)}
.arch-row .side-name{text-decoration:none}
.arch-row .side-menu{font-size:13px}
.arch-row .side-menu:hover{color:var(--done)}

/* Reads as a state, not a priority — so it borrows the neutral role-tag look. */
.arch-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:20px;
  border:1px solid var(--line-2);color:var(--muted);vertical-align:middle;background:var(--panel)}

/* The offer that appears on Done once a board is finished. */
.col-archive{margin-left:auto;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--done);border:1px solid var(--done);border-radius:20px;padding:1px 8px;line-height:1.5;
  transition:background .13s,color .13s}
.col-archive:hover{background:var(--done);color:var(--accent-ink)}
.col-head .col-add+.col-archive{margin-left:6px}

/* Unseen work by somebody else: the row, and its group heading, go bold. */
.side-item.changed{font-weight:700;color:var(--txt-strong)}
.side-item.changed .pct{color:var(--muted)}
.cat-head.changed,.side-label.changed{font-weight:800;color:var(--txt-strong);opacity:1}
.cat-head.changed .cat-count{color:var(--accent)}
.note-new{color:var(--accent);font-size:8px;line-height:1;flex:0 0 auto}

/* ── project waiting on a review ──────────────────────────────────────────
   A red bar down the row, a red name and a count. Purely additive: the moment
   the last task leaves Review the row is exactly as it was, keeping its selected
   state and priority tag underneath. The count also rolls up onto the category
   heading, so folding a group away cannot hide a project that needs looking at. */
.side-row.in-review{background:rgba(229,72,77,.10);box-shadow:inset 3px 0 0 var(--danger)}
.side-row.in-review .side-name{color:var(--danger);font-weight:600}
.side-row.in-review .side-item:hover .side-name{color:var(--danger);filter:brightness(1.15)}
/* The selected project keeps its tint; the review bar wins on the edge. */
.side-row.in-review .side-item.active{box-shadow:none}
.review-flag{flex:0 0 auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;
  text-align:center;font-family:var(--mono)}
.cat-head .review-flag{margin-left:auto}
.cat-head .review-flag+.cat-count{margin-left:6px}

/* Live or fallen over — a dot in the sidebar, a word in the header. */
.site-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted-2)}
.site-dot.live{background:var(--done)}
.site-dot.down{background:var(--danger)}
.site-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:20px;
  border:1px solid currentColor;font-weight:600;vertical-align:middle}
.site-tag.live{color:var(--done)} .site-tag.down{color:var(--danger)}

/* Drag handle on the sidebar's edge. It sits in the gutter rather than taking a
   grid column, so widening the sidebar never nudges the board sideways. The hit
   area is deliberately wider than the line it draws. */
.side-resizer{position:fixed;top:0;left:var(--side-w);width:9px;height:100vh;z-index:130;
  margin-left:-4px;cursor:col-resize;touch-action:none}
.side-resizer::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:3px;
  background:transparent;transition:background .15s ease}
.side-resizer:hover::after,.side-resizer.dragging::after,.side-resizer:focus-visible::after{background:var(--accent)}
.side-resizer:focus-visible{outline:none}
/* While dragging, the whole page keeps the resize cursor and stops selecting text. */
body.resizing{cursor:col-resize;user-select:none}

/* Overlapping faces for a shared task. */
.stack{display:inline-flex;align-items:center}
.stack .avatar{margin-right:-5px;border:1.5px solid var(--panel-2)}
.stack .avatar:last-child{margin-right:0}
.avatar.more{background:var(--panel-3);color:var(--muted)}

.picker{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;
  border:1px solid var(--line-2);border-radius:8px;padding:6px}
.pick{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:13px}
.pick:hover{background:var(--panel-2)}
.pick.on{background:var(--accent-glow)}
.pick input{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
.sm-select{width:auto;padding:3px 6px;font-size:12px}

/* ── notes ──────────────────────────────────────────────────────────────────
   One list for everything you can reach. A "Shared" oval carries what a separate
   "Shared with me" heading used to, and each note you own has its own ⋯ for
   renaming, pinning, sharing and deleting. */
.note-row{display:flex;align-items:center}
.note-row .side-item{flex:1;min-width:0}
.note-item{gap:6px}
.note-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-pin{color:var(--warn);font-size:10px;flex:0 0 auto}
.note-pill{margin-left:auto;flex:0 0 auto;font-size:9.5px;letter-spacing:.4px;padding:1px 7px;
  border-radius:20px;border:1px solid var(--line-2);color:var(--muted-2);white-space:nowrap}
/* Shared *with* you reads as an arrival, so it borrows the accent. */
.note-pill.in{border-color:var(--accent);color:var(--accent)}
.side-menu.blank{cursor:default}

/* One row per person, each carrying its own "can edit" tick. */
.share-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.share-row:last-of-type{border-bottom:none}
.share-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-strong)}
.share-edit{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;color:var(--muted)}
.share-edit:hover{color:var(--accent)}
.share-edit input{cursor:pointer;accent-color:var(--accent);width:15px;height:15px}
.share-row .linkish{color:var(--muted-2);font-size:13px;padding:0 2px}
.share-row .linkish:hover{color:var(--danger)}
.share-add{display:flex;gap:6px;margin-top:10px}
@media(max-width:860px){
  .share-edit input{width:20px;height:20px}   /* comfortable to tap */
  .share-row{padding:9px 0}
}

/* ── renditions ── */
.notice{background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--warn);
  border-radius:8px;padding:10px 13px;font-size:12.5px;color:var(--muted);margin-bottom:14px}

.rend-drop{border:1.5px dashed var(--line-2);border-radius:var(--radius);background:var(--panel);
  padding:20px;text-align:center;margin-bottom:16px;transition:border-color .15s,background .15s}
.rend-drop.over{border-color:var(--accent);background:var(--accent-glow)}
.rend-drop.busy{opacity:.6;pointer-events:none}
.rend-drop .big{font-size:26px;opacity:.5}
.rend-drop b{display:block;color:var(--txt-strong);font-size:13.5px;margin:4px 0 2px}
.rend-drop p{max-width:46ch;margin:0 auto}

.rend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rend-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.rend-card:hover{border-color:var(--line-2)}
.rend-head{display:flex;align-items:center;gap:6px}
.rend-name{font-size:14px;font-weight:600;color:var(--txt-strong);line-height:1.35}
.rend-actions{display:flex;align-items:center;gap:8px;margin-top:6px}

.rend-status{font-size:10px;text-transform:uppercase;letter-spacing:.7px;padding:2px 8px;
  border-radius:20px;border:1px solid var(--line-2);color:var(--muted)}
.rend-status.approved{color:var(--done);border-color:var(--done)}
.rend-status.rejected{color:var(--danger);border-color:var(--danger)}
.rend-status.pending{color:var(--warn);border-color:var(--warn)}

.rend-banner{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--muted-2)}
.rend-banner.approved{border-left-color:var(--done)} .rend-banner.approved b{color:var(--done)}
.rend-banner.rejected{border-left-color:var(--danger)} .rend-banner.rejected b{color:var(--danger)}
.rend-banner.pending{border-left-color:var(--warn)} .rend-banner.pending b{color:var(--warn)}
.rend-banner .small{color:var(--muted);margin-left:auto}

/* Open the preview, or take a copy away with you. */
.rend-open-row{display:flex;gap:8px;align-items:stretch;margin:14px 0 0}
.rend-open-row .btn.block{flex:1}
.rend-open-row a.btn{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}

.rend-decide{display:flex;gap:8px;flex-wrap:wrap}
.rend-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:20px}
.rend-tag.approved{color:var(--done);border:1px solid var(--done)}
.rend-tag.rejected{color:var(--danger);border:1px solid var(--danger)}

/* Live status: a quiet green pulse, amber once polling starts failing. */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--done);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(46,160,67,.5);animation:live-pulse 2.6s ease-out infinite}
.live-dot.off{background:var(--warn);animation:none}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,160,67,.45)}
  70%{box-shadow:0 0 0 6px rgba(46,160,67,0)}
  100%{box-shadow:0 0 0 0 rgba(46,160,67,0)}
}
/* Something changed under you — show which card, briefly. */
.card.just-changed{animation:card-flash 2s ease-out}
@keyframes card-flash{
  0%{border-color:var(--accent);background:var(--accent-glow)}
  100%{border-color:var(--line);background:var(--panel-2)}
}
@media(prefers-reduced-motion:reduce){
  .live-dot,.card.just-changed{animation:none}
}

#toast{position:fixed;z-index:500;left:50%;transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));max-width:min(420px,92vw);
  background:var(--panel-3);color:var(--txt-strong);border:1px solid var(--line-2);
  border-radius:10px;padding:10px 15px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
#toast.toast{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{border-color:var(--danger);color:var(--danger)}

/* A card being dragged by finger or mouse follows the pointer; the gap it came
   from is held open by a placeholder so the board doesn't jump around. */
.card.drag-ghost{position:fixed;z-index:400;pointer-events:none;width:var(--ghost-w);
  box-shadow:0 12px 30px rgba(0,0,0,.45);transform:rotate(1.5deg);opacity:.95;cursor:grabbing}
.drop-slot{border:1px dashed var(--accent);border-radius:8px;background:var(--accent-glow);flex:0 0 auto}

/* ── small screens ─────────────────────────────────────────────────────────
   The sidebar slides over the content instead of vanishing — on a phone it is
   the only route to project switching, the inbox and invites. */
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .icon-btn.nav-btn{display:grid}
  .side{position:fixed;top:0;left:0;z-index:120;width:min(280px,82vw);
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom)}
  .app.nav-open .side{transform:none}
  /* Resizing is a desktop affordance: here the sidebar is a fixed-width
     slide-over, and a thin drag handle beside a scrolling board is a menace. */
  .side-resizer{display:none}

  /* The scrim is shown by the open state, never by `display:block` alone.
     An author `display:block` outranks the browser's own [hidden] rule, so a
     bare `.side-scrim{display:block}` here left the overlay painted over the
     whole app — dimming everything and swallowing every tap — even with the
     hidden attribute set and the drawer shut. */
  .side-scrim{position:fixed;inset:0;z-index:110;background:rgba(4,7,11,.5)}
  .app.nav-open .side-scrim{display:block}

  .top{padding:0 10px;gap:7px;padding-top:env(safe-area-inset-top);height:calc(50px + env(safe-area-inset-top))}
  .crumb{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main{padding:12px 12px calc(20px + env(safe-area-inset-bottom))}

  .proj-head{gap:10px}
  .proj-title{font-size:17px}
  .stats{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .stat{min-width:0;padding:6px 8px;text-align:center}
  .stat .v{font-size:14px}

  /* Filters scroll sideways as one row rather than stacking into a tall wall. */
  .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar>*{flex:0 0 auto}
  .toolbar .input{min-width:132px}
  .toolbar .spacer{margin-left:4px}

  /* One column fills the screen and snaps, so the board reads like pages. */
  .board{scroll-snap-type:x mandatory;gap:10px}
  .col{flex:0 0 86vw;scroll-snap-align:start;max-height:none}
  .col-body{max-height:calc(100vh - 300px)}

  .card{padding:11px 12px}
  .card-title{font-size:14px}

  .rend-grid{grid-template-columns:1fr}
  .rend-decide .btn{flex:1}
  .drawer-panel{width:100%;border-left:none;padding:16px 14px calc(24px + env(safe-area-inset-bottom))}
  .d-grid{grid-template-columns:1fr 1fr}
  .modal{padding:12px;place-items:end center}
  .modal-card{max-height:90vh;border-radius:14px 14px 0 0;padding:18px}
  .notif{right:8px;left:8px;width:auto}
  .comment.reply{margin-left:12px}

  /* Touch targets: 16px inputs stop iOS from zooming on focus. */
  .input,select.input,textarea.input{font-size:16px;padding:10px 12px}
  .btn{padding:10px 16px}
  .btn.sm{padding:8px 12px}
  .icon-btn{width:36px;height:36px}
  .side-item{padding:11px 16px;font-size:14px}
  .linkish{font-size:13.5px}
  .chip{padding:5px 11px;font-size:12px}
  .tbl th,.tbl td{padding:10px 10px;white-space:nowrap}
}
@media(max-width:420px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .col{flex:0 0 92vw}
}
/* A pointer that can't hover is a finger: don't hide actions behind :hover. */
@media(hover:none){
  .card{cursor:pointer}
  .card-meta{margin-top:8px}
}

/* ── sign-in with Google / Microsoft ─────────────────────────────────────── */
.oauth-row { display: grid; gap: 8px; margin: 4px 0 6px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 44px; border-radius: 10px; border: 1px solid var(--line, #2a313b); background: var(--panel, transparent);
  color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.oauth-btn:hover { border-color: var(--accent, #2ec4b6); }
.oauth-btn svg { width: 18px; height: 18px; flex: none; }
.or-rule { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; color: var(--muted, #8a94a3); font-size: 12px; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line, #2a313b); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.badge-ok { color: var(--ok, #3ecf8e); font-size: 12px; }
.invite-note { border-left: 3px solid var(--accent, #2ec4b6); padding: 8px 10px; margin: 8px 0; font-size: 13px; }