/*
 * Where the agent's colour reaches (the Founder, 16 October 2026, 23:17; 0219; agent-colour.js draws the variables).
 *
 * The agent's page: every purple on it reads the agent's colour (`--purple` is what the Terminal's accents are drawn
 * with: tabs, links, stat icons, buttons, Chat and Call, the grips), as a shade that reads at 4.5:1 on white and on the
 * tint; the ground behind the cards is a very light tint of its hue, the cards stay white. In dark the accent is its light
 * shade and the ground stays dark.
 *
 * **Only the page, never a dialog** (the Founder, 17 October 2026, on Hand over: the checkboxes were Cody's blue). The
 * variables are set on #terminal; the dialog, the toast and the skip link are its siblings and keep the person's own
 * accent (graphite for the Founder). Checkboxes, radios, switches, the primary button and the focus ring in a dialog read
 * the person's theme, whatever page it was opened on.
 */
:root body[data-agent-page] #terminal{--purple:var(--agent-ink);--purple-dark:var(--agent-ink)}
:root body[data-agent-page]:not([data-theme=dark]){--canvas:var(--agent-tint);background:var(--agent-tint)}
:root body[data-agent-page][data-theme=dark] #terminal{--purple:var(--agent-ink-dark);--purple-dark:var(--agent-ink-dark)}
:root body[data-agent-page] #terminal :is(button,a,input,[tabindex]):focus-visible{outline-color:var(--agent-accent)}
:root body[data-agent-page][data-theme=dark] #terminal :is(button,a,input,[tabindex]):focus-visible{outline-color:var(--agent-ink-dark)}

/*
 * Everywhere the agent appears: its card, row, task and notice carry a quiet marker, an edge in its colour at the start
 * and the very light tint behind the words, which stay the page's own. In dark the edge in its light shade on a deep,
 * quiet shade of its hue (the Founder, 17 October 2026, 07:30: in graphite the background had gone).
 */
:root [data-agent-mark]{background:linear-gradient(to right,var(--agent-accent) 0 4px,var(--agent-tint) 4px) !important}
:root [dir=rtl] [data-agent-mark],:root [data-agent-mark]:dir(rtl){background:linear-gradient(to left,var(--agent-accent) 0 4px,var(--agent-tint) 4px) !important}
:root [data-theme=dark] [data-agent-mark]{background:linear-gradient(to right,var(--agent-ink-dark) 0 4px,var(--agent-tint-dark) 4px) !important}
:root [data-theme=dark][dir=rtl] [data-agent-mark],:root [data-theme=dark] [data-agent-mark]:dir(rtl){background:linear-gradient(to left,var(--agent-ink-dark) 0 4px,var(--agent-tint-dark) 4px) !important}

/*
 * Agent colour as a bottom sheet (agent-colour.js `colourSheet`; bottom-sheet.css; the Founder, 24 October 2026). One
 * compact chat line drawn with the chat's own bubble, a grid of swatches (a dot and its name), the colour bar under them
 * for Custom, then the pills. The bubble's colour classes are the chat's own (`[class*="chat-color-"]`).
 */
