/* The Chief on the top bar, like a crown (the Founder, 5 October 2026; primary-face.js). The floating button is gone. */
.topbar .chief-crown{color:var(--purple,#6d28b5);border-radius:12px}
.topbar .chief-crown .primary-crown{width:22px;height:22px}
@media (hover:hover){.topbar .chief-crown:hover{background:var(--soft,#f2ecfa)}}
.topbar .chief-crown:focus-visible{outline:3px solid #b987ef;outline-offset:2px}

/* History's one filter (the Founder, 5 October 2026): Show beside the search; the rest under More filters. */
.history-filter-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:end}
@media (max-width:560px){.history-filter-main{grid-template-columns:1fr}}
.history-more>summary{cursor:pointer;color:var(--purple,#6d28b5);font-weight:600;font-size:14px;min-height:44px;display:flex;align-items:center;width:max-content}
.history-more>.history-filter-grid{margin-top:8px}
.history-filter-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.history-filter-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-filter-grid[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:320px}
@media (max-width:560px){.history-filter-grid[data-count]{grid-template-columns:1fr}}
.event-who{font-weight:600;color:var(--ink,#24212d);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-symbol.group-money{background:#d8ffed;color:#087f52}
.event-symbol.group-approvals{background:#ffe3e8;color:#d52c43}
.event-symbol.group-agents{background:#f0e3ff;color:#7930dc}
.event-symbol.group-messages{background:#e3efff;color:#1d5fb8}
[data-theme=dark] .event-symbol.group-money{background:#123b2b;color:#7be0b4}
[data-theme=dark] .event-symbol.group-approvals{background:#47202a;color:#f3a3b1}
[data-theme=dark] .event-symbol.group-agents{background:#35244d;color:#d6baf8}
[data-theme=dark] .event-symbol.group-messages{background:#1d2c45;color:#9cc2f5}

/* Messages' chat fills the screen under its way back (page-back.js). */
.page-back-line+.chat-app{height:calc(100dvh - 190px)}
@media (max-width:700px){.page-back-line+.chat-app{height:calc(100dvh - 240px)}}
/* A chat under Messages keeps its arrow back at every width (page-back.js points it). */
.chat-thread-head .chat-back{display:inline-flex}
/* The page's name on the top bar at every width (the Founder, 5 October 2026: "I could not tell where I was"): the whole
   crumb beside the menu on a computer; on a phone, where it does not fit, the page's own name (terminal-app.js topPage). */
.top-page{display:none}
/* One title, one style at every width (the Founder, 7 October 2026: bold on the phone, thin on the computer): the same
   "Section · Item" words, the same weight, one line with an ellipsis; only the size steps up on a wider screen. */
.topbar .top-crumb{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;color:var(--ink,#24212d)}
@media (max-width:700px){
 .topbar .top-crumb{display:none}
 .topbar .top-page{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;color:var(--ink,#24212d);padding-inline-start:2px}
}
/* Item29: the shell's top bar is the visible page title. Retain the page h1 in the
   accessibility tree; subtitles, actions, section headings and dialogs remain visible. */
.app-shell > .topbar + main#main h1:not(dialog h1):not([role="dialog"] h1){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* An agent's own page keeps its name large beside the face: the top bar says the area, the heading says who (the Founder, 14 October 2026). */
.app-shell > .topbar + main#main .page-heading.agent-heading h1.agent-head-name{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;border:0}
/* The left menu folded to a rail opens again from its top: the same control, turned to point out, named Expand menu
   (the Founder, 7 October 2026, his phone turned sideways). Where the left menu is drawn, the phone's bar is not: it sat
   over the page and the menu, and everything on it is in the menu. */
@media (min-width:701px){
 .collapsed .sidebar-top{flex-direction:column;gap:6px}
 .collapsed .sidebar .collapse-control{display:inline-grid;place-items:center}
 .collapsed .sidebar .collapse-control .icon{transform:scaleX(-1)}
 .bottom-nav.agent-dock{display:none!important}
}
@media (min-width:701px) and (max-width:900px){.app-shell{padding-bottom:24px}}
/* A phone on its side is short: the left menu scrolls as one column, so no icon is cut off between its top and foot. */
@media (min-width:701px) and (max-height:520px){.sidebar{overflow-y:auto;gap:10px;padding-top:14px;padding-bottom:12px}.sidebar>*{flex-shrink:0}.sidebar .nav-stack{flex:none;overflow:visible}}