@panphora/bevel 0.1.0

package/examples/components/reference/fable/as-authored/kanban-completed.css

@@ -0,0 +1,235 @@
+/* kanban.css — Fable's independent Kanban board. Four open lanes drawn on
+   the ground with a ruled top edge instead of lane containers, dense sans
+   cards, the blocking dependency shown on both ends, an aggregate tape, a
+   filter bar and a task panel that pushes the board into a scrollable strip.
+   Loads after fable.css. Every colour is a Bevel token. */
+
+/* ------------------------------ frame ------------------------------ */
+.kb{--kb-lane:248px;--kb-gap:18px;padding:26px 32px 24px;min-height:580px;font-size:13.5px;line-height:1.45;color:var(--bevel-ink);background:var(--bevel-ground)}
+.kb svg{flex-shrink:0}
+.kb h1,.kb h2,.kb h3,.kb h4,.kb p{margin:0}
+.kb .kb-people{display:inline-flex}
+.kb .kb-people .f-avatar{box-shadow:0 0 0 2px var(--bevel-ground)}
+.kb .kb-people .f-avatar+.f-avatar{margin-left:-7px}
+.kb-spacer{flex:1}
+.kb-icon{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;background:none;color:var(--bevel-muted);cursor:pointer}
+.kb-icon:hover{color:var(--bevel-ink);background:var(--bevel-sunk);border-color:var(--bevel-line)}
+.kb-id{font:500 11px/1 var(--bevel-font-mono);letter-spacing:.04em;color:var(--bevel-muted)}
+
+/* ---------------------------- masthead ----------------------------- */
+.kb-mast{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:2px solid var(--bevel-ink)}
+.kb-kicker{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--bevel-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bevel-brass);margin-bottom:12px}
+.kb-kicker i{font-style:normal;color:var(--bevel-faint)}
+.kb-mast h1{font:400 40px/1 var(--bevel-font-serif);letter-spacing:-.024em}
+.kb-mast-title p{margin-top:10px;font-size:14px;color:var(--bevel-ink-2);max-width:54ch}
+.kb-mast-side{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-bottom:2px}
+.kb-team{display:flex;align-items:center;gap:10px;margin-right:8px}
+.kb-team small{font:11px var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
+.kb .bevel-button{white-space:nowrap}
+
+/* ------------------------------ views ------------------------------ */
+.kb-views{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--bevel-line-2)}
+.kb-views a{display:inline-flex;align-items:center;gap:7px;padding:13px 12px 11px;margin-bottom:-1px;font-size:13.5px;color:var(--bevel-ink-2);text-decoration:none;border-bottom:2px solid transparent}
+.kb-views a b{font:500 10.5px/1 var(--bevel-font-mono);padding:3px 5px;background:var(--bevel-sunk);color:var(--bevel-muted)}
+.kb-views a[aria-current="page"]{color:var(--bevel-ink);border-bottom-color:var(--bevel-brass)}
+.kb-views a[aria-current="page"] b{background:var(--bevel-brass-soft);color:var(--bevel-brass)}
+.kb-views a[aria-current="page"] svg{color:var(--bevel-brass)}
+.kb-views-note{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:11px var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
+
+/* ------------------------------ tools ------------------------------ */
+.kb-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0 0}
+.kb-search{display:flex;align-items:center;gap:8px;flex:0 1 250px;min-width:180px;height:32px;padding:0 8px 0 10px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:inset 0 1px 0 var(--bevel-edge-in);color:var(--bevel-muted)}
+.kb-search input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:13.5px;color:var(--bevel-ink)}
+.kb-search input::placeholder{color:var(--bevel-muted)}
+.kb-search kbd{border-color:var(--bevel-line);background:var(--bevel-sunk)}
+.kb-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:12.5px;font-weight:500;color:var(--bevel-ink-2);background:var(--bevel-face);border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);cursor:pointer;white-space:nowrap}
+.kb-chip:hover{background:color-mix(in srgb,var(--bevel-face),var(--bevel-edge-hi) 45%)}
+.kb-chip[aria-pressed="true"]{color:var(--bevel-ink);background:var(--bevel-face-in);border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in)}
+.kb-chip[aria-pressed="true"] svg:first-child{color:var(--bevel-brass)}
+.kb-chip[aria-pressed="true"] svg:last-child{color:var(--bevel-muted);margin-left:2px}
+.kb-chip-quiet{background:none;border-color:transparent;color:var(--bevel-muted);font-weight:400}
+.kb-chip-quiet:hover{background:var(--bevel-sunk);border-color:transparent;color:var(--bevel-ink)}
+
+/* ------------------------------- tape ------------------------------ */
+.kb-tape{display:flex;align-items:stretch;margin:14px 0 0;padding:0;border-top:1px solid var(--bevel-line);border-bottom:1px solid var(--bevel-line)}
+.kb-tape>div{display:flex;flex-direction:column;gap:5px;padding:10px 18px 11px 0;margin-right:18px;border-right:1px solid var(--bevel-line)}
+.kb-tape>div:last-child{border-right:0;margin-right:0}
+.kb-tape dt{font:500 10px/1 var(--bevel-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bevel-muted)}
+.kb-tape dd{margin:0;font:400 22px/1 var(--bevel-font-serif);letter-spacing:-.01em;color:var(--bevel-ink)}
+.kb-tape dd small{font:11px var(--bevel-font-mono);color:var(--bevel-muted);margin-left:5px}
+.kb-tape dd[data-tone="ox"]{color:var(--bevel-ox)}
+.kb-tape-meter{flex:1;min-width:160px}
+.kb-tape-meter dd{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--bevel-font-mono);color:var(--bevel-ink-2);padding-top:6px}
+.kb-tape-meter .kb-check-bar{flex:1;height:8px}
+
+/* ---------------------------- empty note --------------------------- */
+.kb-empty-note{margin-top:16px;padding:12px 14px;font-size:13.5px;color:var(--bevel-ink-2);background:var(--bevel-sunk);border-left:3px solid var(--bevel-brass)}
+.kb-empty-note strong{font-weight:500;color:var(--bevel-ink)}
+
+/* ------------------------------- work ------------------------------ */
+.kb-work{display:flex;align-items:flex-start;gap:0;margin-top:22px}
+.kb-board{display:grid;grid-template-columns:repeat(4,minmax(var(--kb-lane),1fr));gap:0 var(--kb-gap);flex:1;min-width:0;align-items:start}
+.kb-board:focus-visible{outline:2px solid var(--bevel-brass);outline-offset:6px}
+
+/* lanes: no containers, a ruled head on the ground */
+.kb-lane{min-width:0}
+.kb-lane-head{display:flex;align-items:center;gap:8px;padding:0 0 10px;border-bottom:1px solid var(--bevel-ink);margin-bottom:12px}
+.kb-lane-head h2{font:500 13.5px/1 var(--bevel-font-sans);letter-spacing:.01em;color:var(--bevel-ink)}
+.kb-lane-mark{width:8px;height:8px;background:var(--bevel-faint)}
+.kb-lane-mark[data-lane="next"]{background:var(--bevel-brass)}
+.kb-lane-mark[data-lane="progress"]{background:var(--bevel-teal)}
+.kb-lane-mark[data-lane="done"]{background:var(--bevel-ink)}
+.kb-count{font:500 11px/1 var(--bevel-font-mono);padding:4px 6px;background:var(--bevel-sunk);color:var(--bevel-ink-2);border:1px solid var(--bevel-line)}
+.kb-wip{font:500 10px/1 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bevel-muted);white-space:nowrap}
+.kb-wip[data-full="true"]{color:var(--bevel-ox)}
+.kb-lane-head .kb-icon{margin-left:auto;width:24px;height:24px}
+.kb-lane-body{display:flex;flex-direction:column;gap:10px}
+.kb-add{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;border:1px dashed var(--bevel-line-2);background:none;color:var(--bevel-muted);font-size:12.5px;cursor:pointer;text-align:left}
+.kb-add:hover{color:var(--bevel-ink);border-color:var(--bevel-muted);background:var(--bevel-sunk)}
+
+/* cards */
+.kb-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 13px 11px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-bottom-color:color-mix(in srgb,var(--bevel-line-2) 60%,var(--bevel-ink));box-shadow:var(--bevel-shadow)}
+.kb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.kb-card h3{font:500 14px/1.3 var(--bevel-font-sans);letter-spacing:-.005em;color:var(--bevel-ink)}
+.kb-desc{font-size:12.5px;line-height:1.45;color:var(--bevel-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.kb-labels{display:flex;flex-wrap:wrap;gap:5px}
+.kb-label{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 6px;font:500 10.5px/1.4 var(--bevel-font-mono);letter-spacing:.03em;color:var(--bevel-ink-2);background:var(--tone-soft,var(--bevel-sunk));border:1px solid color-mix(in srgb,var(--tone,var(--bevel-muted)) 26%,var(--tone-soft,var(--bevel-sunk)))}
+.kb-label::before{content:"";width:6px;height:6px;background:var(--tone,var(--bevel-muted))}
+.kb-label[data-label="design"]{--tone:var(--bevel-brass);--tone-soft:var(--bevel-brass-soft)}
+.kb-label[data-label="editorial"]{--tone:var(--bevel-teal);--tone-soft:var(--bevel-teal-soft)}
+.kb-label[data-label="engineering"]{--tone:var(--bevel-ink-2);--tone-soft:var(--bevel-sunk)}
+.kb-label[data-label="launch"]{--tone:var(--bevel-ox);--tone-soft:var(--bevel-ox-soft)}
+.kb-label[data-label="studio"]{--tone:var(--bevel-ink);--tone-soft:var(--bevel-sunk)}
+.kb-priority{display:inline-flex;align-items:center;gap:4px;font:500 10.5px/1 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bevel-muted)}
+.kb-priority[data-priority="high"]{color:var(--bevel-brass)}
+.kb-priority[data-priority="urgent"]{color:var(--bevel-ox-ink);background:var(--bevel-ox);padding:3px 6px 3px 5px}
+.kb-priority[data-priority="urgent"] svg{color:var(--bevel-ox-ink)}
+.kb-priority[data-priority="normal"] svg{display:none}
+.kb-cover{margin:-12px -13px 2px;border-bottom:1px solid var(--bevel-line-2);position:relative}
+.kb-cover img{display:block;width:100%;height:84px;object-fit:cover}
+.kb-cover figcaption{position:absolute;left:8px;bottom:8px;padding:2px 6px;font:500 10px/1.4 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--bevel-ink);color:var(--bevel-ground)}
+.kb-dep{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:11.5px;line-height:1.3;color:var(--bevel-ink-2);background:var(--bevel-sunk);border-left:2px solid var(--bevel-muted)}
+.kb-dep b{font-weight:500;font-family:var(--bevel-font-mono);font-size:11px;color:var(--bevel-ink)}
+.kb-dep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.kb-dep.is-blocked{color:var(--bevel-ox);background:var(--bevel-ox-soft);border-left-color:var(--bevel-ox)}
+.kb-dep.is-blocked b{color:var(--bevel-ox)}
+.kb-check{display:flex;align-items:center;gap:8px}
+.kb-check-bar{display:block;flex:1;height:5px;background:var(--bevel-sunk);border:1px solid var(--bevel-line);font-style:normal}
+.kb-check-bar b{display:block;height:100%;background:var(--bevel-teal)}
+.kb-check-count{font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-card-foot{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:9px;border-top:1px solid var(--bevel-line)}
+.kb-due{display:inline-flex;align-items:center;gap:5px;font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
+.kb-due[data-due="today"]{color:var(--bevel-brass)}
+.kb-due[data-due="overdue"]{color:var(--bevel-ox)}
+.kb-due[data-due="done"]{color:var(--bevel-teal)}
+.kb-meta{display:inline-flex;gap:9px;margin-left:auto}
+.kb-meta span{display:inline-flex;align-items:center;gap:4px;font:11px/1 var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-card-foot .kb-people .f-avatar{width:22px;height:22px;font-size:8.5px}
+.kb-card-foot .kb-people .f-avatar+.f-avatar{margin-left:-6px}
+
+/* card states */
+.kb-card.is-blocked{border-left:3px solid var(--bevel-ox);padding-left:11px}
+.kb-card.is-blocked .kb-cover{margin-left:-11px}
+.kb-card.is-done{background:var(--bevel-ground);box-shadow:none;border-color:var(--bevel-line)}
+.kb-card.is-done h3{color:var(--bevel-ink-2);text-decoration:line-through;text-decoration-color:var(--bevel-faint);text-decoration-thickness:1px}
+.kb-card.is-done .kb-check-bar b{background:var(--bevel-muted)}
+.kb-card.is-selected{border-color:var(--bevel-brass);border-top:3px solid var(--bevel-brass);padding-top:10px;box-shadow:0 0 0 1px var(--bevel-brass),var(--bevel-shadow)}
+.kb-card.is-selected.is-blocked{border-left-color:var(--bevel-ox)}
+
+/* empty lane */
+.kb-lane-empty{padding:18px 14px 20px;border:1px dashed var(--bevel-line-2);color:var(--bevel-muted);text-align:left}
+.kb-lane-empty strong{display:block;font:500 13.5px/1.3 var(--bevel-font-sans);color:var(--bevel-ink-2)}
+.kb-lane-empty p{margin-top:5px;font-size:12.5px;line-height:1.45}
+.kb-empty-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
+.kb[data-state="empty"] .kb-lane[data-lane="backlog"] .kb-lane-empty{border-style:solid;border-color:var(--bevel-brass);background:var(--bevel-surface);color:var(--bevel-ink-2)}
+.kb[data-state="empty"] .kb-lane[data-lane="backlog"] .kb-lane-empty strong{color:var(--bevel-ink)}
+
+/* --------------------------- board + panel ------------------------- */
+.kb-board-wrap{flex:1;min-width:0}
+.kb-work.has-panel{--kb-lane:204px;--kb-gap:14px}
+.kb-work.has-panel .kb-board{display:flex;gap:var(--kb-gap);overflow-x:auto;overscroll-behavior-x:contain;padding:0 2px 10px 2px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none}
+.kb-work.has-panel .kb-board::-webkit-scrollbar{display:none}
+.kb-scroll-rail{height:7px;background:var(--bevel-sunk);border:1px solid var(--bevel-line)}
+.kb-scroll-rail b{display:block;height:100%;background:var(--bevel-muted)}
+.kb-work.has-panel .kb-lane{flex:0 0 var(--kb-lane);scroll-snap-align:start}
+.kb-work.has-panel .kb-lane-head h2{white-space:nowrap}
+.kb-work.has-panel .kb-wip{display:none}
+.kb-board-wrap>.kb-scroll-hint{margin-top:7px;font:11px/1.6 var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-scroll-hint svg{vertical-align:-2px;margin-right:6px}
+.kb-scroll-hint b{font-weight:500;color:var(--bevel-ink-2)}
+.kb-panel{flex:0 0 352px;margin-left:20px;padding:0 0 0 20px;border-left:2px solid var(--bevel-ink);font-size:13px}
+.kb-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
+.kb-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px 4px 8px;font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-teal);background:var(--bevel-teal-soft);border:1px solid color-mix(in srgb,var(--bevel-teal) 30%,var(--bevel-teal-soft));white-space:nowrap}
+.kb-status svg{color:var(--bevel-teal)}
+.kb-panel h2{font:400 25px/1.12 var(--bevel-font-serif);letter-spacing:-.015em;color:var(--bevel-ink)}
+.kb-panel-lede{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--bevel-ink-2)}
+.kb-props{display:grid;grid-template-columns:82px 1fr;gap:0;margin:16px 0 0;border-top:1px solid var(--bevel-line)}
+.kb-props dt{padding:8px 0;font:500 10px/1.6 var(--bevel-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bevel-muted);border-bottom:1px solid var(--bevel-line)}
+.kb-props dd{display:flex;align-items:center;gap:8px;margin:0;padding:6px 0;min-height:32px;border-bottom:1px solid var(--bevel-line);color:var(--bevel-ink);font-size:13px}
+.kb-props dd.kb-labels{gap:5px}
+.kb-props .kb-due{font-size:12px;color:var(--bevel-brass)}
+.kb-props .f-mono{color:var(--bevel-ink-2)}
+.kb-panel-section{margin-top:18px}
+.kb-panel-section h4{display:flex;align-items:center;gap:8px;margin-bottom:9px;font:500 12.5px/1 var(--bevel-font-sans);color:var(--bevel-ink)}
+.kb-panel-section h4 .kb-check-count{padding:3px 5px;background:var(--bevel-sunk);border:1px solid var(--bevel-line);color:var(--bevel-ink-2)}
+.kb-panel-section>.kb-check-bar{height:6px;margin-bottom:10px}
+.kb-check-item{display:flex;padding:5px 0;font-size:13px}
+.kb-check-item:has(:checked) .bevel-checkbox__label{color:var(--bevel-muted);text-decoration:line-through;text-decoration-color:var(--bevel-faint)}
+.kb-dep-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--bevel-ox-soft);border-left:2px solid var(--bevel-ox);color:var(--bevel-ox)}
+.kb-dep-row>div{flex:1;min-width:0;color:var(--bevel-ink);line-height:1.35}
+.kb-dep-row b{font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-ox);margin-right:6px}
+.kb-dep-row small{display:block;margin-top:3px;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-dep-row .kb-due{display:inline;font-size:11px}
+.kb-files{display:flex;flex-direction:column;gap:6px}
+.kb-file{display:flex;align-items:center;gap:10px;padding:6px 8px;text-decoration:none;color:var(--bevel-ink);background:var(--bevel-surface);border:1px solid var(--bevel-line)}
+.kb-file:hover{border-color:var(--bevel-line-2);background:var(--bevel-sunk)}
+.kb-file img{width:38px;height:28px;object-fit:cover;border:1px solid var(--bevel-line-2)}
+.kb-file>svg{width:38px;height:28px;padding:5px 0;color:var(--bevel-muted);background:var(--bevel-sunk);border:1px solid var(--bevel-line-2)}
+.kb-file span{display:flex;align-items:baseline;gap:8px;font:12.5px/1.2 var(--bevel-font-mono)}
+.kb-file small{font-size:11px;color:var(--bevel-muted)}
+.kb-comment{display:flex;gap:10px;padding:8px 0}
+.kb-comment>div{flex:1;min-width:0}
+.kb-comment b{display:flex;align-items:baseline;gap:8px;font-weight:500;font-size:13px}
+.kb-comment b small{font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-comment p{margin-top:3px;font-size:13px;line-height:1.45;color:var(--bevel-ink-2)}
+.kb-event{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;padding:7px 0 7px 36px;font-size:12.5px;color:var(--bevel-ink-2)}
+.kb-event b{font-weight:500;color:var(--bevel-ink)}
+.kb-event small{width:100%;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-event-dot{position:absolute;left:10px;top:12px;width:6px;height:6px;background:var(--bevel-brass)}
+.kb-composer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;color:var(--bevel-muted);font-size:13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:inset 0 1px 0 var(--bevel-edge-in)}
+.kb-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid var(--bevel-line)}
+.kb-panel-foot .f-mono{color:var(--bevel-muted)}
+
+/* ------------------------------- foot ------------------------------ */
+.kb-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:12px;border-top:1px solid var(--bevel-line);font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
+.kb-foot span{display:inline-flex;align-items:center;gap:6px}
+
+/* ------------------------------ narrow ----------------------------- */
+@media(max-width:960px){
+  .kb-work.has-panel{flex-direction:column;--kb-lane:248px;--kb-gap:18px}
+  .kb-board-wrap{width:100%}
+  .kb-panel{flex:none;width:auto;margin:20px 0 0;padding:20px 0 0;border-left:0;border-top:2px solid var(--bevel-ink)}
+}
+@media(max-width:600px){
+  .kb{padding:20px 18px 20px;--kb-lane:100%}
+  .kb-mast{flex-direction:column;align-items:stretch;gap:16px}
+  .kb-mast h1{font-size:32px}
+  .kb-mast-side{flex-wrap:wrap;gap:8px}
+  .kb-team{flex-basis:100%;margin-right:0}
+  .kb-mast-side .bevel-button{flex:1;justify-content:center}
+  .kb-scroll-hint,.kb-scroll-rail{display:none}
+  .kb-views{overflow-x:auto;scrollbar-width:none}
+  .kb-views a{padding:11px 9px 9px;white-space:nowrap}
+  .kb-views-note{display:none}
+  .kb-search{flex-basis:100%}
+  .kb-tools{gap:6px}
+  .kb-tape{flex-wrap:wrap;border-bottom:0}
+  .kb-tape>div{flex:1 1 40%;padding:10px 12px 10px 0;margin-right:12px;border-bottom:1px solid var(--bevel-line)}
+  .kb-tape>div:nth-child(2n){border-right:0;margin-right:0}
+  .kb-tape-meter{flex-basis:100%;border-right:0;margin-right:0}
+  .kb-board{display:flex;flex-direction:column;align-items:stretch;gap:26px}
+  .kb-work.has-panel .kb-board{display:flex;flex-direction:column;align-items:stretch;overflow:visible;padding:0;margin:0}
+  .kb-work.has-panel .kb-lane{flex:none}
+  .kb-lane-head{position:sticky;top:0;background:var(--bevel-ground);z-index:1}
+  .kb-foot{flex-direction:column;gap:6px}
+}

package/examples/components/reference/fable/as-authored/kanban-completed.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Kanban board · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/><link href="../kanban.css" rel="stylesheet"/></head><body data-component="kanban-board" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="default" inert=""><main class="kb" data-state="default">
+<header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
+<div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">New task</span></button></div></header>
+<nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>11</b></a><a href="#list"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg>List</a><a href="#timeline"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
+<div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button aria-pressed="true" class="kb-chip" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Due: this week<svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="m6 6 12 12M18 6 6 18"></path></svg></button><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
+<dl class="kb-tape"><div><dt>Open</dt><dd>9</dd></div><div><dt>In progress</dt><dd>3<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="ox">1</dd></div><div><dt>Done this week</dt><dd>2</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:18%"></b></i>18%</dd></div></dl>
+<div class="kb-work"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">3</span><button aria-label="Add a task to Backlog" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-109"><div class="kb-card-top"><span class="kb-id">FN-109</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Archive the 2025 field notes</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 19</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-110"><div class="kb-card-top"><span class="kb-id">FN-110</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Print-ready export for the field guide</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div aria-label="Checklist 0 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 24</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-111"><div class="kb-card-top"><span class="kb-id">FN-111</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Photograph the studio for the cover</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 26</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">3</span><button aria-label="Add a task to Up next" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-101"><div class="kb-card-top"><span class="kb-id">FN-101</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Turn research into a field guide</h3><p class="kb-desc">A useful home for what we learned in the interviews.</p><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 5" class="kb-check"><i class="kb-check-bar"><b style="width:40%"></b></i><span class="kb-check-count">2/5</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 10</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>3</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-102"><figure class="kb-cover"><img alt="The studio desk, a reference for the cover" src="../../fixtures/workspace.jpg"/><figcaption>Cover reference</figcaption></figure><div class="kb-card-top"><span class="kb-id">FN-102</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Shape the cover story</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 11</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-103"><div class="kb-card-top"><span class="kb-id">FN-103</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Invite the next four collaborators</h3><div class="kb-labels"><span class="kb-label" data-label="studio">Studio</span></div><div aria-label="Checklist 0 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 12</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">3</span><span class="kb-wip" data-full="true">WIP 3 / 3</span><button aria-label="Add a task to In progress" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card is-blocked" data-task="FN-104"><div class="kb-card-top"><span class="kb-id">FN-104</span><span class="kb-priority" data-priority="urgent"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></div><h3>Make room for good work</h3><p class="kb-desc">Finish the new project experience. Keep the first step calm and easy to return to.</p><div class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></div><div class="kb-dep is-blocked"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Blocked by <b>FN-105</b> · Font licensing</span></div><div aria-label="Checklist 3 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:75%"></b></i><span class="kb-check-count">3/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>8</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>3</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-105"><div class="kb-card-top"><span class="kb-id">FN-105</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Polish the document export</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div class="kb-dep"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg><span>Blocks <b>FN-104</b> · Make room for good work</span></div><div aria-label="Checklist 1 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:33%"></b></i><span class="kb-check-count">1/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="overdue"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>4</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-106"><div class="kb-card-top"><span class="kb-id">FN-106</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Give every empty state a voice</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:67%"></b></i><span class="kb-check-count">2/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 09</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">2</span><span class="kb-wip" data-full="false">This week</span><button aria-label="Add a task to Done" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card is-done" data-task="FN-107"><div class="kb-card-top"><span class="kb-id">FN-107</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>A calmer workspace navigation</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><div aria-label="Checklist 4 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">4/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 08</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>5</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><article class="kb-card is-done" data-task="FN-108"><div class="kb-card-top"><span class="kb-id">FN-108</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Write the first welcome</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 3 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">3/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section></div></div></div>
+<footer class="kb-foot"><span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>11 tasks · 2 done · 4 people</span></footer>
+</main></section><section data-ref-state="empty" hidden="" inert=""><main class="kb" data-state="empty">
+<header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
+<div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">New task</span></button></div></header>
+<nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>0</b></a><a href="#list"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg>List</a><a href="#timeline"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
+<div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
+<dl class="kb-tape"><div><dt>Open</dt><dd>0</dd></div><div><dt>In progress</dt><dd>0<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="">0</dd></div><div><dt>Done this week</dt><dd>0</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:0%"></b></i>0%</dd></div></dl><div class="kb-empty-note"><strong>This board is empty.</strong> New tasks land in Backlog. Move them across the lanes as the work moves.</div>
+<div class="kb-work"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">0</span><button aria-label="Add a task to Backlog" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing waiting</strong><p>Ideas that are not scheduled yet.</p><div class="kb-empty-actions"><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">Add the first task</span></button><button class="bevel-button bevel-button--small bevel-button--quiet" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 4h16v5H4ZM4 12h7v8H4ZM14 12h6v8h-6Z"></path></svg><span class="bevel-button__label">Start from a template</span></button></div></div></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">0</span><button aria-label="Add a task to Up next" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing scheduled</strong><p>Scheduled for this week.</p></div></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">0</span><button aria-label="Add a task to In progress" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing in progress</strong><p>Being worked on right now.</p></div></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">0</span><button aria-label="Add a task to Done" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing finished yet</strong><p>Finished and reviewed.</p></div></div></section></div></div></div>
+<footer class="kb-foot"><span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>0 tasks · 0 done · 4 people</span></footer>
+</main></section><section data-ref-state="selected" hidden="" inert=""><main class="kb" data-state="selected">
+<header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
+<div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">New task</span></button></div></header>
+<nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>11</b></a><a href="#list"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg>List</a><a href="#timeline"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
+<div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button aria-pressed="true" class="kb-chip" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Due: this week<svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="m6 6 12 12M18 6 6 18"></path></svg></button><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
+<dl class="kb-tape"><div><dt>Open</dt><dd>9</dd></div><div><dt>In progress</dt><dd>3<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="ox">1</dd></div><div><dt>Done this week</dt><dd>2</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:18%"></b></i>18%</dd></div></dl>
+<div class="kb-work has-panel"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">3</span><button aria-label="Add a task to Backlog" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-109"><div class="kb-card-top"><span class="kb-id">FN-109</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Archive the 2025 field notes</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 19</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-110"><div class="kb-card-top"><span class="kb-id">FN-110</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Print-ready export for the field guide</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div aria-label="Checklist 0 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 24</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-111"><div class="kb-card-top"><span class="kb-id">FN-111</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Photograph the studio for the cover</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 26</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">3</span><button aria-label="Add a task to Up next" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-101"><div class="kb-card-top"><span class="kb-id">FN-101</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Turn research into a field guide</h3><p class="kb-desc">A useful home for what we learned in the interviews.</p><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 5" class="kb-check"><i class="kb-check-bar"><b style="width:40%"></b></i><span class="kb-check-count">2/5</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 10</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>3</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-102"><figure class="kb-cover"><img alt="The studio desk, a reference for the cover" src="../../fixtures/workspace.jpg"/><figcaption>Cover reference</figcaption></figure><div class="kb-card-top"><span class="kb-id">FN-102</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Shape the cover story</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 11</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-103"><div class="kb-card-top"><span class="kb-id">FN-103</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Invite the next four collaborators</h3><div class="kb-labels"><span class="kb-label" data-label="studio">Studio</span></div><div aria-label="Checklist 0 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 12</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">3</span><span class="kb-wip" data-full="true">WIP 3 / 3</span><button aria-label="Add a task to In progress" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article aria-current="true" class="kb-card is-selected is-blocked" data-task="FN-104"><div class="kb-card-top"><span class="kb-id">FN-104</span><span class="kb-priority" data-priority="urgent"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></div><h3>Make room for good work</h3><p class="kb-desc">Finish the new project experience. Keep the first step calm and easy to return to.</p><div class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></div><div class="kb-dep is-blocked"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Blocked by <b>FN-105</b> · Font licensing</span></div><div aria-label="Checklist 3 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:75%"></b></i><span class="kb-check-count">3/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>8</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>3</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-105"><div class="kb-card-top"><span class="kb-id">FN-105</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Polish the document export</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div class="kb-dep"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg><span>Blocks <b>FN-104</b> · Make room for good work</span></div><div aria-label="Checklist 1 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:33%"></b></i><span class="kb-check-count">1/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="overdue"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>4</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-106"><div class="kb-card-top"><span class="kb-id">FN-106</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Give every empty state a voice</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:67%"></b></i><span class="kb-check-count">2/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 09</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">2</span><span class="kb-wip" data-full="false">This week</span><button aria-label="Add a task to Done" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card is-done" data-task="FN-107"><div class="kb-card-top"><span class="kb-id">FN-107</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>A calmer workspace navigation</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><div aria-label="Checklist 4 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">4/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 08</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>5</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><article class="kb-card is-done" data-task="FN-108"><div class="kb-card-top"><span class="kb-id">FN-108</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Write the first welcome</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 3 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">3/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section></div><div aria-hidden="true" class="kb-scroll-rail"><b style="width:80%"></b></div><p class="kb-scroll-hint"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 12h16m-6-6 6 6-6 6"></path></svg>Four lanes. Scroll the board sideways for <b>Done</b>.</p></div><aside aria-label="Task FN-104" class="kb-panel">
+<header class="kb-panel-head"><span class="kb-id">FN-104</span><span class="kb-status" data-lane="progress">In progress <svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></span><span class="kb-spacer"></span><button aria-label="Task options" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button><button aria-label="Close task" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header>
+<h2>Make room for good work</h2>
+<p class="kb-panel-lede">Finish the new project experience. Keep the first step calm, direct and easy to return to.</p>
+<dl class="kb-props">
+<dt>Assignees</dt><dd><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span>Mira Chen, Alex Rivera</dd>
+<dt>Priority</dt><dd><span class="kb-priority" data-priority="urgent"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></dd>
+<dt>Due</dt><dd><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today, Sep 08</span></dd>
+<dt>Labels</dt><dd class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></dd>
+<dt>Estimate</dt><dd class="f-mono">3 days · 2 spent</dd>
+</dl>
+<section class="kb-panel-section"><h4>Checklist <b class="kb-check-count">3/4</b></h4><i class="kb-check-bar"><b style="width:75%"></b></i>
+<label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Set the project details</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Check both colour modes</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Review the compact layout</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Get Jules’ final review</span></label>
+</section>
+<section class="kb-panel-section"><h4>Blocked by <b class="kb-check-count">1</b></h4>
+<div class="kb-dep-row"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><div><b>FN-105</b> Polish the document export<small>In progress · Alex Rivera · <span class="kb-due" data-due="overdue">due Sep 07</span></small></div><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></div>
+</section>
+<section class="kb-panel-section"><h4>Attachments <b class="kb-check-count">3</b></h4>
+<div class="kb-files"><a class="kb-file" href="#workspace"><img alt="" src="../../fixtures/workspace.jpg"/><span>workspace.jpg<small>184 KB</small></span></a><a class="kb-file" href="#brief"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>project-brief.pdf<small>420 KB</small></span></a><a class="kb-file" href="#copy"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>welcome-copy.md<small>3 KB</small></span></a></div>
+</section>
+<section class="kb-panel-section"><h4>Activity <b class="kb-check-count">8</b></h4>
+<div class="kb-comment"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span><div><b>Alex Rivera <small>18 min ago</small></b><p>The new flow reads clearly. Ready for one last look at the copy.</p></div></div>
+<div class="kb-comment"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><div><b>Sam Patel <small>2 h ago</small></b><p>Tightened the welcome line. It is on the card now.</p></div></div>
+<div class="kb-event"><span class="kb-event-dot"></span>Mira moved this from <b>Up next</b> to <b>In progress</b><small>Yesterday</small></div>
+<div class="kb-composer"><span>Leave a comment…</span><kbd>⌘ ↵</kbd></div>
+</section>
+<footer class="kb-panel-foot"><span class="f-mono">Created Sep 02 by Jules Park</span><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6"></path></svg><span class="bevel-button__label">Open task</span></button></footer>
+</aside></div>
+<footer class="kb-foot"><span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>11 tasks · 2 done · 4 people</span></footer>
+</main></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>