/* One bar on top of every list page (the Founder, 17 October 2026, page-bar.js): one row directly under the top bar, the
   primary action as a pill at the left edge, the icons at the right edge, every target 44px, the same on every page,
   light and dark, phone and desktop. Nothing is centred; no description; the title is the top bar's. */
#main .page-heading.page-bar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;min-height:44px;margin:0 0 16px;padding:0;border:0;background:none}
#main .page-heading.page-bar>h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#main .page-bar-start{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex:0 1 auto;min-width:0;margin:0}
#main .page-bar-start:empty{display:none}
#main .page-bar-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;margin:0;margin-inline-start:auto}
#main .page-bar-view:empty{display:none}
#main .page-bar-view{display:flex}

/* The primary action: one pill, the same everywhere (New task, Add agent, New workspace, New routine, Plug in…). */
#main .page-bar-start>.btn{flex:0 1 auto;width:auto;min-width:0;max-width:100%;height:44px;min-height:44px;margin:0;padding:0 18px 0 14px;gap:8px;border-radius:999px;font-size:.9375rem;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:none}
#main .page-bar-start>.btn .icon{flex:none;width:20px;height:20px}
#main .page-bar-start>.btn{overflow:hidden}
#main .page-bar-start>.btn .button-label{min-width:0}

/* The icons: round, 44px, one border, the same on every page. */
#main .page-bar-end>:is(.icon-button,a.icon-button),#main .page-bar .list-search-row>.list-filter-open{position:relative;display:grid;place-items:center;flex:none;width:44px;min-width:44px;height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface,#fff);color:var(--ink,#24212d);cursor:pointer;text-decoration:none;box-shadow:none}
#main .page-bar :is(.icon-button,.view-toggle button) .icon{width:20px;height:20px}
#main .page-bar .list-filter-open.on{background:var(--soft,#f2ecfa);color:var(--purple,#6d28b5);border-color:#cdb4ec}
#main .page-bar .list-filter-count{position:absolute;top:-6px;inset-inline-end:-6px}
#main .page-bar .list-filter-count[hidden]{display:none}
@media(hover:hover){#main .page-bar-end>:is(.icon-button,a.icon-button):hover{background:var(--soft,#f2ecfa)}}

/* List or grid: one round 44px icon in the row, the view it switches to (collections.js puts it here). */
#main .page-bar .view-toggle{display:flex;gap:0;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;overflow:visible}
#main .page-bar .view-toggle button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface,#fff);color:var(--ink,#24212d);cursor:pointer}
#main .page-bar .view-toggle button+button{border-inline-start:1px solid var(--line)}
#main .page-bar .view-toggle button[aria-pressed=true]{display:none}

/* Search, open: the same row, the field, the filter beside it and the close X. */
#main .page-bar[data-searching]>.list-search{display:block;flex:1 1 auto;min-width:0;margin:0}
#main .page-bar .list-search-row{display:flex;align-items:center;gap:8px;max-width:none;min-width:0}
#main .page-bar .list-search-field{flex:1 1 auto;min-width:0;height:44px;min-height:44px;padding:0 14px;border-radius:999px}
#main .page-bar .list-search-field .input{min-height:42px;height:42px}
#main .page-bar .list-search-close{display:grid;place-items:center;flex:none;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--muted)}

/* A tap leaves no ring; a keyboard still sees where it is. */
#main .page-bar :is(a,button){-webkit-tap-highlight-color:transparent}
#main .page-bar :is(a,button):focus:not(:focus-visible){outline:none;box-shadow:none}
#main .page-bar :is(a,button):focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:2px}

/* The count, where a list keeps one: a small label on the line of the list's own Sort, never a heading row. */
#main .list-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-width:0;margin:0 0 12px}
#main .list-meta>.list-count{margin:0;color:var(--muted);font-size:.8125rem;font-weight:500;white-space:nowrap}
#main .list-meta>.task-view{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;margin:0}
#main .list-meta>.task-view>span{color:var(--muted);font-size:.8125rem}
#main .list-meta>.task-view .input{min-height:44px;max-width:100%;font-size:.875rem}

[data-theme=dark] #main .page-bar-end>:is(.icon-button,a.icon-button),[data-theme=dark] #main .page-bar .view-toggle button,[data-theme=dark] #main .page-bar .list-search-row>.list-filter-open{background:var(--surface);border-color:var(--line);color:var(--ink)}
[data-theme=dark] #main .page-bar .list-filter-open.on{background:#2d2440;border-color:#4a3a6b;color:var(--ink)}

/* A page whose bar is drawn under its own heading (Briefs, briefs.js): the heading is its h1 alone and takes no room. */
#main .page-heading.page-title-only{display:contents}
#main .page-heading.page-title-only>h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}