/**
 * @file profile-poster.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The poster skin of the machine room: every profile tab (agents and their detail
 *   tabs, organisms and workspaces, memory, knowledge, access, wallet, companies, portfolio and
 *   the rest) and the portfolio builder and viewer chrome, in the face the home, the settings
 *   overview and the chat already wear (design canvas "AIMEAT Home, Settings and Chat", direction
 *   C). Archivo Black headlines, Archivo body, ink rules instead of cards, the sun yellow for the
 *   selected thing, underlined words for the quiet actions and one ink slab for the loud one.
 *
 *   ONE FILE, LOADED LAST. The tabs are built from a small set of shared primitives (.card,
 *   .section-title, .btn-*, .input-field, .badge, tabs, list rows) plus a few per-tab shapes
 *   (.pf-agd-*, .pj-*, .mem-*, .tx-*, .portfolio-*). Restyling those here, after every view
 *   sheet, changes the whole machine room without touching twenty stylesheets, and keeps the
 *   old shapes exactly where they were for anyone who removes this link. Selectors keep the
 *   same specificity as the rules they replace (.pf .x), so the cascade order is what decides.
 *   The person's own portfolio page (the HTML their AI wrote) is not touched by this file: it
 *   renders in a sandboxed frame with its own stylesheet.
 * @usage Linked from public/spa.html after every other stylesheet.
 * @version-history
 *   v1.3.0 — 2026-08-29 — Section headlines (the title under a page title, the other tabs' own section
 *     titles, the dialog title, the builder's steps) wear --font-poster-section, Archivo's regular cut;
 *     the small coral labels stay at 700 whatever the emphasis token says.
 *   v1.2.0 — 2026-08-29 — The second tour: discover, ecosystem, skills, capabilities, libraries, extensions,
 *     packages, the AI provider settings and boards on the same four shapes.
 *   v1.1.0 — 2026-08-29 — Weights through the tokens (--font-poster-text-weight for running text,
 *     --font-poster-strong-weight for the emphasised words), so the reviewed canvas's lighter body
 *     text is one number in theme.css; sections and rows take more air; the other tabs' cards, rows,
 *     boxes and chips are mapped onto the four poster shapes.
 *   v1.0.0 — 2026-08-29 — Initial. A first cut shipped on 2026-08-28 before the designs were drawn and was
 *     reverted; this is the same skin, put back once the twelve machine-room boards were reviewed.
 */

/* ── Faces and the tab head ─────────────────────────────────────────────────────────────── */
.pf-content, .portfolio-container, .portfolio-viewer-full { font-family: var(--font-showroom-body); }
/* The tab head is the crumb ("Agents /", small mono in coral) and the tab's own first title is the
   page title in the Black face, as the canvas draws it: crumb above, headline under it, no rule
   between. Every later .section-title is a section headline in the regular cut. */
