/* /agents: five personal agents side by side (agents.html, written by
   scripts/agent-capabilities/page.mjs). One <table> where five columns fit,
   one card per agent where they do not; the same cells in both. */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the secondary ink at .68, as .ent-page and the home page set it for contrast */
.pa { --ink-secondary: rgba(28, 31, 28, .68); }

.pa-compare { padding: 8px 0 0; }

/* a mark: the org chart's own (org-chart.css), its initial under it for a
   deploy without public/agents/ */
.pa-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; flex: none; }
.pa-mark > * { grid-area: 1 / 1; }
.pa-mark img { width: 100%; height: 100%; object-fit: contain; }
.pa-mark .pa-initial { font: 500 34px/1 var(--font-serif); color: var(--moss); visibility: hidden; }
.pa-mark:has(img[data-missing]) { background: var(--moss-badge); }
.pa-mark:has(img[data-missing]) .pa-initial { visibility: visible; }
.pa-mark img[data-missing] { visibility: hidden; }
.pa-mark-muse img { object-fit: cover; border-radius: 50%; }
.pa-mark-dot img { transform: scale(1.3); }
.pa-mark-duet img { transform: scale(1.25); }
.pa-mark-instinct { background: #fff; box-shadow: 0 0 0 1px var(--ink-border-soft), 0 6px 14px rgba(28, 31, 28, .12); }
.pa-mark-instinct .pa-initial { visibility: visible; color: #000; font-size: 40px; }
.pa-grok { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(28, 31, 28, .22)); }
.pa-grok path { fill: #f9f9f9; }
.pa-blink { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pa-blink { animation: pa-blink 3.7s linear 1.2s infinite; }
}
@keyframes pa-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }

.pa-name { display: block; font: 600 17px/22px var(--font-system); color: var(--ink); }
.pa-maker { display: block; font: 400 13px/18px var(--font-system); color: var(--ink-secondary); }

/* a cell: its mark, then its words. Four marks told apart by shape: a filled
   check, an outlined check, a cross, a question mark, in the site's two inks */
.pa-cell { display: flex; align-items: flex-start; gap: 8px; }
.pa-main { display: block; font: 500 14px/19px var(--font-system); color: var(--ink); }
.pa-sub { display: block; margin-top: 2px; font: 400 13px/17px var(--font-system); color: var(--ink-secondary); }
.pa-unk .pa-main { font-weight: 400; color: var(--ink-secondary); }
.pa-icon { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; flex: none; }
.pa-icon svg { width: 12px; height: 12px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pa-yes .pa-icon { background: var(--moss); }
.pa-yes .pa-icon svg { stroke: #fff; }
.pa-part .pa-icon { box-shadow: inset 0 0 0 1.6px var(--moss); }
.pa-part .pa-icon svg { stroke: var(--moss); }
.pa-no .pa-icon { background: rgba(28, 31, 28, .12); }
.pa-no .pa-icon svg { stroke: var(--ink-secondary); }
.pa-unk .pa-icon { box-shadow: inset 0 0 0 1.4px var(--ink-tertiary); }
.pa-unk .pa-icon svg { stroke: var(--ink-secondary); stroke-width: 1.8; }
.pa sup { position: relative; top: -.45em; margin-left: 2px; font: 600 10px/0 var(--font-system); color: var(--moss); vertical-align: baseline; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pa-chips li { padding: 5px 8px; border-radius: 999px; background: var(--moss-badge); font: 500 12px/1 var(--font-system); color: var(--moss); white-space: nowrap; }

/* the table, where five columns fit */
.pa-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pa-table thead td { width: 150px; border-top: 0; }
.pa-table thead th { padding: 0 8px 22px; vertical-align: top; font-weight: inherit; }
/* one left edge per column: the mark is 18 px and an 8 px gap, so the head
   and the chips start 26 px in, where every cell's words start */
.pa-table .pa-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 26px; text-align: left; }
.pa-table .pa-chips, .pa-card .pa-chips { padding-left: 26px; }
.pa-table .pa-group th { padding: 30px 0 8px; border-top: 1px solid var(--ink); text-align: left; font: 500 20px/26px var(--font-serif); color: var(--ink); }
.pa-table tbody th[scope="row"] { padding: 14px 12px 12px 0; text-align: left; vertical-align: top; font: 700 11px/15px var(--font-system); letter-spacing: var(--tracking-section); text-transform: uppercase; color: var(--moss); }
.pa-table td { padding: 12px 8px; vertical-align: top; border-top: 1px solid var(--ink-border-soft); }
.pa-table tbody th[scope="row"] { border-top: 1px solid var(--ink-border-soft); }
.pa-table .pa-group + tr > th[scope="row"], .pa-table .pa-group + tr > td { border-top: 0; }

/* the cards, where they do not */
.pa-cards { display: none; }
.pa-card { padding: 20px 20px 12px; border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px var(--ink-border-soft), 0 8px 24px rgba(28, 31, 28, .05); }
.pa-card .pa-head { display: flex; align-items: center; gap: 14px; }
.pa-card .pa-mark { width: 56px; height: 56px; }
.pa-card .pa-head { gap: 18px; }
.pa-card .pa-mark-dot img { transform: scale(1.2); }
.pa-card .pa-mark-instinct .pa-initial { font-size: 31px; }
.pa-card h3 { margin: 18px 0 4px; font: 500 18px/24px var(--font-serif); color: var(--ink); }
.pa-card dl { margin: 0; }
.pa-card dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--ink-border-soft); }
.pa-card dl > div:first-child { border-top: 0; }
.pa-card dt { font: 700 11px/15px var(--font-system); letter-spacing: var(--tracking-section); text-transform: uppercase; color: var(--moss); padding-top: 2px; }
.pa-card dd { margin: 0; }

.pa-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 24px 0 0; padding: 0; list-style: none; font: 400 13px/18px var(--font-system); color: var(--ink-secondary); }
.pa-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pa-legend .pa-icon { margin: 0; }
.pa-legend sup { margin: 0; }

.pa-sources { padding: 96px 0 0; }
.pa-source-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 24px; }
.pa-source-grid h3 { margin: 0 0 8px; font: 600 15px/20px var(--font-system); }
.pa-source-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pa-source-grid a { font: 400 14px/20px var(--font-system); color: var(--ink-secondary); }
.pa-source-grid a:hover { color: var(--moss); }

@media (max-width: 1060px) {
  .pa-table { display: none; }
  .pa-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; }
  .pa-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pa-source-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Full comparison: the points past the key ones, closed until asked for */
.pa-full { margin: 40px 0 0; border-top: 1px solid var(--ink); }
.pa-full > summary { display: flex; align-items: baseline; gap: 14px; padding: 22px 0; cursor: pointer; list-style: none; }
.pa-full > summary::-webkit-details-marker { display: none; }
.pa-full > summary > span:first-child { font: 500 24px/30px var(--font-serif); color: var(--ink); }
.pa-full > summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; align-self: center; border-right: 2px solid var(--moss); border-bottom: 2px solid var(--moss); transform: rotate(45deg); transition: transform 160ms; }
.pa-full[open] > summary::after { transform: rotate(-135deg); }
.pa-count { font: 400 14px/20px var(--font-system); color: var(--ink-secondary); }
.pa-full > summary:hover > span:first-child { color: var(--moss); }
.pa-rest thead th { padding-bottom: 6px; }
.pa-rest .pa-head { gap: 0; }
.pa-rest .pa-group:first-child th { padding-top: 14px; }
.pa-key tbody tr:first-child > * { border-top: 1px solid var(--ink); }