/*
 * The Terminal's shape (the Founder, 7 October 2026): "All of our buttons are pill-shaped, like 'Am I a human? Am I an
 * agent?'… Nothing is squared." Every button and button-like control is a pill, as on the site before sign-in
 * (site-layer-1.css .entry-button, pages-3.css .filter-tabs): radius 999px; a control with only an icon is a circle.
 * Choice cards (a radio card with a title and a line under it) stay cards; inputs keep the site's rounded field.
 * And status is a mark, never a button: a white hairline pill with a dot before its word, purple belonging to buttons.
 * Linked last in the Terminal's and Studio's index.html, so each rule here wins at the specificity it restates.
 */

/* ---- Buttons ---- */
.btn,.btn.small,.btn.primary,.btn.danger,a.btn{border-radius:999px}
.cover-editor-pick .btn{border-radius:999px}
:is(.harmony-add-agent,.harmony-identity-edit) .ha-button{border-radius:999px}
.harmony-copy-dialog [data-copy-sentence],.harmony-copy-dialog [data-action="close-dialog"]{border-radius:999px}
.agent-authority .auth-choice{border-radius:999px}
.quick-access a{border-radius:999px}
.badge{border-radius:999px}
/*
 * A pill's words on its middle (the Founder, 7 October 2026: Quick task's label sat high in its pill). The Terminal's
 * font holds all its spare height under the letters (ascent 0.74em, the capitals' height; descent 0.26em), so a line
 * box centred in the pill drew the capitals 0.13em above its middle. The label's box is its capitals' height instead,
 * as Home's titles are (home-arrange.css); where a browser cannot trim, the words move down by that 0.13em.
 */
.btn>.button-label{text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){.btn>.button-label{position:relative;top:.13em}}

/* Segmented controls and tab-like choices: the track and each choice. */
.segmented,.segmented button,
.scope-tabs,.scope-tabs button,
.gh-choice,.gh-choice-option span,
.view-toggle{border-radius:999px}
/* List or grid: a pill track holding two round choices, as the site's billing toggle. */
.view-toggle{padding:3px;gap:2px}
.view-toggle button{width:36px;height:36px;border-radius:50%}
.view-toggle button+button{border-inline-start:0}
.chart-legend>button,
.activity-categories button,
.analytics-filterbar summary,
.brief-check,
.notice-kinds .notice-where,
.accent-option{border-radius:999px}
/* attachments.css is added by its script after this sheet, so its chip is answered one step stronger. */
body .attach-chip{border-radius:999px}

/* Search, as the site's search line. */
.search-trigger,.list-search-field,.sample-search,.network-search96 .search-field{border-radius:999px}
.search-trigger kbd{border-radius:999px;padding-inline:6px}

/* Icon-only controls: circles. */
.icon-button,
.list-search-toggle,.list-filter-open,.list-search-close,
:is(.harmony-add-agent,.harmony-identity-edit) .ha-close,
.inbox-act,
.home-grip{border-radius:50%}

/* ---- Status: a mark, never a button ----
 * The coloured dot is an agent's connection and nothing else (the Founder, 7 October 2026, 22:20 and 22:40: "The status
 * of an agent, online, offline, that's one thing, with its symbol. You can't use the same thing for Done"): the Online,
 * Offline and Invited pill. Every other status pill says its word alone; a task's state is its own icon and word
 * (task-filter.js statusBadge); Needs you is a state, red words and the arrow; a priority is a flag.
 */