.pf-content-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.2rem; }
.pf .pf-back-current { font-family: var(--font-mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--accent); }
.pf .pf-back-current::after { content: ' /'; }
.pf .pf-content-body > .section-title:first-child, .pf .pf-content-body > *:first-child > .section-title:first-child,
.pf .pf-content-body > *:first-child > *:first-child > .section-title:first-child,
.pf .pf-content-body > *:first-child > h2:not([class]):first-child, .pf .pf-content-body > *:first-child > *:first-child > h2:not([class]):first-child {
  font-family: var(--font-poster); font-weight: var(--font-poster-weight);
  font-size: 2.8rem; line-height: 0.9; letter-spacing: -0.035em; margin-bottom: 0.6rem;
}
.pf .section-title, .portfolio-container h1 {
  font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight);
  font-size: 1.9rem; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--text); margin-bottom: 0.5rem;
}
.portfolio-container h1 { font-family: var(--font-poster); font-weight: var(--font-poster-weight); font-size: 3.4rem; letter-spacing: -0.035em; }
.pf .section-title.section-title-spaced { margin-top: 2.6rem; }
.pf .section-desc, .portfolio-subtitle-text { font-weight: 600; color: var(--text-dim); font-size: 0.92rem; }
.pf .card-h3, .pf .card-title, .pf .pf-agd-section-label, .pf .pf-agd-section-title, .pf .pj-section-title,
.pf .form-row label, .pf .detail-label, .pf .tx-detail-label, .pf .pj-field > span, .pf .pj-rec-field-label,
.pf .pf-co-field > span, .pf .pj-form-group, .portfolio-source-group summary {
  font-family: var(--font-showroom-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.4rem;
}
.pf .card-title { font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.pf .card-h3.access-h3 { color: var(--accent); }
.pf .card-subtitle { font-weight: 600; }

/* ── Cards become sections: a rule on top, the page behind them ────────────────────────── */
.pf .card, .pf .card.card-glass, .pf .pf-agd-card, .pj-section, .kpkg-card, .pf .wallet-card, .pf .key-rules-box,
.portfolio-step, .portfolio-instructions, .pf .pf-agd-webhook-form {
  background: none; border: 0; border-top: 3px solid var(--text); border-radius: 0; box-shadow: none;
  padding: 1.1rem 0 1.5rem; margin-bottom: 2rem;
}
.pf .card:hover, .pf .card.card-glass:hover { border-color: var(--text); box-shadow: none; transform: none; }
.pf .card-expanded { border-top-color: var(--accent); }
.pf .card-detail { border-top: 2px dashed var(--border); }
.pf .pf-agd-card + .pf-agd-card { margin-top: 0; }
.pf .pf-agd-card-grid { gap: 0 2rem; }
.pf .detail-grid { gap: 0 2rem; }
.pf .detail-item { background: none; border-radius: 0; border-top: 2px solid var(--text); padding: 0.55rem 0; }
.pf .detail-value { font-weight: var(--font-poster-text-weight); font-size: 0.92rem; }
.pf .empty, .portfolio-not-found { border: 3px dashed var(--text); border-radius: 0; font-weight: var(--font-poster-text-weight); color: var(--text); }

/* ── The loud action is an ink slab; the quiet ones are underlined words ────────────────── */
.pf .btn-primary, .portfolio-container .btn-primary, .portfolio-viewer-full .btn-primary, .pf-mnav-toggle {
  background: var(--text); color: var(--bg);
  border: 0; border-radius: 0; box-shadow: 4px 4px 0 var(--sun);
  padding: 10px 16px;
  font-family: var(--font-showroom-body); font-weight: var(--font-poster-strong-weight); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pf .btn-primary:hover, .portfolio-container .btn-primary:hover, .portfolio-viewer-full .btn-primary:hover {
  color: var(--sun); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sun);
}
.pf .btn-primary.success, .pf .btn-primary.copied { background: var(--success-fg); box-shadow: 4px 4px 0 var(--text); }
.pf .btn-primary:disabled { opacity: 0.45; transform: none; }
.pf .btn-outline, .pf .btn-ghost, .pf .btn-danger, .pf .expand-btn, .pf .pf-back-btn,
.portfolio-container .btn-outline, .portfolio-container .btn-ghost, .portfolio-viewer-full .btn-ghost, .portfolio-viewer-full .btn-outline {
  background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; box-shadow: none;
  padding: 0 0 1px; min-height: 0;
  font-family: var(--font-showroom-body); font-weight: var(--font-poster-strong-weight); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text); line-height: 1.5;
}
.pf .btn-outline:hover, .pf .btn-ghost:hover, .pf .expand-btn:hover, .pf .pf-back-btn:hover,
.portfolio-container .btn-outline:hover, .portfolio-container .btn-ghost:hover, .portfolio-viewer-full .btn-ghost:hover {
  background: none; color: var(--accent); border-color: var(--accent); box-shadow: none; transform: none;
}
.pf .btn-danger { color: var(--accent); border-color: var(--accent); }
.pf .btn-danger:hover { color: var(--danger); border-color: var(--danger); }
.pf .btn-outline.copied, .pf .btn-ghost.copied { color: var(--success-fg); border-color: var(--success-fg); }
.pf .btn-sm { padding: 0 0 1px; font-size: 0.74rem; }
.pf .btn-primary.btn-sm { padding: 7px 12px; }
.pf .card-actions, .pf .form-actions, .pf .pf-agd-form-actions, .portfolio-prompt-actions, .portfolio-paste-actions { gap: 0.6rem 1.6rem; align-items: center; }

/* ── Fields: an underline for one line, an ink box for many ────────────────────────────── */
.pf .input-field, .portfolio-container .input-field, .pf .input-sm, .pf .pf-agd-tag-add-input {
  background: transparent; border: 0; border-bottom: 3px solid var(--text); border-radius: 0;
  padding: 8px 0; font-family: var(--font-showroom-body); font-weight: var(--font-poster-text-weight); color: var(--text);
}
.pf .input-field:focus, .portfolio-container .input-field:focus { border-color: var(--accent); box-shadow: none; background: transparent; }
.pf .input-field::placeholder, .portfolio-container .input-field::placeholder { color: var(--text-dim); font-weight: 600; }
.pf textarea.input-field, .portfolio-container textarea.input-field, .portfolio-paste-area, .portfolio-custom-desc,
.pf select.input-field, .pf .agent-prompt-box, .pf .access-pat-token, .pf .pj-rec-json, .portfolio-prompt-output, .pf .pf-agd-tag-add-input {
  border: 2px solid var(--text); border-radius: 0; padding: 10px 12px; background: var(--bg-dim);
}
.pf select.input-field { background: var(--bg); padding: 8px 10px; }
.pf .pf-select-inline { border: 2px solid var(--text); padding: 6px 10px; }
.portfolio-paste-area, .portfolio-prompt-output { border-width: 3px; }
.portfolio-prompt-output { color: var(--text); }

/* ── Badges and chips: square, ink-framed, the colour kept ──────────────────────────────── */
.pf .badge, .pf .pill, .pf .vis-pill, .pf .pf-agd-badge, .pf .pf-agd-tag-chip, .pf .pf-agd-step-pill, .pf .pf-agd-cap-badge,
.pf .pf-agd-change-badge, .pf .pf-agd-tab-badge, .kpkg-badge, .pf .pf-co-badge, .pj-doc-tag, .pj-tab-pill, .pj-org-tab-unseen,
.pf .pf-psp-chip, .pf .pf-federation-badge {
  border-radius: 0; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0;
}
.pf .badge { border: 2px solid var(--text); background: transparent; color: var(--text); padding: 1px 7px; font-size: 0.66rem; }
.pf .badge-success { border-color: var(--success); color: var(--success-fg); }
.pf .badge-warn { background: var(--sun); border-color: var(--text); color: var(--on-sun); }
.pf .badge-danger { border-color: var(--accent); color: var(--accent); }
.pf .badge-info { border-color: var(--text); }
.pf .badge-muted { border-color: var(--border); color: var(--text-dim); }

/* ── Tabs inside a tab: underlined words, the open one on the sun ───────────────────────── */
.pf .tabs, .pf .sub-tabs, .pf .platform-tabs, .pf .pf-agd-tabs, .pj-org-tabs { gap: 0; border-top: 3px solid var(--text); border-bottom: 0; padding: 0; margin-bottom: 1.2rem; }
.pf .tab, .pf .sub-tab, .pf .platform-tab, .pf .pf-agd-tab, .pj-org-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 0.55rem 0.8rem; margin: 0;
  font-family: var(--font-showroom-body); font-weight: var(--font-poster-strong-weight); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim);
}
.pf .tab:hover, .pf .sub-tab:hover, .pf .platform-tab:hover, .pf .pf-agd-tab:hover, .pj-org-tab:hover { color: var(--text); background: none; border-color: transparent; }
.pf .tab.active, .pf .sub-tab.active, .pf .platform-tab.active, .pf .pf-agd-tab--active, .pj-org-tab.active {
  background: var(--sun); color: var(--on-sun); border-bottom-color: var(--text); font-weight: var(--font-poster-strong-weight);
}
.pj-org-group-cap { font-family: var(--font-showroom-body); font-weight: var(--font-poster-strong-weight); letter-spacing: 0.1em; color: var(--accent); }
.pj-org-group + .pj-org-group { border-left: 2px solid var(--text); }
.pf .pf-agd-tab-content { padding: 1rem 0; }

