/* Integrations > Apps, the account sessions menu and the run's app tool calls (program B-E, W6-MP-WEB3). Sendplane tokens only: no raw colour,
 * no inline style, no theme selector. State is always carried by a word (Read only, Waiting for approval, This device ...); tone only reinforces it. */

.apps-content { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-6); }
.apps-content > *, .apps-body > *, .apps-editor > * { margin: 0; min-width: 0; }
.apps-body, .apps-editor { display: grid; gap: var(--space-4); }
.apps-agent { max-width: 420px; }
.apps-agent .form-select { width: 100%; }
h2#apps-title:focus-visible, .apps-review h3:focus-visible, #apps-problems:focus-visible, #apps-save-error:focus-visible, #apps-save-error-edit:focus-visible, #apps-saved:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-hairline); }

.apps-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); background: var(--surface-primary); min-width: 0; }
.apps-card > * { margin: 0; min-width: 0; }
.apps-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.apps-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 14px; line-height: 1.5; cursor: pointer; min-width: 0; }
.apps-check input { margin-top: 4px; flex: none; }
.apps-check input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.apps-check-change { font-size: 13px; }
.apps-version { color: var(--fg-secondary); font-size: 11px; font-weight: 450; }
.apps-label { margin: 0; color: var(--fg-secondary); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.apps-reads, .apps-changes, .apps-approval { display: grid; gap: var(--space-2); }
.apps-reads > *, .apps-changes > *, .apps-approval > * { margin: 0; min-width: 0; }
.apps-ops { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: 13px; }
.apps-ops li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.apps-ops small { flex-basis: 100%; color: var(--fg-secondary); font-size: 11px; }
.apps-fieldset { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.apps-fieldset > * { margin: 0; }
.apps-fieldset legend { padding: 0; margin-bottom: var(--space-2); }
.apps-approval { max-width: 520px; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.apps-approval .form-input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.apps-ttl .form-input { max-width: 120px; }

.apps-review { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--info-border); border-radius: var(--radius-callout); background: var(--info-bg); color: var(--fg-primary); font-size: 13px; line-height: 1.5; }
.apps-review > * { margin: 0; min-width: 0; }
.apps-review h3 { font-size: 15px; }
.apps-review-list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.apps-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
#apps-problems ul { margin: 0; padding-left: var(--space-5); }
#apps-problems a { color: inherit; text-decoration: underline; }

/* Account sessions: a disclosure inside the account popover, so it keeps the popover's own scale. */
.account-sessions { gap: var(--space-2); }
.account-sessions > * { margin: 0; min-width: 0; }
.account-sessions-toggle { min-height: var(--control-height); display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 9px; border: 0; border-radius: var(--radius-control); color: var(--muted); background: transparent; text-align: left; cursor: pointer; font-size: 12px; font-weight: 580; }
.account-sessions-toggle svg { width: 15px; height: 15px; flex: none; }
.account-sessions-toggle small { margin-left: auto; color: var(--quiet); font-size: 11px; font-weight: 450; }
.account-sessions-toggle:hover { color: var(--ink); background: var(--soft); }
.account-sessions-toggle:focus-visible, .account-session-confirm h4:focus-visible, #account-sessions-error:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.account-sessions-panel { display: grid; gap: var(--space-2); padding: var(--space-2) 9px var(--space-1); }
.account-sessions-panel > * { margin: 0; min-width: 0; }
.account-session-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.account-session { display: grid; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-callout); background: var(--surface-primary); min-width: 0; }
.account-session-main { display: grid; gap: 2px; min-width: 0; font-size: 12px; }
.account-session-main strong { overflow-wrap: anywhere; }
.account-session-main small { color: var(--fg-secondary); font-size: 11px; }
.account-session-main .status { justify-self: start; }
.account-session-confirm { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--info-border); border-radius: var(--radius-callout); background: var(--info-bg); font-size: 12px; line-height: 1.5; }
.account-session-confirm > * { margin: 0; }
.account-session-confirm h4 { font-size: 13px; }
.account-session-confirm ul { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.account-session-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* App tool calls in the run detail. */
.run-tools { display: grid; gap: var(--space-3); }
.run-tools > *, .run-tools-body > * { margin: 0; min-width: 0; }
.run-tools h3 { font-size: 15px; }
.run-tools-body { display: grid; gap: var(--space-3); }
.run-tool-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.run-tool { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-callout); background: var(--surface-primary); min-width: 0; }
.run-tool > * { margin: 0; min-width: 0; }
.run-tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.run-tool-head strong { overflow-wrap: anywhere; }
.run-tool-approval { display: grid; gap: var(--space-1); justify-items: start; padding-left: var(--space-3); border-left: 2px solid var(--border-default); }
.run-tool-approval > * { margin: 0; }
.run-tool-times { margin: 0; padding: 0; list-style: none; color: var(--fg-secondary); font-size: 12px; }
.run-tool-refs summary { cursor: pointer; font-size: 12px; font-weight: 650; }
.run-tool-refs summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-hairline); }
.run-tool-refs .metadata-grid { margin-top: var(--space-2); }

@media (max-width: 640px) {
  .apps-content { padding: var(--space-3); }
  .apps-card { padding: var(--space-3); }
  .apps-actions .button { flex: 1 1 100%; }
}