/**
 * @file agents-poster.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description Settings & Controls > Agents in the poster face (agp- prefix; design canvas "Your
 *   Agents", header option B). The shapes come from poster.css and organism.css's og- rules and are
 *   composed in the markup (poster-row--thing, poster-tab, poster-choice, poster-sticker, og-input,
 *   og-choice, og-chip, og-door, og-slab, og-label); this file carries only what the agents page
 *   adds: the layout of the form, the table, the opened agent's masthead, the tab groups, and the
 *   skin the connect guide and the older tab parts wear inside it. NOTE: linked in spa.html after
 *   organism.css (useViewCSS is a no-op).
 * @version-history
 *   v1.0.0 -- 2026-09-14 -- Initial: the page anatomy, the form, the table, the card masthead.
 */

.og-agp.og { --poster-page-size: 2.8rem; --poster-section-size: 1.6rem; }
.og-agp .og-title small { font-family: var(--font-mono); font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.og-agp .og-sec-h .og-door--quiet { margin-left: auto; }
/* A folded section shows one line under its slab and nothing else. */
.agp-folded { margin: 0; font-size: .95rem; line-height: 1.6; font-weight: 600; color: var(--text-dim); }
.agp-ok { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; color: var(--success-fg, #047857); }
.agp-warn { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; color: var(--accent); }
.agp-hint { margin: .6rem 0 0; font-size: .85rem; line-height: 1.5; font-weight: 600; color: var(--text-dim); }
.agp-lead { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.6; }

/* ── 01 The two basic agents: one row each ─────────────────────────────────────────────────── */
.agp-basic-list { list-style: none; margin: .8rem 0 0; padding: 0; }
.agp-basic-row { display: grid; grid-template-columns: 2rem minmax(9rem, 12rem) minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
.agp-basic-row i { font-family: var(--font-mono); font-size: .78rem; font-style: normal; color: var(--accent); }
.agp-basic-who { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; min-width: 0; }
.agp-basic-name { font-weight: 800; }
.agp-basic-desc { min-width: 0; font-size: .9rem; font-weight: 500; color: var(--text-dim); line-height: 1.45; }
.agp-basic-desc small { display: block; font-size: .8rem; margin-top: .15rem; }
.agp-basic-row .og-fold-r { margin-left: 0; }
.agp-basic-notice { margin: .8rem 0 0; font-size: .88rem; line-height: 1.5; font-weight: 600; }
.agp-basic-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── 02 The form: a label column, underlined fields ────────────────────────────────────────── */
.agp-form { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: 1.1rem 1.5rem; align-items: start; margin-top: .4rem; }
.agp-form-k { padding-top: .5rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.agp-form-k small { display: block; font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-dim); margin-top: .15rem; line-height: 1.4; }
.agp-form-v { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.agp-form-v .og-input::placeholder, .agp-form-v .og-textarea::placeholder { color: var(--text-dim); font-weight: 600; }
.agp-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.agp-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4rem; padding-top: .6rem; }
/* The agents the person's own agents have proposed, and the ones nothing is running. */
.agp-waiting { margin-top: 1.4rem; padding-top: .8rem; }
.agp-waiting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.agp-waiting-row > div { min-width: 0; flex: 1 1 20rem; }
.agp-waiting-name { font-weight: 800; font-size: .95rem; }
.agp-waiting-desc { font-size: .9rem; color: var(--text-dim); line-height: 1.45; margin-top: .15rem; }
.agp-waiting-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); margin-top: .3rem; }
.agp-waiting-actions { display: flex; align-items: center; gap: 1.2rem; flex: none; padding-top: .3rem; }
.agp-attach { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; font-weight: 600; }

/* ── 03 Connect: the guide's own parts, lined up with the page ─────────────────────────────── */
.agp-connect .ast-lead { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.6; }
.agp-connect .ast-tools { display: flex; gap: 1.4rem; row-gap: .8rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.agp-connect .ast-tool-reco { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); }
.agp-connect .is-on .ast-tool-reco { color: var(--on-sun); }
.agp-connect .ast-plans, .agp-connect .ast-warn, .agp-connect .ast-note { margin: .6rem 0 0; font-size: .85rem; line-height: 1.5; font-weight: 600; color: var(--text-dim); }
.agp-connect .ast-warn { color: var(--accent); }
.agp-connect .ast-steps { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: agp-step; }
.agp-connect .ast-steps li { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 600; line-height: 1.4; counter-increment: agp-step; }
.agp-connect .ast-steps li::before { content: counter(agp-step, decimal-leading-zero); font-family: var(--font-mono); font-size: .78rem; color: var(--accent); flex: 0 0 2rem; }
.agp-connect .ast-cmd { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0; }
.agp-connect .ast-cmd-text { flex: 1 1 0; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.agp-connect .ast-params-head { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.agp-connect .ast-param { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .2rem 1.2rem; align-items: baseline; padding: .4rem 0; }
.agp-connect .ast-param-label { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding-top: .25rem; }
.agp-connect .ast-param-value { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; min-width: 0; }
.agp-connect .ast-code { font-family: var(--font-mono); font-size: .82rem; background: var(--bg-surface); padding: 2px 6px; overflow-wrap: anywhere; }
.agp-connect .ast-param-empty { font-style: italic; color: var(--text-muted); }
.agp-connect .ast-param-note { grid-column: 2; font-size: .82rem; color: var(--text-dim); line-height: 1.45; }
.agp-connect .ast-docs { display: inline-block; margin-top: .9rem; font-weight: 800; font-size: .88rem; color: var(--text); text-decoration: none; border-bottom: 2px solid var(--text); }
.agp-connect .ast-docs:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* The guide's and the folds' buttons become the page's words. */
.agp-connect .btn-primary, .agp-connect .btn-ghost, .agp-connect .btn-outline, .agp-connect .expand-btn { background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; padding: 0 0 1px; cursor: pointer; font-family: var(--font-showroom-body); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text); box-shadow: none; }
.agp-connect .btn-primary:hover, .agp-connect .btn-ghost:hover, .agp-connect .btn-outline:hover, .agp-connect .expand-btn:hover { color: var(--accent); border-bottom-color: var(--accent); background: none; transform: none; }
.agp-connect-folds { margin-top: 1.6rem; }
.agp-connect-folds .og-fold-sec { padding: 0; border-top: 0; }
.agp-connect-folds .og-fold--toggle { border-bottom: 1px solid var(--border); }
.agp-connect-folds .og-fold--toggle i { display: none; }
.agp-connect-folds .og-fold-arrow { margin-left: auto; }
.agp-connect-folds .og-fold-body { padding: .2rem 0 1.2rem; }
.agp-connect-folds .agent-prompt-box { border-radius: 0; color: var(--text); }
.agp-connect-folds .btn-primary { margin-top: .2rem; }
.agp-connect-folds .og-input { max-width: 24rem; }
.agp-connect-folds .pf-gh-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--text); text-decoration: none; border-bottom: 2px solid var(--text); }
.agp-connect-folds .pf-gh-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 04 The agents: the search, the quiet filter line, the table ───────────────────────────── */
.agp-search { position: relative; margin-bottom: .8rem; }
.agp-search .og-input::placeholder { color: var(--text-dim); }
.agp-search-count { position: absolute; right: 0; top: .5rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); }
.agp-filters { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: .8rem; }
.agp-filters .og-label { flex: none; }
.agp-filters-groupby { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.agp-filters select { border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; padding: .1rem 0; font: inherit; font-weight: 700; font-size: .8rem; color: var(--text); }
.agp-filters button.og-chip { cursor: pointer; background: none; }
.agp-filters button.og-chip:hover { border-color: var(--accent); color: var(--accent); }
/* Five columns: the platform rides as a chip beside the name, because the main column beside the
   rail is 650px at 1280 and a sixth column left the name three characters. */
.agp-tbl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem) minmax(0, 6.5rem) minmax(0, 7.5rem) 3rem; gap: 0 1rem; align-items: center; }
.agp-tbl > div { padding: 0 0 .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
/* One rule under the whole row, not one under each cell: cells of different heights drew their
   lines at different depths and the columns read as loose. */
.agp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem) minmax(0, 6.5rem) minmax(0, 7.5rem) 3rem; gap: 0 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.agp-row > div { min-width: 0; }
.agp-row:hover .agp-nm-text { color: var(--accent); }
.agp-row--problem .agp-nm-text { color: var(--accent); }
.agp-nm { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 800; font-size: .95rem; }
.agp-nm small { display: block; flex-basis: 100%; font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agp-nm .og-chip { text-transform: none; }
.agp-nm .pf-agd-change-badge { width: 7px; min-width: 7px; height: 7px; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--text-dim); }
.agp-nm .pf-agd-change-badge--failed { background: var(--accent); }
.agp-w { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agp-m { font-family: var(--font-mono); font-size: .75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agp-go { text-align: right; }
.agp-go .og-door { font-size: .72rem; }
.agp-group-head { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0 .4rem; padding: .6rem 0 .35rem; font-weight: 800; font-size: .95rem; }
.agp-group-head .og-chip { text-transform: none; }
.agp-group-count { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); }
.agp-group-empty { padding: .6rem 0; font-size: .85rem; color: var(--text-dim); }
.agp-group-bar { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.agp-group-hint { font-size: .8rem; color: var(--text-dim); }
.og-agp .pf-agd-dnd-row { position: relative; }
.og-agp .pf-agd-dnd-grip { position: absolute; left: -1.3rem; top: .6rem; }
.og-agp .pf-agd-cgroup-name-input { border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; font: inherit; font-weight: 800; }
.og-agp .pf-agd-active { margin: 0 0 1.4rem; }
.og-agp .pf-agd-active .poster-section-title { font-size: 1rem; padding: .35rem .7rem .3rem; border-bottom-width: 4px; }

/* ── The opened agent: masthead B ──────────────────────────────────────────────────────────── */
.agp-card { padding: 1.1rem 0 1.5rem; border-bottom: 2px solid var(--text); margin-bottom: .6rem; }
.agp-mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; cursor: pointer; }
.agp-words { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.agp-title { overflow-wrap: anywhere; cursor: pointer; margin-bottom: 1rem; }
.agp-title .agp-caret { font-family: var(--font-showroom-body); font-size: .8rem; color: var(--sun); margin-right: .6rem; vertical-align: middle; }
.agp-id { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.agp-chips { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.agp-chips .og-chip { text-transform: none; }
.agp-chips button.og-chip { cursor: pointer; background: none; font-family: var(--font-mono); }
.agp-chips button.og-chip:hover { border-color: var(--accent); color: var(--accent); }
.agp-chip--ok { border-color: var(--success-fg, #047857); color: var(--success-fg, #047857); }
.agp-chip--warn { border-color: var(--accent); color: var(--accent); }
/* The badges the card helpers still return (platform, model, readiness) wear the chip. */
.agp-chips .pf-agd-badge { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: .68rem; line-height: 1.5; padding: 1px 7px; border: 2px solid var(--border); border-radius: 0; color: var(--text-dim); background: transparent; text-transform: none; }
.agp-chips .pf-agd-badge--readiness-full, .agp-chips .pf-agd-badge--readiness-advanced { border-color: var(--success-fg, #047857); color: var(--success-fg, #047857); }
.agp-chips .pf-agd-badge--readiness-onboarding { border-color: var(--text); color: var(--text); }
/* Tags ride in the same row; the add field is an underline. */
.agp-chips .pf-agd-tag-strip { display: contents; }
.agp-chips .pf-agd-tag-chip-remove { background: none; border: 0; padding: 0 0 0 .3rem; margin: 0; cursor: pointer; font: inherit; color: var(--text-dim); line-height: 1; }
.agp-chips .pf-agd-tag-chip-remove:hover { color: var(--accent); }
.agp-chips .pf-agd-tag-add-input { width: 8rem; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; padding: 0; font-family: var(--font-mono); font-size: .75rem; color: var(--text); }
.agp-chips .pf-agd-tag-add-input:focus { outline: none; border-bottom-color: var(--accent); }
/* The capabilities, opened from their chip: the row's whole width, under the chips. */
.agp-caps { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.agp-side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; flex: none; }
.agp-side .og-door--quiet { font-size: .85rem; }
.agp-side .agp-host { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
/* How it runs: one sentence and one door, or the switch when the door is open. */
.agp-runs { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding: .7rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: .92rem; font-weight: 600; }
.agp-runs .og-label { flex: none; }
.agp-runs .pf-agd-runmode { flex-basis: 100%; margin: .3rem 0 0; padding: 0; }
.og-agp .pf-agd-runmode-label { display: none; }
.og-agp .pf-agd-runmode-note { margin: .5rem 0 0; font-size: .85rem; line-height: 1.5; font-weight: 600; color: var(--text-dim); }
/* The status banner an agent carries while it is new, onboarding or in trouble. */
.og-agp .pf-agd-zone2 { margin-top: 1rem; }
.og-agp .pf-agd-zone2--production { display: none; }
.og-agp .pf-agd-zone2 .btn-primary, .og-agp .pf-agd-zone2 .btn-outline { background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; padding: 0 0 1px; font-family: var(--font-showroom-body); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text); box-shadow: none; }
.og-agp .pf-agd-zone2 .btn-primary:hover, .og-agp .pf-agd-zone2 .btn-outline:hover { color: var(--accent); border-bottom-color: var(--accent); background: none; transform: none; }
/* The tabs in three groups; the selected one on the sun. */
.agp-nav { display: flex; gap: 0 2rem; flex-wrap: wrap; margin-top: 1rem; padding-bottom: .2rem; }
.agp-nav-group { display: flex; flex-direction: column; gap: .5rem; padding: .4rem 0 .6rem; }
.agp-tabs { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; row-gap: .6rem; }
.agp-tabs .poster-tab { font-size: .8rem; letter-spacing: .03em; }
.agp-tabs .pf-agd-tab-badge { min-width: 7px; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 0; background: var(--text-dim); }
.agp-tabs .pf-agd-tab-badge--failed { background: var(--accent); }
.agp-panel { padding-block: .4rem .6rem; margin-top: .4rem; }
.og-agp .pf .pf-agd-tab-content, .og-agp .pf-agd-tab-content { padding: 0; min-height: 0; }

@media (max-width: 1100px) {
  .agp-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agp-tbl { display: none; }
  .agp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) 3rem; }
  .agp-row > .agp-w { display: none; }
  .agp-mast { flex-wrap: wrap; }
  .agp-side { align-items: flex-start; }
  .agp-nav { gap: 0 1.4rem; }
}
@media (max-width: 700px) {
  .agp-form { grid-template-columns: 1fr; gap: .4rem 0; }
  .agp-form-k { padding-top: .8rem; }
  .agp-choices { grid-template-columns: 1fr; }
  .agp-row { grid-template-columns: minmax(0, 1fr) 3rem; }
  .agp-row > .agp-m { display: none; }
  .agp-tabs { gap: .7rem; }
}