/* ── Lists: one rule per row, the row's own words in bold ───────────────────────────────── */
.pf .mem-item, .pf .tx-item, .pj-org-row, .pj-ws-card, .pf .pf-agd-collapsed, .pj-search-hit, .pf .mem-group-header,
.pf .pf-agd-info-row, .pf .kv-row, .pf .access-empty-row, .pj-doc-row, .pf .mem-search-summary {
  background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
  padding: 0.75rem 0; font-weight: var(--font-poster-text-weight);
}
.pf .mem-item:hover, .pf .tx-item:hover, .pf .mem-group-header:hover, .pf .pf-agd-collapsed:hover, .pj-search-hit:hover { background: none; color: var(--accent); }
.pj-org-list, .pf .tx-list, .pf .mem-list, .pf .pf-agd-list { gap: 0; border-top: 3px solid var(--text); }
.pj-org-row, .pj-ws-card, .pf .pf-agd-collapsed { border-bottom: 2px solid var(--text); padding: 0.75rem 0; }
.pf .pf-agd-collapsed-name, .pf .pf-agd-zone1-name, .pj-ws-card-name, .pj-search-hit-title { font-weight: var(--font-poster-strong-weight); font-size: 1.02rem; }
.pf .mem-key, .pf .mem-group-name, .pf .tx-amount, .pf .access-mono, .pf .tx-detail-value { font-family: var(--font-mono); }
.pf .mem-group-header { border-bottom: 2px solid var(--text); }
.pf .kv-value, .pf .pf-agd-info-value { font-weight: var(--font-poster-text-weight); }
.pf .kv-label, .pf .pf-agd-info-label { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 400; color: var(--text-dim); }
.pf .data-table th { font-weight: var(--font-poster-strong-weight); letter-spacing: 0.1em; color: var(--accent); border-bottom: 3px solid var(--text); font-size: 0.7rem; }
.pf .data-table td { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--border); }
.pf .data-table tr:hover td { background: none; color: var(--accent); }

/* ── An agent, opened: an ink frame with a sun shadow, its zones ruled inside ───────────── */
.pf .pf-agd-expanded { border: 3px solid var(--text); border-radius: 0; box-shadow: 8px 8px 0 var(--sun); background: var(--bg); }
.pf .pf-agd-zone2--new { border-left: 6px solid var(--sun); background: none; }
.pf .pf-agd-zone2--onboarding { border-left: 6px solid var(--text); background: none; }
.pf .pf-agd-zone2--problem { border-left: 6px solid var(--accent); background: none; }
.pf .pf-agd-zone2-title { font-weight: var(--font-poster-strong-weight); letter-spacing: 0.08em; }
.pf .pf-agd-card-footer { border-top: 2px solid var(--text); }
.pf .pf-agent-divider { border-top: 3px solid var(--text); }
.pf .agent-prompt-box { font-family: var(--font-mono); }

