/*
 * Small fits from the design pass of 7 October 2026, each a rule the Founder set: purple is the only accent, every
 * button looks the same, nothing overlaps, tabs on a phone are one row. Linked after shape.css, so each rule here wins
 * at the specificity it restates.
 */

/* ---- Workspace tiles (collections.css) ---- */
/* Tints in the purple family only: no pink, teal or peach behind a Workspace's name. */
.ws-tone-2{background-color:#f3e6fb;background-image:linear-gradient(150deg,#f9f1fe 0%,#e6d0f5 100%)}
.ws-tone-3{background-color:#ebe8f6;background-image:linear-gradient(150deg,#f4f2fb 0%,#dcd6ef 100%)}
.ws-tone-4{background-color:#ece4fb;background-image:linear-gradient(150deg,#f5f0fe 0%,#d9cbf6 100%)}
/* A long name never runs under the folder and the Draft mark: the tile keeps their row free and grows instead. */
[data-view=grid]>.ws-tile{padding-top:48px}
@media (max-width:600px){[data-view=grid]>.ws-tile .ws-name{-webkit-line-clamp:2}}
[data-theme=dark] .ws-icon{color:var(--purple,#ae7beb)}

/* ---- Buttons: a link drawn as a button reads like every other button ---- */
a.btn:not(.primary):not(.danger):not(.soft){color:inherit}

/* One clearance contract for scrolling pages and notifications; the dock can compact inside this reserve. */
:root{--terminal-safe-bottom:env(safe-area-inset-bottom,0px);--terminal-dock-height:64px;--terminal-dock-gap:12px;--terminal-clearance:0px}
@media(max-width:700px){
 :root{--terminal-clearance:calc(var(--terminal-dock-height) + var(--terminal-dock-gap) + var(--terminal-safe-bottom) + 12px)}
 body .app-shell,body.collapsed .app-shell{padding-bottom:var(--terminal-clearance)}
 body .bottom-nav.agent-dock{bottom:calc(var(--terminal-dock-gap) + var(--terminal-safe-bottom))}
}
body #toast{bottom:max(25px,var(--terminal-clearance),var(--toast-lift,0px));overflow-wrap:anywhere}
/* Hide immediately, before the observer can pause the notification's timer. It resumes after dismissal. */
body #toast.held,body.menu-open #toast,body:has(dialog[open], .chat-menu, .call-sheet:not([hidden]):not(.pill), .chat-panel:not([hidden]), .call-floater:not([hidden]), [popover]:popover-open) #toast:not(.in-place){visibility:hidden}

/* ---- A Workspace's Overview: the participants' head wraps rather than run past its card ---- */
@media (max-width:480px){.workspace-participants>.card-head:has(>.btn){flex-wrap:wrap}}
/* Sources: air between the heading and what is under it. */
[data-workspace-documents]>.card-head{margin-bottom:14px}

/* ---- History: one purple mark for every kind of line; the icon says the kind ---- */
.event-symbol[class*=group-]{background:var(--soft,#f2ecfa);color:var(--purple,#6d28b5)}
[data-theme=dark] .event-symbol[class*=group-]{background:#35244d;color:#d6baf8}

/* ---- The side menu: the person's own row is a pill like every other control ---- */
.account-button{border-radius:999px}

/* ---- The side menu's rows, and Search's own line, are pills as on the site ---- */
.sidebar .nav-item{border-radius:999px}
[data-search-input]{border-radius:999px}

/* ---- Org chart, dark: a node's name reads on its dark card ---- */
[data-theme=dark] .org-world .org-node:not(.identity){color:var(--ink,#f0f1f5)}
/* A node's agent row keeps its status and chevron inside the node. */
.org-world .org-node .agent-compact-meta{flex-wrap:wrap;row-gap:4px}
.org-world .org-node .agent-compact-meta>.agent-role-runtime{flex-basis:100%}
.org-world .org-node .agent-compact-meta>.icon{display:none}

/* ---- "Needs you" beside the connection pill, never in its place: its red words and the arrow, never a dot (shape.css) ---- */
.agent-needs{display:inline-flex;align-items:center;gap:5px;color:var(--red,#bd3551);font-weight:600;white-space:nowrap;font-size:.75rem}
.agent-compact-meta>.agent-needs{font-size:11px;gap:4px}
[data-theme=dark] .agent-needs{color:#ff9aaa}
/*
 * Rows keep their two lines and tiles stay square (primary-status, agent-waiting): in a row, Needs you stands on the
 * name's line at its right end; in a tile, at the bottom right beside the connection pill.
 */
.agent-compact-copy:has(>.agent-compact-meta>.agent-needs){position:relative}
.agent-compact-copy:has(>.agent-compact-meta>.agent-needs)>.agent-compact-name{padding-inline-end:76px}
.agent-compact-meta>.agent-needs{position:absolute;top:0;inset-inline-end:0;line-height:20px}
[data-collection-items=agents][data-view=grid] .agent-compact-copy:has(>.agent-compact-meta>.agent-needs){position:static}
[data-collection-items=agents][data-view=grid] .agent-compact-copy:has(>.agent-compact-meta>.agent-needs)>.agent-compact-name{padding-inline-end:0}
[data-collection-items=agents][data-view=grid] .agent-compact-meta>.agent-needs{top:auto;inset-inline-end:0;bottom:4px}

/*
 * ---- The top bar (the Founder, 14 October 2026; design/2026-10-14-header-and-tabs.md) ----
 * A computer: Start a call, New chat, Search, the bell, the crown, inline. At 480px and under: Search, the bell and the
 * crown stay on the bar, and ⋮ (last) opens Start a call and New chat beneath it (terminal-app.js). The title is never cut:
 * "Section · Item" on one line when it fits, else the Item alone (data-solo), wrapping onto as many lines as it needs, and
 * the bar grows with it. Wider, the disclosure is display:contents and its two controls stand in the bar.
 */
.topbar .top-more{display:contents}
.topbar .top-more-button,.topbar .top-more-label{display:none}
/* Credits and Funds (the Founder, 17 October 2026) are rows of the phone's ⋮ only: wider, the bar keeps its controls. */
body .topbar .top-more>[data-top-money]{display:none}
@media (max-width:700px){
 .topbar .top-page{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
 .topbar .top-page>.top-section,.topbar .top-page>.top-item{white-space:normal;overflow:visible;text-overflow:clip}
 .topbar .top-page[data-solo]>.top-section{display:none}
 body:not(:has(.group-call-pill)) .topbar{height:auto!important;min-height:65px;padding-block:6px!important}
}
@media (max-width:480px){
 .topbar .top-right{gap:0!important;flex:none;position:static}
 .topbar .top-title{gap:4px;min-width:0;flex:1 1 auto}
 body .topbar .top-title>.mobile-menu,body .topbar .top-right>.top-more-button,body .topbar .top-right>.search-trigger{display:inline-flex}
 body .topbar .top-title>.mobile-menu,body .topbar .top-right>.top-more-button,body .topbar .top-right>[data-chief-crown],body .topbar .top-right>.search-trigger{align-items:center;justify-content:center;width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;margin:0!important;flex:none}
 .topbar .top-more{display:none}
 .topbar .top-right>.top-more-button{order:1}
 .topbar .top-more[data-open]{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:calc(100% + 4px);inset-inline-end:8px;width:min(240px,calc(100vw - 16px));padding:6px;background:var(--surface,#fff);border:1px solid var(--line,#e7e5ee);border-radius:14px;box-shadow:0 12px 32px #1c142b29;z-index:40}
 body .topbar .top-more>:is(button,a){display:flex!important;align-items:center;justify-content:flex-start;gap:12px;width:100%!important;min-width:0!important;height:auto!important;min-height:44px;padding:0 12px!important;margin:0!important;border:0!important;border-radius:10px;background:none;color:var(--ink,#24212d);font-size:15px;font-weight:500;text-align:start;text-decoration:none;box-shadow:none}
 body .topbar .top-more>:is(button,a):hover{background:var(--soft,#f2ecfa)}
 body .topbar .top-more>:is(button,a):focus-visible{outline:3px solid #b987ef;outline-offset:-3px}
 .topbar .top-more .top-more-label{display:inline!important;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
 body .topbar .top-more>[data-top-money] .top-more-label{flex:1 0 auto;white-space:nowrap}
 .topbar .top-more .top-money-value{flex:0 1 auto;min-width:0;text-align:end;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
 .topbar .top-more .top-money-value[data-unread]{font-weight:500;color:var(--muted,#686577);font-size:13px}
 body .topbar .top-more>[data-top-money]+:not([data-top-money]){margin-top:4px!important;position:relative}
 body .topbar .top-more>[data-top-money]+:not([data-top-money])::before{content:"";position:absolute;top:-3px;inset-inline:8px;border-top:1px solid var(--line,#e7e5ee)}
 /* A one-to-one call: the call's controls on the first row, the whole title on the second (call-sheet.css centres the pill). */
 body[data-call-on] .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:52px auto;padding:0 8px 6px!important;gap:0!important;align-items:center}
 body[data-call-on] .topbar .top-title{display:contents}
 body[data-call-on] .topbar .top-title>.mobile-menu{grid-row:1;grid-column:1;justify-self:start}
 body[data-call-on] .topbar .top-title>.top-page{grid-row:2;grid-column:1/-1;max-width:none;padding-inline:8px}
 body[data-call-on] .topbar .top-right{grid-row:1;grid-column:2;justify-self:end}
 body[data-call-on] .topbar .call-pill{top:26px}
 body[data-call-on] .topbar .top-more>:is([data-group-call="choose"],[data-action="new-chat"]),body[data-call-on] .topbar .top-right>.top-more-button{display:none!important}
 body[data-call-on]:not([data-call-chief]) .topbar .top-right>[data-chief-crown]{position:absolute;top:26px;inset-inline-start:54px;translate:0 -50%}
}
@media (max-width:360px){
 .topbar .top-page{font-size:14px}
 body .topbar{padding-inline:8px!important;gap:4px!important}
}

/* ---- The phone's bottom bar, five at most (the Founder, 14 October 2026): Home · Agents · Feed · Work · Shortcuts ----
   The Feed's button is the Symbionia mark on the surface colour: no ring, no fill of ours, a soft shadow.
   Each an icon with its word under it, 44px at least; the Feed in the centre, raised; Work's popover over the bar. */
body .bottom-nav.tab-bar{height:68px;min-height:68px;padding:4px 6px;gap:2px;overflow:visible}
body .bottom-nav.tab-bar>:is(a,button){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;height:58px;width:100%;padding:0 2px;border:0;border-radius:18px;background:transparent;color:var(--muted,#686577);font:inherit;cursor:pointer}
body .bottom-nav.tab-bar>:is(a,button).active{color:var(--purple,#6d28b5);background:var(--soft,#f2ecfa)}
body .bottom-nav.tab-bar .icon{width:22px;height:22px;flex:none}
body .bottom-nav.tab-bar .tab-label{display:block;font-size:11px;line-height:1.15;font-weight:600;max-width:100%;overflow-wrap:anywhere;text-align:center}
body .bottom-nav.tab-bar>a.tab-feed>.icon{box-sizing:content-box;width:30px;height:30px;padding:11px;margin-top:-28px;border:0;border-radius:50%;background:var(--surface,#fff);box-shadow:0 4px 14px #1c142b2e,0 1px 3px #1c142b1f;object-fit:contain}
body[data-theme=dark] .bottom-nav.tab-bar>a.tab-feed>.icon{box-shadow:0 4px 14px #0009,0 1px 3px #0006}
body .bottom-nav.tab-bar>a.tab-feed.active{background:transparent}
body .bottom-nav.tab-bar>a.tab-feed.active>.tab-label{color:var(--purple,#6d28b5)}
/* The Feed's count sits as an iPhone app's badge (the Founder, 15 October 2026): a round red count at the circle's
   top-right, outside it and over its edge. The circle (52px, its centre 26px right of the tab's middle at most) is
   measured in apps/web/test/bar-feed-chief.test.mjs. */
body .bottom-nav.tab-bar>a.tab-feed [data-messages-count]{top:-26px;inset-inline-end:auto;inset-inline-start:calc(50% + 11px);min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e5243b;color:#fff;font:700 12px/22px system-ui,sans-serif;box-shadow:0 0 0 2px var(--surface,#fff);z-index:1}
body .bottom-nav.tab-bar>a.tab-feed [data-messages-count][data-digits="3"]{font-size:11px;padding:0 5px}
body .bottom-nav.agent-dock.tab-bar.compact:not(:focus-within){height:68px;min-height:68px;max-width:430px;padding-block:4px}

/* A waiting agent keeps its full name; the Needs-you mark can take the following line. */
body .agent-row-head:has(>.agent-needs){height:auto;flex-wrap:wrap;row-gap:4px}
body .agent-row-head:has(>.agent-needs)>:is(.agent-compact-name,h2){max-width:100%;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}

/* ---- Sheets on a phone: nothing runs past the sheet's right edge (the Founder, 12 October 2026, New workspace's
   Deadline). A two-column row of fields never grows past its share, and a date field is as wide as its column. ---- */
.dialog-body .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dialog-body .form-grid>*,.dialog-body form>label{min-width:0}
.dialog-body input,.dialog-body select,.dialog-body textarea{max-width:100%;min-width:0;box-sizing:border-box}
.dialog-body input[type=date],.dialog-body input[type=time],.dialog-body input[type=datetime-local]{display:block;width:100%;-webkit-appearance:none;appearance:none;min-height:44px}
.dialog-body input[type=date]::-webkit-date-and-time-value{text-align:start}
@media (max-width:400px){.dialog-body .form-grid{grid-template-columns:minmax(0,1fr)}}