.acs-preview{display:flex;flex-direction:column;gap:6px;margin:14px 0 2px;padding:14px;border-radius:16px;background:var(--canvas,#f7f7fa);pointer-events:none}
[data-theme=dark] .acs-preview{background:#14151a}
.acs-preview .team-message{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:none;padding:0;background:none;border:0;min-width:0}
.acs-preview .team-message.mine{align-items:flex-end}
.acs-preview .chat-bubble{width:fit-content;max-width:82%;cursor:default}
.acs-preview .chat-bubble>p{margin:0}
.acs-swatches{clear:both;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:12px 6px;min-width:0}
.acs-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;cursor:pointer}
.acs-dot{display:block;width:36px;height:36px;border-radius:50%;background:var(--dot);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);outline:2px solid transparent;outline-offset:3px;transition:outline-color .12s}
[data-theme=dark] .acs-dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.acs-swatch:has(.bs-input[value=custom]) .acs-dot{background:radial-gradient(circle,var(--dot) 0 9px,transparent 10px),conic-gradient(#e53935,#fb8c00,#fdd835,#43a047,#00acc1,#1e88e5,#8e24aa,#e53935)}
.acs-swatch:has(.bs-input:checked) .acs-dot{outline-color:var(--ink,#24212d)}
[data-theme=dark] .acs-swatch:has(.bs-input:checked) .acs-dot{outline-color:#f0f1f5}
.acs-swatch:has(.bs-input:focus-visible) .acs-dot{outline-color:var(--purple,#6d28b5)}
.acs-name{white-space:nowrap;font-size:11px;line-height:1.2;color:var(--muted,#686577)}
.acs-swatch:has(.bs-input:checked) .acs-name{color:var(--ink,#24212d);font-weight:600}
[data-theme=dark] .acs-swatch:has(.bs-input:checked) .acs-name{color:#f0f1f5}
.acs-custom{margin-top:16px}
.acs-custom[hidden]{display:none}
.acs-custom .chat-hue-pick{display:block}
.acs-custom .chat-hue-track{width:100%}

/*
 * Names (the Founder, 17 October 2026, 00:55). On its own page the agent's name is in its colour (the shade that reads at
 * 4.5:1) and the way back ("← Agents") stays the page's own black. Wherever an agent is listed, its name is black, never
 * the product purple, and in its colour where Listings is ticked.
 */
:root body[data-agent-page] .agent-head-name{color:var(--agent-ink)}
:root body[data-agent-page][data-theme=dark] .agent-head-name{color:var(--agent-ink-dark)}
:root body[data-agent-page] a.page-back{color:var(--ink,#24242c)}
:root :is(.agent-compact-name,.feed-name){color:var(--ink,#24242c)}
:root [data-agent-mark] :is(.agent-compact-name,.feed-name,.task-line-title,.agent-row-head>h2,.agent-place-name){color:var(--agent-ink)}
:root [data-theme=dark] [data-agent-mark] :is(.agent-compact-name,.feed-name,.task-line-title,.agent-row-head>h2,.agent-place-name){color:var(--agent-ink-dark)}

/*
 * Every listing (the Founder, 17 October 2026, 07:15, on a Workspace's members: "This is one of the listings"). A place
 * marked by agent-place.js wears the Agents list's look: the edge, the tint, the name in the colour. A picker line has
 * no padding of its own, so the edge gets room before the box and the words, and the line its rounded corners.
 */
:root [data-agent-mark].btn{color:var(--agent-ink)}
:root [data-theme=dark] [data-agent-mark].btn{color:var(--agent-ink-dark)}
:root [data-agent-mark][data-agent-place-pad]{padding-inline:12px 8px !important;border-radius:10px}

/*
 * The Chief's crown and frame (the Founder, 17 October 2026: "the crown in the header matches the colour I chose in
 * Appearance"; the Chief's badge and the frame around it default to it too). ONE helper: `--chief-ink` (the crown, the
 * Chief line, the badge) and `--chief-frame` (the ring, the tab) are the person's Action color (--purple, light and dark;
 * terminal-next.css, home-details.css). Every crown and frame in the product reads those two and nothing else.
 *
 * Where the person chose "Match {name}'s colour" on the Chief's Agent colour sheet (agent-colour.js paintChief, kept per
 * Seat, 0244) and the Chief has a colour, the same two take it: its readable shade, the words and crown on the filled tab
 * in the colour that reads on it; in dark the colour's light shade. The top bar's crown is the person's Action color
 * either way.
 */
:root body[data-chief-colour]{--chief-ink:var(--chief-colour)}
:root body[data-chief-colour][data-theme=dark]{--chief-ink:var(--chief-colour-dark)}
:root body[data-chief-colour] .chief-frame{--chief-frame:var(--chief-colour)}
:root body[data-chief-colour][data-theme=dark] .chief-frame{--chief-frame:var(--chief-colour-dark)}
:root body[data-chief-colour]:not([data-theme=dark]) .chief-frame>.primary-tab,:root body[data-chief-colour]:not([data-theme=dark]) .chief-frame>.primary-tab .primary-crown{color:var(--chief-on)}
/* The round badges that carry the crown on a face in a call are white in light; in dark the page's own surface, so a light accent reads on them. */
:root body[data-theme=dark] .call-pill-crown,:root body[data-theme=dark] .group-call-crown,:root body[data-theme=dark] .call-people-crown{background:var(--surface,#1e2028)}

/* The crown in the top bar is the person's Action color, light and dark (Graphite, Black, purple, whatever they chose). */
:root .topbar .chief-crown,:root .topbar [data-chief-crown]{color:var(--purple,#6d28b5)}

/*
 * The tab row on an agent's page (the Founder, 17 October 2026, his iPhone: the chosen pill was grey): the pill is a light
 * tint of the agent's colour, the family of the page behind it; in dark a deep one. The track, its hairline and the round
 * shape stay Muse's (tab-row.css, linked after this file, only defines the neutral default).
 */

/* The org chart's "Chief · coordinating everyone" line and its crown, in the Chief's colour where one is chosen. */
:root body[data-chief-colour] .org-world .org-node.chief .org-chief-type,:root body[data-chief-colour] .org-world .org-node.chief .org-chief-type .primary-crown{color:var(--chief-ink)}
:root body[data-chief-colour] .org-world .org-node.chief{border-color:var(--chief-ink)!important}

/* Every form control in a dialog takes the person's accent, whatever page opened it (checkbox, radio, range; the browser's own blue otherwise). */
#terminal-dialog :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--purple,#6d28b5)}
#terminal-dialog :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--purple,#6d28b5)}

:root body[data-agent-page]:not([data-theme=dark]){--tab-pill:color-mix(in srgb,var(--agent-accent) 13%,#fff)}
:root body[data-agent-page][data-theme=dark]{--tab-pill:color-mix(in srgb,var(--agent-ink-dark) 24%,var(--surface,#1e2028))}
/* The agent's name is large bold type, so it takes the colour's own deeper shade (3:1 is enough for it), which keeps a
   yellow golden where the 4.5:1 shade for small words has to go dark. */
:root body[data-agent-page]:not([data-theme=dark]) .agent-heading h1{color:var(--agent-accent)}