/* ── The fleet board above the agent list: a ruled grid of names, the state as a left stripe ── */
.pf .pf-agd-board, .pf .pf-agd-active { background: none; border: 0; border-top: 3px solid var(--text); border-radius: 0; padding: 0.9rem 0 0.5rem; }
.pf .pf-agd-board-card { background: none; border: 0; border-left: 6px solid var(--text-muted); border-bottom: 2px solid var(--text); border-radius: 0; padding: 0.5rem 0.75rem; }
.pf .pf-agd-board-card:hover, .pf .pf-agd-board-card:focus-visible { background: var(--sun); color: var(--on-sun); box-shadow: none; }
.pf .pf-agd-board-card:hover .pf-agd-board-card-name, .pf .pf-agd-board-card:focus-visible .pf-agd-board-card-name { color: var(--on-sun); }
.pf .pf-agd-board-card-name { font-weight: var(--font-poster-strong-weight); }
.pf .pf-agd-idcard { border: 3px solid var(--text); border-radius: 0; box-shadow: 8px 8px 0 var(--sun); }
.pf .pf-agd-legend-pill, .pf .pf-agd-tag-pill, .tag-pill, .pf .pf-agd-filter-tags .pf-agd-tag-chip {
  border-radius: 0; border: 2px solid var(--text); background: none; color: var(--text);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; padding: 1px 8px;
}
.pf .pf-agd-legend-pill--active, .tag-pill--active, .tag-pill.active { background: var(--sun); color: var(--on-sun); }
.pf .pf-agd-filter-bar, .pf .pf-agd-group-header, .pf .pf-agd-filter-tags { border-bottom: 2px solid var(--text); font-weight: var(--font-poster-strong-weight); }
.pf .pf-agd-active-row { border-radius: 0; border-bottom: 1px solid var(--border); }
.pf .mem-tools-bar { background: none; border: 0; border-top: 3px solid var(--text); border-bottom: 2px solid var(--text); border-radius: 0; padding: 0.6rem 0; }
/* The attach-this-agent box (components/McpInstall) inside an agent: an ink frame, a mono command. */
.pf .mcpi--quick, .mcpi--tool { border: 2px solid var(--text); border-radius: 0; background: var(--bg-dim); }
.mcpi-cmd-text { border: 2px solid var(--text); border-radius: 0; }

/* ── Knowledge packages, and the raw fields the older tabs still use ────────────────────── */
.kpkg-section, .kpkg-action-bar, .kpkg-import-box { background: none; border: 0; border-top: 3px solid var(--text); border-radius: 0; box-shadow: none; padding: 1rem 0 1.25rem; margin-bottom: 1.25rem; }
.kpkg-card { border-top-width: 2px; padding: 0.9rem 0; margin-bottom: 0; }
.kpkg-card-expanded { border-top-color: var(--accent); }
.pf .btn-danger-solid { background: none; border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; box-shadow: none; padding: 0 0 1px; color: var(--accent); font-weight: var(--font-poster-strong-weight); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pf .btn-danger-solid:hover { color: var(--danger); border-color: var(--danger); background: none; }
.pf input[type="text"], .pf input[type="search"], .pf input[type="url"], .pf input[type="email"], .pf input[type="number"], .pf input[type="password"],
.portfolio-container input[type="text"], .portfolio-container input[type="url"] {
  background: transparent; border: 0; border-bottom: 3px solid var(--text); border-radius: 0;
  padding: 8px 0; font-family: var(--font-showroom-body); font-weight: var(--font-poster-text-weight); color: var(--text); outline: none;
}
.pf input[type="text"]:focus, .pf input[type="search"]:focus, .pf input[type="url"]:focus, .pf input[type="email"]:focus, .pf input[type="number"]:focus, .pf input[type="password"]:focus { border-color: var(--accent); box-shadow: none; }
.pf select, .pf textarea { border: 2px solid var(--text); border-radius: 0; background: var(--bg); color: var(--text); font-family: var(--font-showroom-body); font-weight: 600; }
.pf input[type="checkbox"], .pf input[type="radio"] { accent-color: var(--text); }

/* ── Organisms and workspaces ───────────────────────────────────────────────────────────── */
.pj-doc-view { border: 3px solid var(--text); border-radius: 0; box-shadow: 8px 8px 0 var(--sun); }
.pj-rec-fields, .pj-rec-edit { border-radius: 0; background: none; border-top: 2px dashed var(--border); }
.pj-danger-box { border: 3px solid var(--accent); border-radius: 0; }
.pj-doc-link, .pj-rec-title, .pj-org-crumb-link { font-weight: var(--font-poster-text-weight); }
.pj-org-openbtn { white-space: nowrap; }

/* ── Money: the amounts as numerals ─────────────────────────────────────────────────────── */
.pf .wallet-card, .pf .stat-card { text-align: left; }
.pf .wallet-card .amount, .pf .stat-card-value {
  font-family: var(--font-poster); font-weight: var(--font-poster-weight);
  font-size: 2.4rem; line-height: 0.9; letter-spacing: -0.03em; color: var(--text);
}
.pf .wallet-card .amount.positive { color: var(--success-fg); }
.pf .wallet-card .amount.neutral { color: var(--accent); }
.pf .wallet-card .wlabel, .pf .stat-card-label {
  font-size: 0.72rem; font-weight: var(--font-poster-strong-weight); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-top: 0.5rem;
}
.pf .stat-card { padding: 0.9rem 0 1rem; margin-bottom: 0; }
.pf .stat-grid { gap: 0 2rem; }

/* ── Companies ──────────────────────────────────────────────────────────────────────────── */
.pf .pf-co-badge { border: 2px solid currentColor; padding: 0 6px; }

/* ── Controls that keep a box: the segmented control and the collapsible ────────────────── */
.pf .seg { border: 2px solid var(--text); border-radius: 0; background: none; }
.pf .seg-btn { font-weight: var(--font-poster-strong-weight); padding: 0.35rem 0.9rem; color: var(--text); }
.pf .seg-btn + .seg-btn { border-left: 2px solid var(--text); }
.pf .seg-btn.active { background: var(--text); color: var(--bg); }
.pf .collapsible { border: 0; border-top: 3px solid var(--text); border-radius: 0; }
.pf .collapsible-header { border-radius: 0; font-weight: var(--font-poster-strong-weight); padding: 0.7rem 0; }
.pf .collapsible-body { padding: 0 0 0.75rem; }
.pf .alert { border-radius: 0; border-width: 2px; border-left-width: 6px; font-weight: 600; }
.pf .pagination { font-family: var(--font-mono); }

/* ── Dialogs ────────────────────────────────────────────────────────────────────────────── */
.modal { border: 3px solid var(--text); border-radius: 0; box-shadow: 12px 12px 0 var(--sun); font-family: var(--font-showroom-body); }
.modal-header h3 { font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight); font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.02em; }
.modal-footer { border-top: 3px solid var(--text); padding-top: 1rem; }