/* The dot's colour, one per tone (terminal-status.js stateColor). */
.badge.status-badge{--status-dot:#9aa2b1}
.badge.status-badge.state-complete{--status-dot:#16c784}
.badge.status-badge.state-active{--status-dot:#8b3dff}
.badge.status-badge.state-pending{--status-dot:#ff931f}
.badge.status-badge.state-attention{--status-dot:#f04458}

.badge.status-badge[class*=state-],.badge.status-badge,
.agent-connection[data-state]{
 display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;min-width:0;
 padding-inline-start:8px;padding-inline-end:10px;
 border:1px solid var(--line,#e7e5ee);border-radius:999px;
 background:#fff;background-image:none;color:#24212d;box-shadow:none;
 font-weight:600;white-space:nowrap;overflow:visible;cursor:inherit;transition:none
}
.badge.status-badge[class*=state-]::before,.badge.status-badge::before{content:none;display:none;animation:none}
.status-badge:not(.agent-connection)::before{content:none!important;display:none!important}
.badge.status-badge[class*=state-]:not(.agent-connection),.badge.status-badge:not(.agent-connection){padding-inline-start:10px}
.badge.status-badge.agent-connection[data-state]::before{
 content:"";flex:none;position:static;display:block;width:8px;height:8px;margin:0;
 border-radius:50%;background:var(--status-dot);box-shadow:none;animation:none
}
.badge.status-badge[class*=state-]::after,.badge.status-badge::after{content:none;display:none;animation:none}
[data-theme=dark] .badge.status-badge[class*=state-],[data-theme=dark] .badge.status-badge,
[data-theme=dark] .agent-connection[data-state]{background:var(--surface,#1e2028);color:var(--ink,#f0f1f5);border-color:var(--line,#353843)}

/* A task's state: its icon and its word in muted ink, no pill, no dot; Done's check alone in the success colour. */
.task-state{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:0;border:0;background:none;color:var(--muted,#686577);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.task-state-icon{flex:none;width:16px;height:16px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.task-state-icon .task-state-fill{fill:currentColor;stroke:none}
.task-state[data-task-status=done]>.task-state-icon{color:var(--green,#16794d)}
[data-theme=dark] .task-state[data-task-status=done]>.task-state-icon{color:#4ade80}
.task-state::before,.task-state::after{content:none;display:none}

/* Needs you: red words and the arrow, no dot, no pill; on an agent's row (.agent-needs) and anywhere else (.needs-you). */
.needs-you{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--red,#bd3551);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.needs-you>.icon{flex:none;width:12px;height:12px;margin-inline-start:-1px;stroke-width:2.4;color:inherit;stroke:currentColor}
.needs-you::before,.needs-you::after,.agent-needs::before,.agent-needs::after{content:none!important;display:none!important}
[data-theme=dark] .needs-you{color:#ff9aaa}

/* In an agent's row the line is shared with its role and Working: the pill keeps its dot and gives up some air. */
.agent-compact-meta>.badge.status-badge[class*=state-]{gap:4px;padding-inline-start:5px;padding-inline-end:7px;font-size:11px}
.agent-compact-meta>.agent-activity{font-size:11px}

/* On a phone, an agent page's name and its Chat and Call leave the status a dot and its word, without the outline. */
@media (max-width:480px){
 .page-heading.agent-heading .agent-name-line>.badge.status-badge[class*=state-]:not([data-state=disconnected]){gap:5px;padding-inline-start:0;padding-inline-end:0;border-color:transparent;background:none}
 [data-theme=dark] .page-heading.agent-heading .agent-name-line>.badge.status-badge[class*=state-]:not([data-state=disconnected]){border-color:transparent;background:none}
}

/*
 * The connection mark (the Founder, 7 October 2026): Online, Offline, Invited, a white pill with its dot. The chip is
 * `.badge.status-badge.agent-connection[data-state]` (terminal-ui.js agentChip); the Connection tab's own container is
 * also called .agent-connection, without a state, and is left alone.
 */
.badge.status-badge.agent-connection[data-state]::before{background:#9aa2b1}
.badge.status-badge.agent-connection[data-state=online]::before{background:#16c784}
/* The states (the Founder, 8 October 2026; 10 October 2026, 01:38): Online green, Offline orange, Connecting orange with its
   dot blinking, Unresponsive red, Connection lost filled red with white text. */
.badge.status-badge.agent-connection[data-state=offline]::before{background:#ff931f}
/* Waiting for an on-demand runtime is not a connection fault. */
.badge.status-badge.agent-connection[data-state=offline][data-on-demand]::before{background:#9aa2b1}
.badge.status-badge.agent-connection[data-state=unresponsive]::before{background:#f04458}
.badge.status-badge.agent-connection[data-state=disconnected]::before{background:#fff}
.badge.status-badge.agent-connection[data-state=unresponsive]{color:#b4203a;border-color:#f7c2cb}
.badge.status-badge.agent-connection[data-state=disconnected]{color:#fff;background:#b4203a;border-color:#b4203a}
[data-theme=dark] .badge.status-badge.agent-connection[data-state=unresponsive]{color:#ff9aaa;border-color:#6e2531}
[data-theme=dark] .badge.status-badge.agent-connection[data-state=disconnected]{color:#fff;background:#b4203a;border-color:#b4203a}

/* The activity mark, only while the agent works: "Working", plain and muted, and three moving dots after it; no pill. */
.agent-activity{gap:4px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--muted,#686577);font-weight:500}
.agent-activity::before,.agent-activity::after{content:none}
.agent-activity .work-dots i{background:var(--purple,#6d28b5)}
@media (prefers-reduced-motion:reduce){.agent-activity .work-dots i,.work-dots i{animation:none;opacity:1}}
.reduced-motion .work-dots i{animation:none;opacity:1}

/* A heading that takes focus when a sheet opens is where a screen reader starts, not a control: no ring around it (the Founder, 10 October 2026, 06:02: "Remove rectangle"). */
:is(h1,h2,h3)[tabindex="-1"]:focus,:is(h1,h2,h3)[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}