/* FB-REDESIGN-LIST-0928 — Work · List (the founder's Asana pick, 28 Sep 2026). Tokens are the board's own;
   the shell's primitives (.fbr-ri .fbr-av .fbr-loz .fbr-h) come from fbr-shell.css (package 1). */
:is(#mc-board,#fsn-board) .fbl-wrap{display:grid;grid-template-columns:minmax(0,1fr) 0;transition:grid-template-columns .18s ease;min-width:0}
:is(#mc-board,#fsn-board) .fbl-wrap.open{grid-template-columns:minmax(0,1fr) 400px}
:is(#mc-board,#fsn-board) .fbl-bar{display:flex;align-items:center;gap:6px;padding:12px 24px;border-bottom:1px solid var(--ln);flex-wrap:wrap}
:is(#mc-board,#fsn-board) .fbl-bar .sp{flex:1}
:is(#mc-board,#fsn-board) .fbl-bar .bd-btn.sm{min-height:0;padding:5px 9px;font:700 12px Inter;gap:6px}
:is(#mc-board,#fsn-board) .fbl-bar .seg{display:inline-flex;gap:2px;background:var(--card2);border:1px solid var(--ln);border-radius:9px;padding:2px}
:is(#mc-board,#fsn-board) .fbl-bar .seg button{border:0;background:transparent;border-radius:7px;padding:5px 9px;font:700 11.5px/1 Inter;color:var(--fbm);cursor:pointer}
:is(#mc-board,#fsn-board) .fbl-bar .seg button.on{background:var(--card);color:var(--fbv);box-shadow:0 1px 3px rgba(34,35,58,.1)}
:is(#mc-board,#fsn-board) .fbl-hands{display:inline-flex;align-items:center;gap:6px;font:600 12px Inter;color:var(--fbm);padding:5px 9px}
:is(#mc-board,#fsn-board) .fbl-hands b{color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-tbl{min-width:0;overflow-x:auto}
:is(#mc-board,#fsn-board) .fbl-thead,:is(#mc-board,#fsn-board) .fbl-task{display:grid;grid-template-columns:minmax(260px,1fr) 150px 108px 96px 118px 70px 36px;align-items:center;min-width:0}
:is(#mc-board,#fsn-board) .fbl-thead{position:sticky;top:0;z-index:2;background:var(--card);border-bottom:1px solid var(--ln);padding:0 24px;font:600 11.5px Inter;color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-thead>span{padding:9px 8px 9px 0;border-right:1px solid var(--ln);white-space:nowrap}
:is(#mc-board,#fsn-board) .fbl-thead>span:last-child{border-right:0}
:is(#mc-board,#fsn-board) .fbl-sect{display:flex;align-items:center;gap:8px;padding:16px 24px 6px;font:700 14px Inter;color:var(--tx);cursor:pointer;user-select:none}
:is(#mc-board,#fsn-board) .fbl-sect .chev{width:14px;height:14px;color:var(--fbm);transition:transform .14s}
:is(#mc-board,#fsn-board) .fbl-sect.closed .chev{transform:rotate(-90deg)}
:is(#mc-board,#fsn-board) .fbl-sect em{font:600 11.5px Inter;font-style:normal;color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-rows{border-top:1px solid var(--ln)}
:is(#mc-board,#fsn-board) .fbl-sect.closed+.fbl-rows{display:none}
:is(#mc-board,#fsn-board) .fbl-task{padding:0 24px;border-bottom:1px solid var(--ln);cursor:pointer;min-height:38px}
:is(#mc-board,#fsn-board) .fbl-task:hover{background:var(--card2)}
:is(#mc-board,#fsn-board) .fbl-task.sel{background:var(--fbtint);box-shadow:inset 3px 0 0 var(--pur)}
:is(#mc-board,#fsn-board) .fbl-task.hide{display:none}
:is(#mc-board,#fsn-board) .fbl-task.fresh{animation:fblfresh 1.6s ease}
@keyframes fblfresh{from{background:var(--fbtint2)}to{background:transparent}}
:is(#mc-board,#fsn-board) .fbl-task>div{padding:7px 8px 7px 0;border-right:1px solid var(--ln);min-height:38px;display:flex;align-items:center;gap:8px;min-width:0;font:500 12.5px Inter;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-task>div:last-child{border-right:0;justify-content:center;padding-right:0}
:is(#mc-board,#fsn-board) .fbl-task .nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-task.done .nm{color:var(--fbm);text-decoration:line-through}
:is(#mc-board,#fsn-board) .fbl-task .meta{display:none}
:is(#mc-board,#fsn-board) .fbl-task .hand{color:var(--gold,#d6307a);display:inline-flex;align-items:center;gap:4px;font:700 10px Inter;flex:none}
:is(#mc-board,#fsn-board) .fbl-task .hand.paid{color:var(--fbok)}
:is(#mc-board,#fsn-board) .fbl-task .hand .fbr-ri{width:12px;height:12px}
:is(#mc-board,#fsn-board) .fbl-task .who{font:500 12px Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#mc-board,#fsn-board) .fbl-task .who.none{color:var(--fbm);font-style:italic}
:is(#mc-board,#fsn-board) .fbl-due{font:500 12px Inter;color:var(--tx);white-space:nowrap}
:is(#mc-board,#fsn-board) .fbl-due.soon{color:var(--fbwarn)}:is(#mc-board,#fsn-board) .fbl-due.late{color:var(--fbbad)}:is(#mc-board,#fsn-board) .fbl-due.none{color:var(--fbf)}
:is(#mc-board,#fsn-board) .fbl-pri{display:inline-flex;align-items:center;gap:5px;font:600 12px Inter;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-pri .fbr-ri{width:14px;height:14px}
:is(#mc-board,#fsn-board) .fbl-pri.urgent .fbr-ri{color:#e0452c}:is(#mc-board,#fsn-board) .fbl-pri.high .fbr-ri{color:#e0452c}:is(#mc-board,#fsn-board) .fbl-pri.normal .fbr-ri{color:#e09a1a}:is(#mc-board,#fsn-board) .fbl-pri.low .fbr-ri{color:#2b7fd6}
:is(#mc-board,#fsn-board) .fbl-chk{width:16px;height:16px;border:1.5px solid var(--ln2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;background:var(--card);color:transparent;transition:background .12s,border-color .12s}
:is(#mc-board,#fsn-board) .fbl-chk .fbr-ri{width:11px;height:11px;stroke-width:3}
:is(#mc-board,#fsn-board) .fbl-chk:hover{border-color:var(--fbok);color:var(--fbok)}
:is(#mc-board,#fsn-board) .fbl-chk.on{background:var(--fbok);border-color:var(--fbok);color:#fff}
:is(#mc-board,#fsn-board) .fbl-task .sub{font:500 11.5px Inter;color:var(--fbm);display:inline-flex;align-items:center;gap:4px}
:is(#mc-board,#fsn-board) .fbl-task .sub .fbr-ri{width:12px;height:12px}
:is(#mc-board,#fsn-board) .fbl-task .more{width:26px;height:26px;border-radius:6px;border:0;background:none;color:var(--fbm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0}
:is(#mc-board,#fsn-board) .fbl-task:hover .more,:is(#mc-board,#fsn-board) .fbl-task.sel .more{opacity:1}
:is(#mc-board,#fsn-board) .fbl-add{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 48px;border-bottom:1px solid var(--ln);font:500 12.5px Inter;color:var(--fbm);cursor:text}
:is(#mc-board,#fsn-board) .fbl-add:hover{color:var(--tx);background:var(--card2)}
:is(#mc-board,#fsn-board) .fbl-add input{flex:1;border:0;background:transparent;font:500 12.5px Inter;color:var(--tx);outline:0;min-width:0}
:is(#mc-board,#fsn-board) .fbl-add input::placeholder{color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-add .hint{font:600 10.5px Inter;color:var(--fbf)}
:is(#mc-board,#fsn-board) .fbl-wrap.open .fbl-thead,:is(#mc-board,#fsn-board) .fbl-wrap.open .fbl-task{grid-template-columns:minmax(220px,1fr) 140px 92px 110px 34px}
:is(#mc-board,#fsn-board) .fbl-wrap.open .c-pri,:is(#mc-board,#fsn-board) .fbl-wrap.open .c-sub,:is(#mc-board,#fsn-board) .fbl-wrap.open .fbl-thead>span:nth-child(4),:is(#mc-board,#fsn-board) .fbl-wrap.open .fbl-thead>span:nth-child(6){display:none}
/* the detail pane */
:is(#mc-board,#fsn-board) .fbl-pane{border-left:1px solid var(--ln);min-width:0;overflow:hidden;background:var(--card);position:sticky;top:0;align-self:start;max-height:calc(100vh - 60px);overflow-y:auto}
:is(#mc-board,#fsn-board) .fbl-wrap:not(.open) .fbl-pane{display:none}
:is(#mc-board,#fsn-board) .fbl-pane .top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--ln);position:sticky;top:0;background:var(--card);z-index:2}
:is(#mc-board,#fsn-board) .fbl-pane .top .sp{flex:1}
:is(#mc-board,#fsn-board) .fbl-pane .top .bd-btn.sm{min-height:0;padding:5px 9px;font:700 12px Inter;gap:6px}
:is(#mc-board,#fsn-board) .fbl-pane .top .ic{width:30px;height:30px;border:0;background:none;color:var(--fbm);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
:is(#mc-board,#fsn-board) .fbl-pane .top .ic:hover{background:var(--card2);color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-pane .top .ic.mine{color:var(--gold,#d6307a)}
:is(#mc-board,#fsn-board) .fbl-pane .ttl{padding:16px 18px 6px;font:700 18px/1.25 Sora,Inter,sans-serif;letter-spacing:-.01em;outline:0;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-pane .ttl:focus{box-shadow:inset 0 0 0 2px rgba(97,93,250,.35);border-radius:6px}
:is(#mc-board,#fsn-board) .fbl-pane .flds{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 10px;padding:8px 18px 14px;align-items:center}
:is(#mc-board,#fsn-board) .fbl-pane .flds label{font:600 11.5px Inter;color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-pane .flds .v{display:flex;align-items:center;gap:8px;font:500 12.5px Inter;min-height:28px;padding:2px 6px;margin-left:-6px;border-radius:6px;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-pane .flds select,:is(#mc-board,#fsn-board) .fbl-pane .flds input[type=date]{font:500 12.5px Inter;color:var(--tx);background:var(--card);border:1px solid var(--ln2);border-radius:7px;padding:5px 8px;min-width:0;max-width:100%}
:is(#mc-board,#fsn-board) .fbl-pane .sec{padding:12px 18px;border-top:1px solid var(--ln)}
:is(#mc-board,#fsn-board) .fbl-pane .sec h4{margin:0 0 8px;font:700 11px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--fbm);display:flex;align-items:center;gap:8px}
:is(#mc-board,#fsn-board) .fbl-pane .sec h4 .sp{flex:1}
:is(#mc-board,#fsn-board) .fbl-pane .sec h4 small{font:500 11px Inter;letter-spacing:0;text-transform:none;color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-pane .desc{font:500 13px/1.55 Inter;color:var(--tx);margin:0;min-height:22px;outline:0;border-radius:6px;white-space:pre-wrap}
:is(#mc-board,#fsn-board) .fbl-pane .desc:empty::before{content:attr(data-ph);color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-pane .desc:focus{box-shadow:inset 0 0 0 2px rgba(97,93,250,.35);padding:4px}
:is(#mc-board,#fsn-board) .fbl-pane .subs a{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--ln);font:500 12.5px Inter;color:var(--tx);text-decoration:none}
:is(#mc-board,#fsn-board) .fbl-pane .subs a.done span{color:var(--fbm);text-decoration:line-through}
:is(#mc-board,#fsn-board) .fbl-pane .subs .add{display:flex;align-items:center;gap:8px;padding:8px 0;color:var(--fbm);font:600 12px Inter}
:is(#mc-board,#fsn-board) .fbl-pane .subs .add input{flex:1;border:0;background:transparent;font:500 12.5px Inter;color:var(--tx);outline:0;min-width:0}
:is(#mc-board,#fsn-board) .fbl-pane .cmt{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;padding:8px 0}
:is(#mc-board,#fsn-board) .fbl-pane .cmt .fbr-av{grid-row:span 3}
:is(#mc-board,#fsn-board) .fbl-pane .cmt b{font:600 12.5px Inter;display:flex;align-items:center;gap:6px;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-pane .cmt b small{font:500 11px Inter;color:var(--fbm)}
:is(#mc-board,#fsn-board) .fbl-pane .cmt p{margin:0;font:500 12.5px/1.5 Inter;color:var(--tx);white-space:pre-wrap}
:is(#mc-board,#fsn-board) .fbl-pane .cmt.sys p{color:var(--fbm);font-style:italic}
:is(#mc-board,#fsn-board) .fbl-pane .comp{display:flex;gap:8px;align-items:flex-end;padding-top:8px}
:is(#mc-board,#fsn-board) .fbl-pane .comp textarea{flex:1;resize:none;min-height:38px;font:500 12.5px Inter;border:1px solid var(--ln2);border-radius:9px;padding:9px 11px;background:var(--card);color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-pane .comp .bd-btn.sm{min-height:0;padding:7px 11px;font:700 12px Inter}
:is(#mc-board,#fsn-board) .fbl-sugg{margin-top:6px;border:1px solid rgba(97,93,250,.3);border-left:3px solid var(--pur);border-radius:var(--fbr);padding:9px 11px;background:var(--fbtint)}
:is(#mc-board,#fsn-board) .fbl-sugg .k{font:800 9.5px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--fbv);display:flex;align-items:center;gap:6px;margin-bottom:5px}
:is(#mc-board,#fsn-board) .fbl-sugg .k .fbr-ri{width:12px;height:12px}
:is(#mc-board,#fsn-board) .fbl-sugg p{margin:0 0 8px;font:500 12.5px/1.45 Inter;color:var(--tx)}
:is(#mc-board,#fsn-board) .fbl-sugg .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
:is(#mc-board,#fsn-board) .fbl-sugg .acts .bd-btn.sm{min-height:0;padding:5px 9px;font:700 12px Inter}
:is(#mc-board,#fsn-board) .fbl-sugg .acts small{font:500 11px Inter;color:var(--fbm);margin-left:auto}
:is(#mc-board,#fsn-board) .fbl-sugg.ok{border-color:rgba(13,129,40,.35);border-left-color:var(--fbok);background:var(--fboks)}
:is(#mc-board,#fsn-board) .fbl-sugg.ok .k{color:var(--fbok)}
:is(#mc-board,#fsn-board) .fbl-sugg.no{opacity:.6}
:is(#mc-board,#fsn-board) .fbl-suggstrip{padding:10px 24px 0}
:is(#mc-board,#fsn-board) .fbl-empty{padding:24px;color:var(--fbm);font:500 12.5px Inter}
@media(max-width:820px){
  :is(#mc-board,#fsn-board) .fbl-bar{padding:10px 14px}
  :is(#mc-board,#fsn-board) .fbl-wrap.open{grid-template-columns:minmax(0,1fr)}
  :is(#mc-board,#fsn-board) .fbl-pane{position:fixed;inset:auto 0 0 0;height:88vh;max-height:none;z-index:1300;border-left:0;border-top:1px solid var(--ln);border-radius:16px 16px 0 0;box-shadow:0 -14px 40px rgba(34,35,58,.26)}
  :is(#mc-board,#fsn-board) .fbl-thead{display:none}
  :is(#mc-board,#fsn-board) .fbl-wrap .fbl-task,:is(#mc-board,#fsn-board) .fbl-wrap.open .fbl-task{grid-template-columns:minmax(0,1fr) auto 28px;padding:0 14px;min-height:0}
  :is(#mc-board,#fsn-board) .fbl-wrap.open .c-st{display:flex}
  :is(#mc-board,#fsn-board) .fbl-task>div{border-right:0;min-height:0;padding:9px 6px 9px 0}
  :is(#mc-board,#fsn-board) .fbl-task>div.c-who,:is(#mc-board,#fsn-board) .fbl-task>div.c-due,:is(#mc-board,#fsn-board) .fbl-task>div.c-pri,:is(#mc-board,#fsn-board) .fbl-task>div.c-sub{display:none}
  :is(#mc-board,#fsn-board) .fbl-task>div.c-nm{flex-wrap:wrap}
  :is(#mc-board,#fsn-board) .fbl-task .nm{white-space:normal;flex:1 1 100%}
  :is(#mc-board,#fsn-board) .fbl-task .meta{display:flex;gap:8px;align-items:center;font:500 11px Inter;color:var(--fbm);flex:1 1 100%}
  :is(#mc-board,#fsn-board) .fbl-task>div.c-st .fbr-loz{font-size:9px;padding:1px 4px}
  :is(#mc-board,#fsn-board) .fbl-sect{padding:14px 14px 6px}
  :is(#mc-board,#fsn-board) .fbl-add{padding:8px 14px 8px 40px}
  :is(#mc-board,#fsn-board) .fbl-task .more{opacity:1}
}