/* ── Words on the sun stay ink in every theme ───────────────────────────────────────────── */
.pf .pf-side-item--active, .pf .pf-next-card--primary, .pf .pf-next-card:hover, .pf .pf-mcp-badge,
.koti-fold--on, .koti-pb .koti-fold:hover, .koti-pb .koti-fold--on, .koti-ach-chip--done .koti-ach-mark,
.chat-thread--active, .chat-list-toggle, .chat-copy-head.copied, .chat-turn--user .chat-bubble, .chat-attach:hover, .chat-voice:hover { color: var(--on-sun); }

/* ── The portfolio builder and the viewer chrome (outside .pf) ──────────────────────────── */
.portfolio-step { padding-top: 1.4rem; margin-bottom: 2.4rem; }
.portfolio-step h3 {
  display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem;
  font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight); font-size: 1.8rem; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
}
.portfolio-step-number { width: auto; height: auto; border-radius: 0; background: none; color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 400; margin: 0; }
.portfolio-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; padding: 0; margin: 2rem 0 1.5rem; background: none; border: 0; border-top: 3px solid var(--text); border-radius: 0; }
.portfolio-flow-arrow { display: none; }
.portfolio-flow-step { display: block; padding: 0.9rem 0 1rem; border-bottom: 2px solid var(--text); font-weight: var(--font-poster-strong-weight); font-size: 1rem; line-height: 1.35; }
.portfolio-flow-num { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--accent); margin: 0 0 0.45rem; }
.portfolio-step-number { font-size: 1.1rem; }
.portfolio-published-bar { background: var(--sun); color: var(--on-sun); border: 3px solid var(--text); border-radius: 0; font-weight: var(--font-poster-strong-weight); }
.portfolio-published-bar .btn-ghost, .portfolio-published-link { color: var(--on-sun); border-color: var(--on-sun); font-weight: var(--font-poster-strong-weight); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; border-bottom: 2px solid var(--on-sun); }
.portfolio-published-dot { color: var(--success-fg); }
.portfolio-source-group { margin-bottom: 0; }
.portfolio-source-group summary { padding: 0.75rem 0; border-bottom: 2px solid var(--text); font-size: 1rem; letter-spacing: -0.01em; text-transform: none; color: var(--text); margin: 0; }
.portfolio-source-list { padding: 0 0 0.5rem 1.5rem; gap: 0; }
.portfolio-source-item, .portfolio-mem-item { border-radius: 0; border-bottom: 1px solid var(--border); padding: 0.5rem 0; font-weight: var(--font-poster-text-weight); }
.portfolio-source-item:hover, .portfolio-mem-item:hover { background: none; }
.portfolio-source-meta { font-family: var(--font-mono); }
.portfolio-img-thumb { border-radius: 0; border: 2px solid var(--text); }
.portfolio-options { gap: 0 2rem; }
.portfolio-option { border: 0; border-bottom: 2px solid var(--text); border-radius: 0; padding: 0.7rem 0; font-weight: var(--font-poster-strong-weight); }
.portfolio-option:hover { border-color: var(--accent); }
.portfolio-option.selected { background: var(--sun); color: var(--on-sun); padding-left: 0.5rem; border-color: var(--text); }
.portfolio-upload-zone { border: 3px dashed var(--text); border-radius: 0; font-weight: var(--font-poster-strong-weight); }
.portfolio-upload-zone:hover, .portfolio-upload-zone.dragover { background: var(--sun); color: var(--on-sun); border-color: var(--text); }
.portfolio-publish-target { font-weight: var(--font-poster-text-weight); color: var(--text); }
.portfolio-publish-url { font-family: var(--font-mono); color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.portfolio-instructions li { color: var(--text); font-weight: 600; }
.portfolio-preview-frame { border: 3px solid var(--text); border-radius: 0; }
/* The viewer bar: one 44px row, underlined words, and the promoted apps on a sun strip. */
.portfolio-viewer-bar { min-height: 44px; padding: 0 2rem; gap: 1.4rem; border-bottom: 3px solid var(--text); }
.portfolio-viewer-owner { font-family: var(--font-poster); font-size: 0.95rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text); }
.portfolio-promoted { max-width: none; display: flex; align-items: center; gap: 1.2rem; padding: 0.5rem 2rem; background: var(--sun); color: var(--on-sun); border-bottom: 3px solid var(--text); overflow-x: auto; }
.portfolio-promoted-title { margin: 0; font-size: 0.66rem; font-weight: var(--font-poster-strong-weight); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.portfolio-promoted-grid { display: flex; gap: 1.2rem; }
.portfolio-promoted-card { border: 0; border-bottom: 2px solid var(--on-sun); border-radius: 0; background: none; padding: 0.1rem 0; white-space: nowrap; }
.portfolio-promoted-card:hover { transform: none; color: var(--accent); }
.portfolio-promoted-name { display: inline; margin: 0; color: inherit; }
.portfolio-promoted-pitch { display: inline; margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: inherit; opacity: 0.8; }
.portfolio-viewer-frame { border-radius: 0; }
.portfolio-profile-head h2 { font-family: var(--font-poster); font-weight: var(--font-poster-weight); font-size: 2.4rem; text-transform: uppercase; letter-spacing: -0.03em; }

/* ── What the browser tour of 2026-08-29 added: the agents tab's details ────────────────── */
.pf .pf-agd-board-card-name { color: var(--text); }
.pf .pf-agd-badge, .pf .pf-agd-tag-chip, .pf .pf-agd-tag-name { background: none; border: 2px solid currentColor; color: var(--text); padding: 1px 7px; }
.pf .pf-agd-badge--mode-interactive, .pf .pf-agd-badge--mode-autonomous { color: var(--text); }
.pf .pf-agd-group-header { border-bottom: 0; padding-bottom: 0.3rem; }
.pf .pf-agd-collapsed-meta { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 400; color: var(--text-dim); }
.pf .pf-agd-tab-content { padding-top: 0.5rem; }
.pf .pf-agd-tab-content > :first-child { margin-top: 0; }
.pf input:not([type]) {
  background: transparent; border: 0; border-bottom: 3px solid var(--text); border-radius: 0;
  padding: 8px 0; font-family: var(--font-showroom-body); font-weight: var(--font-poster-text-weight); color: var(--text); outline: none;
}
.pf input:not([type]):focus { border-color: var(--accent); box-shadow: none; }

/* ── The other tabs, on the same primitives ─────────────────────────────────────────────────
   Each view sheet names its own cards, rows, badges and boxes. They are mapped here onto the
   four poster shapes (a section under a 3px rule, a row over a 2px rule, an ink-framed box, a
   square mono chip) so the whole machine room changes in one file. Selectors keep the .pf
   prefix the view sheets use, so the cascade order decides. */
/* Sections: a rule on top, no frame */
.pf .sch-form, .pf .sch-cal-freq, .pf .of-mapwrap, .pf .of-empty-need, .pf .pf-nb-suggest, .pf .pf-nb-enrich, .pf .pf-nb-plan-step,
.pf .wf-form-section, .pf .cap-info-section, .pf .pf-ld-pending, .pf .pf-ld-charter-box, .pf .pf-ld-editor, .pf .pf-ld-chart,
.pf .pf-agd-crew-live, .pf .pf-agd-crew-problems, .pf .pf-agd-crew-tools-group, .pf .mbr-yours,
.pf .fnd-cal-section, .pf .fnd-cal-run, .pf .fnd-cal-batch, .pf .fnd-cal-step, .pf .fnd-cal-proposal-card, .pf .fnd-cal-option, .pf .fnd-cal-reflection-col, .pf .fnd-cal-chart,
.pf .wallet-request, .pf .mem-tools-section, .pf .mem-detail, .pf .mem-browse-panel, .pf .mem-bulkbar, .pf .pn-card, .pf .pn-setup, .pf .agent-cta, .pf .create-form,
.pf .ext-detail-section, .pf .platform-content, .pf .pf-agd-governance-section, .pf .agd-governance-section, .pf .pf-agd-services-info, .pf .agd-services-info,
.pf .pf-agd-create-form, .pf .agd-create-form, .pf .pf-agd-builder, .pf .agd-builder, .pf .pf-agd-cgroup-empty, .pf .pf-agd-msg-proposed-task, .pf .agd-msg-proposed-task,
.pf .pf-agd-directives-content, .pf .hm-step, .pf .stat-card, .pf .pf-usage-card {
  background: none; border: 0; border-top: 3px solid var(--text); border-radius: 0; box-shadow: none; padding: 1rem 0 1.25rem;
}
.pf .hm-step--proof { border-left: 0; border-top-color: var(--accent); }
.pf .stat-card { padding: 0.9rem 0 1rem; }
/* Rows: one rule under each, the row's own words in bold */
.pf .sch-card, .pf .of-card, .pf .wf-card, .pf .cap-item, .pf .pf-nb-note, .pf .pf-nb-hit, .pf .mem-browse-item, .pf .mem-discover-item,
.pf .app-card, .pf .file-card, .pf .post-card, .pf .ext-card, .pf .ext-bundled-card, .pf .pkg-card, .pf .pf-agd-task-item, .pf .agd-task-item,
.pf .pf-agd-log-entry, .pf .agd-log-entry, .pf .pf-agd-todo-item, .pf .agd-todo-item, .pf .pf-agd-service-card, .pf .agd-service-card,
.pf .pf-agd-crew-template, .pf .pf-agd-crew-card, .pf .mbr-card, .pf .fnd-cal-card, .pf .pf-agd-config-item, .pf .pf-agd-quality-review-row,
.pf .pf-agd-step, .pf .pf-ld-card, .pf .lib-proof-row {
  background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 0.9rem 0;
}
.pf .sch-card:hover, .pf .of-card:hover, .pf .wf-card:hover, .pf .cap-item:hover, .pf .app-card:hover, .pf .ext-card:hover, .pf .pkg-card:hover, .pf .pf-agd-crew-template:hover, .pf .mbr-card:hover {
  transform: none; box-shadow: none; border-color: var(--accent); background: none;
}
.pf .of-card--open, .pf .pf-agd-crew-template.selected, .pf .pf-agd-crew-template--on { border-bottom-color: var(--accent); }
.pf .sch-card-list, .pf .wf-card-list, .pf .of-group-body { border-top: 3px solid var(--text); }
.pf .sch-card-title, .pf .wf-card-title, .pf .of-card-title, .pf .of-offer-title, .pf .cap-item-name, .pf .pf-agd-crew-template-name, .pf .mbr-card-name { font-weight: var(--font-poster-strong-weight); font-size: 1.02rem; }
/* Boxes: the ink frame for a thing that must read as one object (a preview, a sample, a schema) */
.pf .of-req, .pf .of-conseq, .pf .of-sample, .pf .of-result, .pf .of-md, .pf .of-prereq, .pf .pf-nb-enrich-preview-body, .pf .pf-agd-memory-preview,
.pf .pf-agd-rule-source, .pf .agd-rule-source, .pf .cap-schema-pre, .pf .pf-agd-crew-try-output, .pf .pf-agd-config-preview, .pf .fnd-cal-template-details, .pf .sch-card-dispatch {
  border: 2px solid var(--text); border-radius: 0; background: var(--bg-dim); box-shadow: none;
}
.pf .of-conseq--warn, .pf .of-prereq--warn { border-color: var(--warn); }
.pf .of-prereq--blocked { border-color: var(--accent); }
/* Chips: square, mono, the colour kept as the frame */
.pf .sch-badge, .pf .sch-tag, .pf .sch-preset, .pf .of-badge, .pf .of-status, .pf .of-chip, .pf .of-group-count, .pf .wf-badge,
.pf .pf-agd-status, .pf .agd-status, .pf .pf-agd-cap-badge, .pf .agd-cap-badge, .pf .pf-agd-cap-type, .pf .agd-cap-type, .pf .pf-agd-filter-pill,
.pf .pf-agd-event-badge, .pf .pf-agd-role-badge, .pf .pf-agd-env-badge, .pf .agd-env-badge, .kpkg-badge, .kpkg-tag, .pf .file-tag, .pf .ext-comp-tag,
.pf .ext-visibility-badge, .pf .pkg-card-version, .pf .ext-card-version, .pf .brd-member-tag, .pf .scope-badge, .pf .pf-ureport-btn, .pf .pf-usage-chip, .pf .pf-agd-quality-dur-chip {
  border-radius: 0; background: none; border: 2px solid currentColor;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 1px 7px; line-height: 1.5;
}
.pf .sch-preset--on, .pf .of-chip--on, .pf .pf-ureport-btn.active, .pf .pf-agd-filter-pill--active, .pf .pf-agd-filter-pill.active {
  background: var(--sun); color: var(--on-sun); border-color: var(--text);
}
.pf .pf-ureport-btn { color: var(--text); font-weight: var(--font-poster-text-weight); font-family: var(--font-showroom-body); font-size: 0.78rem; padding: 4px 10px; }
.pf .pf-ureport-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
/* The segmented control and the calendar */
.pf .of-seg { border: 2px solid var(--text); border-radius: 0; background: none; padding: 0; }
.pf .of-seg-btn { border-radius: 0; font-weight: var(--font-poster-strong-weight); color: var(--text); }
.pf .of-seg-btn--on { background: var(--text); color: var(--bg); }
.pf .sch-cal-cell, .pf .sch-cal-weekcol { border-radius: 0; border: 2px solid var(--border); background: none; }
.pf .sch-cal-cell--today, .pf .sch-cal-weekcol--today { border-color: var(--text); }
.pf .sch-cal-weekcol-head, .pf .sch-cal-head { background: none; border-bottom: 2px solid var(--text); font-weight: var(--font-poster-strong-weight); }
/* Headings the view sheets set on their own */
.pf .sch-section-title, .pf .wf-section-title, .pf .of-group-title, .pf .cap-section-title, .pf .mbr-section-title, .pf .pf-content-body h2:not([class]), .pf .pf-content-body h3:not([class]) {
  font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight);
  font-size: 1.7rem; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text);
}
/* The message tab: an ink frame around the two panes, square bubbles */
.inbox-body { border: 3px solid var(--text); border-radius: 0; box-shadow: none; }
.inbox-bubble { border-radius: 0; border: 2px solid var(--border); }
.inbox-bubble--mine { border-color: var(--text); border-bottom-right-radius: 0; }

/* ── The second tour (every remaining index page): discover, ecosystem, skills, capabilities,
   libraries, extensions, packages, the AI provider settings, boards ─────────────────────── */
/* Rows */
.pf .dsc-item, .pf .pf-eco-card, .pf .pf-skl-row, .pf .pf-or-mrow, .pf .pf-eco-adv-item, .pf .pf-eco-auto-job, .pf .pj-app-card, .pf .pf-skl-file-row {
  background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 0.9rem 0; margin-bottom: 0;
}
.pf .dsc-item:hover, .pf .pf-eco-card:hover, .pf .pf-skl-row:hover, .pf .pf-or-mrow:hover { border-color: var(--accent); background: none; box-shadow: none; transform: none; }
.pf .pf-or-mrow { border-bottom-width: 1px; border-bottom-color: var(--border); padding: 0.5rem 0; }
.pf .pf-or-mrow--on { background: var(--sun); color: var(--on-sun); padding-left: 0.5rem; }
.pf .dsc-item-title, .pf .pf-eco-name, .pf .pf-skl-name { font-weight: var(--font-poster-strong-weight); }
/* Sections and panels */
.pf .pf-or-wrapper, .pf .pf-or-section, .pf .pf-eco-section, .pf .pf-skl-section, .pf .pkg-section, .pf .cap-create-section, .pf .pf-eco-auto-flow-card, .pf .pf-eco-mcp, .pf .pf-eco-recipe {
  background: none; border: 0; border-top: 3px solid var(--text); border-radius: 0; box-shadow: none; padding: 1rem 0 1.25rem;
}
.pf .pf-or-panel, .pf .pf-or-picker, .pf .pf-eco-data-pre, .pf .pf-eco-mcp-sample-prompt, .pf .pf-skl-body-md, .pf .pf-skl-editor-md, .pf .pf-eco-cmd {
  border: 2px solid var(--text); border-radius: 0; background: var(--bg-dim); box-shadow: none;
}
.pf .pf-or-section-title, .pf .pf-eco-section-title, .pf .pf-skl-section-title, .pf .pkg-section-header, .pf .cap-info-title {
  font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight);
  font-size: 1.7rem; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text);
}
/* Chips */
.pf .dsc-facet, .pf .dsc-type-badge, .pf .dsc-tag, .pf .dsc-scope-btn, .pf .pf-eco-status, .pf .pf-eco-pill, .pf .pf-eco-chip, .pf .pf-eco-count-badge, .pf .pf-eco-rec-chip,
.pf .cap-badge, .pf .cap-tag, .pf .pkg-badge, .pf .pkg-tag, .pf .pkg-comp-type, .pf .pkg-nav button, .pf .lib-tier-btn, .pf .vis-pill, .pf .pf-or-status, .pf .pf-skl-version, .pf .pf-eco-auto-status-chip, .pf .pf-eco-setup-progress-chip {
  border-radius: 0; background: none; border: 2px solid currentColor; color: var(--text);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 1px 7px; line-height: 1.5;
}
.pf .dsc-type-badge, .pf .cap-badge-callable, .pf .pf-eco-status-pending, .pf .pkg-badge-featured { color: var(--accent); }
.pf .pf-eco-status-active, .pf .pkg-badge-installed, .pf .pkg-badge-active, .pf .pkg-badge-published, .pf .pf-or-status--on { color: var(--success-fg); }
.pf .pf-eco-status-revoked, .pf .pkg-badge-error { color: var(--danger); }
.pf .dsc-facet-active, .pf .dsc-scope-active, .pf .pkg-nav button.active, .pf .lib-tier-btn.lib-tier-active { background: var(--sun); color: var(--on-sun); border-color: var(--text); }
.pf .dsc-facet:hover, .pf .dsc-scope-btn:hover, .pf .pkg-nav button:hover:not(.active), .pf .lib-tier-btn:hover { background: none; border-color: var(--accent); color: var(--accent); }
.pf .pkg-nav button, .pf .dsc-scope-btn, .pf .lib-tier-btn { font-family: var(--font-showroom-body); font-weight: var(--font-poster-text-weight); font-size: 0.8rem; padding: 4px 10px; }
/* The quiet actions the older tabs draw as small framed buttons */
.pf .ext-card-actions button, .pf .pf-skl-actions button, .pf .pkg-card-actions button:not(.btn-primary), .pf .pf-eco-adv-actions button {
  background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 0 0 1px;
  font-family: var(--font-showroom-body); font-weight: var(--font-poster-strong-weight); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text);
}
.pf .ext-card-actions button:hover, .pf .pf-skl-actions button:hover, .pf .pkg-card-actions button:not(.btn-primary):hover { background: none; color: var(--accent); border-color: var(--accent); }
.pf .ext-card-actions button.danger { color: var(--accent); border-color: var(--accent); }
/* Search fields the older tabs draw as boxes */
.pf .dsc-search, .pf .cap-search-input, .pf .lib-search, .pf .pf-or-msearch, .pf .pkg-filters input, .pf .fnd-cal-create-input {
  background: transparent; border: 0; border-bottom: 3px solid var(--text); border-radius: 0; padding: 8px 0;
  font-family: var(--font-showroom-body); font-weight: var(--font-poster-text-weight); color: var(--text); box-shadow: none;
}
.pf .dsc-search:focus, .pf .cap-search-input:focus, .pf .lib-search:focus, .pf .pf-or-msearch:focus { border-color: var(--accent); outline: none; box-shadow: none; }
.pf .pkg-filters select, .pf .cap-filter-select, .pf .pf-or-select { border: 2px solid var(--text); border-radius: 0; background: var(--bg); }

@media (max-width: 700px) {
  .pf .pf-content-body > .section-title:first-child, .pf .pf-content-body > *:first-child > .section-title:first-child,
  .pf .pf-content-body > *:first-child > *:first-child > .section-title:first-child { font-size: 2rem; }
  .portfolio-container h1 { font-size: 2.2rem; }
  .portfolio-flow { grid-template-columns: 1fr; }
  .portfolio-viewer-bar { padding: 0 0.8rem; gap: 0.8rem; }
  .portfolio-promoted { padding: 0.4rem 0.8rem; }
}