/**
 * @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.80.3 -- 2026-09-27 -- The offer card's .pf rules (.pf .of-card, :hover, --open, -title, .of-offer-title, .of-req, .of-md, .of-badge) leave with components/offer-card-view.js under its own names (css/components/offer-card-view.css, a move).
 *   v1.80.2 -- 2026-09-27 -- The schedule calendar's rules (.pf .sch-cal-freq in the sections group, .pf .sch-cal-cell, -weekcol, their --today, -weekcol-head, -head) and .pf .pf-eco-auto-flow-card leave this file: they move, with the same .pf scope and values, into css/components/schedule-calendar.css and eco-automation.css under the components' own class names.
 *   v1.80.1 -- 2026-09-27 -- .pf .sub-tabs goes: the Tabs component's row under a page head draws .tab-row--bar (tab-row.css, the same values), and the design lab keeps its own copy for its picture. .pf-edit-label .pf-edit-input goes to display-prefs-fields.css, .pf .agent-cta leaves the sections group for agent-consent.css, and .pf .input-sm leaves the fields group (ContactPicker's input is .contact-picker-input now; no page under .pf writes .input-sm): each under the component's own name, the same values.
 *   v1.80.0 -- 2026-09-26 -- Page group G8: .pf-account-modal leaves the action and field lists (the account dialogs are the field kit), its eye and link places go, the DisplayPrefsFields field keeps its width on .pf-edit-label; .pf .pn-setup and .pf .pf-usage-card leave the section list (no user left).
 *   v1.79.0 -- 2026-09-26 -- Page group G1a: .pf .pf-agd-form-actions, .pf .platform-tabs, .pf .platform-content,
 *     .pf .agd-services-info, .pf .agd-service-card, .pf .pf-agd-crew-card, .pf .pf-agd-crew-tools-group leave their groups, and
 *     .pf .pf-agd-tab-content (both), .pf .pf-agd-active and .pf .pf-agd-active-row go: the Agents page, its tasks, services and
 *     crew draw only components now and nothing writes the classes.
 *   v1.78.0 -- 2026-09-26 -- Page group G2a: .pf .pj-field > span and .pf .pj-form-group leave the row labels' group, and .pf .pf-skl-body-md, .pf .pf-skl-section-title and .pf .pf-skl-version go: a workspace's Skills panel and the organism forms draw only components now and nothing writes the classes.
 *   v1.77.0 -- 2026-09-26 -- Page group G3: .pf .access-empty-row and .pf .mem-search-summary leave the rows group, .pf .mem-tools-section, .mem-detail, .mem-browse-panel and .mem-bulkbar the sections group, .pf .mem-discover-item the rows group: Memory and Access draw only components now and nothing writes the classes.
 *   v1.76.0 -- 2026-09-26 -- Page group G1b: .pf .pf-agd-crew-live, .pf .pf-agd-governance-section and .pf .pf-agd-directives-content leave the sections group: the agent detail tabs draw only components now and nothing writes the classes.
 *   v1.75.0 -- 2026-09-26 -- Page group G4: .pf .pf-or-section, .pf .pf-or-section-title, the living tab's .pf .pf-ld-pending, -charter-box, -editor, -chart and the notebook's .pf .pf-nb-suggest, -enrich, -plan-step, -note leave their groups: those pages draw only components now and nothing writes the classes.
 *   v1.74.0 -- 2026-09-26 -- The raw fields read the shape values: a one-line field's line --shape-frame-heavy and --shape-field-colour, a drop-down's and a text box's frame --shape-frame, --shape-field-colour and --shape-corner-control; a one-line field keeps its square corner, a line has none to show (a move: the AIMEAT values equal the old ones).
 *   v1.73.0 -- 2026-09-26 -- The configuration files leave the rows' group and their preview the boxes' group: they are the Listing and the Code block (a unification: Jouni's decision "File pick list").
 *   v1.72.0 -- 2026-09-26 -- The Connect prompts, a record field's object, a stored value, a try's answer and a sample prompt leave the frame groups: they are the Code block (a unification: Jouni's decision "Code block").
 *   v1.71.0 -- 2026-09-26 -- The Connect prompts, a record field's object, a stored value, a try's answer and a sample prompt leave the frame groups: they are the Code block (a unification: Jouni's decision "Code block").
 *   v1.70.0 -- 2026-09-26 -- An agent's quick-connect box (.pf .mcpi--quick) and its one-liner (.mcpi-cmd-text) are no longer dressed here: they draw their own look (a unification: Jouni's decision "MCP guide", the option classic). The install row's frame outside the MCP page's aside stays: that rule also reaches the home.
 *   v1.69.0 -- 2026-09-26 -- An agent's quick-connect box (.pf .mcpi--quick) and its one-liner (.mcpi-cmd-text) are no longer dressed here: they draw their own look (a unification: Jouni's decision "MCP guide", the option classic). The install row's frame outside the MCP page's aside stays: that rule also reaches the home.
 *   v1.68.0 -- 2026-09-26 -- An agent's quick-connect box (.pf .mcpi--quick) and its one-liner (.mcpi-cmd-text) are no longer dressed here: they draw their own look (a unification: Jouni's decision "MCP guide", the option classic). The install row's frame outside the MCP page's aside stays: that rule also reaches the home.
 *   v1.67.0 -- 2026-09-26 -- .pf .pf-agd-log-entry goes from the row group: the agent's event log is the Timeline (a unification: Jouni's decision "Activity log").
 *   v1.66.0 -- 2026-09-26 -- A small heading over a group of fields, a card or a note is the Sub-heading (.sub-heading: small ink headline letters); the coral small capitals, the bold ink words and the coral headline letters go (a unification: Jouni's decision "Sub-heading").
 *   v1.65.0 -- 2026-09-26 -- The profile's frame for every many-line field no longer reaches the chat's typing field (.poster-composer-input), which keeps its thick line under it (Jouni's decision "Typing box").
 *   v1.64.0 -- 2026-09-26 -- A list of things to do or of steps is the numbered list (components/NumberedIndex.js: IndexList with IndexItem, or IndexStep for a step that opens nothing): the overview's next steps with the line under each name and the first on the sun, the Wallet key steps, a calibration run's proposals, the MCP and Agents connect steps, the basic agents, a server's setup steps (the number said once), the ecosystem steps out of their grey box, the decision rules' order and the notes of your own AI use; a place keeps only its margin (a unification: Jouni's decision "Numbered list").
 *   v1.63.0 -- 2026-09-26 -- The overview's head is the home's head, the Masthead (components/Masthead.js); the head's own rules go, the address line and the marks keep theirs. The account dialog's preview of your picture is framed as the head frames it (.poster-frame); its size stays (a unification: Jouni's decision "Person head").
 *   v1.62.0 -- 2026-09-26 -- .pf .pf-agd-badge goes from two groups: only the removed renderRunModeBadge wrote it. Nothing on screen changes.
 *   v1.61.0 -- 2026-09-26 -- A workspace's app launch card in the poster face (.pf .pj-app-card, taken out of the ecosystem rows' group) is in the library's App cards (css/components/app-cards.css), moved unchanged (UI consolidation phase 5, a move).
 *   v1.60.0 -- 2026-09-26 -- The notebook's hits and the living cards are the Listing: .pf .pf-nb-hit and .pf .pf-ld-card leave the rows' group (a unification: the look most tabs use).
 *   v1.59.0 -- 2026-09-26 -- A record's row in the poster face (.pj-rec-fields, .pj-rec-edit, .pj-rec-title's weight) is in the library's Record row (css/components/record-row.css), moved unchanged (UI consolidation phase 5, a move).
 *   v1.58.0 -- 2026-09-26 -- A key's face is the Key (.key-name): the poster rule on .pf .mem-key goes (a unification: the look most tabs use).
 *   v1.57.0 -- 2026-09-26 -- The organism row's poster face (.pj-org-row in the rows' group, .pj-org-list, the 2px rule, .pj-org-openbtn) is in the library's Organism row (css/components/org-row.css), moved unchanged (UI consolidation phase 5, a move).
 *   v1.56.0 -- 2026-09-26 -- The account dialog's e-mail, which is changed in the Email tab, is the Text field, disabled; .pf-edit-readonly goes (a unification: the look most tabs use).
 *   v1.55.0 -- 2026-09-26 -- The figures that open their tab (.pf-usage-chip*) are the library's Figure door (css/components/figure-door.css), moved unchanged (UI consolidation phase 5, a move).
 *   v1.54.0 -- 2026-09-26 -- An agent's schedules are the Listing (css/components/listing.css): the kind, name and by-agent tags in the name cell, the facts, the copy box and the purpose in the words cell, the actions in the doors, the edit form the open panel; the classic card's rules go (a unification: the look most tabs use).
 *   v1.53.0 -- 2026-09-26 -- The classic AI settings' links to OpenRouter are the action link's quiet tone, and the ecosystem advisory's Approve and Reject keep the action link's own look (the skin's restyle of them goes); a unification: Jouni's decision Action link.
 *   v1.52.0 -- 2026-09-26 -- The classic AI settings' model picker is the library's Model picker (css/components/model-picker.css): its frame, rows, group, empty line and show-all line; its own picker, row and meta rules go (a unification: the look most tabs use).
 *   v1.51.0 -- 2026-09-26 -- The connected apps and the waiting requests are the Listing (css/components/listing.css): an app's name, who it acts for, its state, last seen and the open mark in a row, an opened app the Listing's open panel; the card, its head, caret, name and body rules go (a unification: the look most tabs use).
 *   v1.50.0 -- 2026-09-26 -- Rules no drawn markup writes go (a move, nothing on screen changes): .pf .avatar, the classic file cards (.file-grid, .file-card, .file-icon, .file-thumb, .file-info, .file-name, .file-meta, .file-actions, .file-tags, .file-tag), .pf-view-item and its parts, the connected-app spending limit (.ag-spend*) and scope count (.ag-scope-toggle), .pf-cmp-muted.
 *   v1.49.0 -- 2026-09-25 -- A section that is one row until it is opened is the FoldSection (the folded row with its lead): the AI tab's decide, transparency and compliance cards and the classic AI settings; their own heads, chevrons and body rules go (a unification: the look most tabs use).
 *   v1.48.0 -- 2026-09-25 -- More dead rules go (a move, nothing on screen changes): the classic agent card's gaii, caps, expanded, clickable head and expand icon, sec-revoke-btn, scroll-x, w-full, the work rules, pf-badge-gap, the tx- members, sch-internal-note and sch-badge; no markup writes them.
 *   v1.47.0 -- 2026-09-25 -- The account dialogs' fields are the Text field, the Text area and the Select field, their labels the row label and their help lines the Hint; the dialogs' own field looks go, a field keeps its width and its room for Show (a unification: the look most tabs use).
 *   v1.46.0 -- 2026-09-25 -- The last quiet ways on with a look of their own are the action link (.poster-action; the danger tone for detach, the small link for a link inside a part, the quiet cut in the account dialogs): pn-detach-btn, pn-setup-link, pf-aitr-row-link, pf-edit-link, pf-pw-eye and the door's underlined words; a place keeps only its layout (Jouni's decision "Action link", a unification).
 *   v1.45.0 -- 2026-09-25 -- A table of rows is the Listing (css/components/listing.css): the P&L lines, the accountants, the usage report, the AI spend per app, the security overrides and an agent's internal jobs; figures stand at the right of their column (a unification: the look most tabs use).
 *   v1.44.0 -- 2026-09-25 -- A list drawn as classic cards is the Listing (css/components/listing.css), a row that opens shows the Listing's open panel; the card, its header, arrow and detail rules go (a unification: the look most tabs use).
 *   v1.43.0 -- 2026-09-25 -- The dead rules and list members go (a move, nothing on screen changes): the classic detail tiles, access-pat-token, access-mono, the fleet board's cards, the id card, pf-agd-tag-pill, the mode badges, agd-msg-proposed-task, ext-card, agd-log-entry, agd-cap-badge, agd-cap-type, kpkg-tag, scope-badge, cap-tag, cap-search-input. Only modules nothing imports write them (access-tokens.js, connected-apps.js, shared-board.js, the agents' activity, capabilities and messages subtabs).
 *   v1.42.0 -- 2026-09-25 -- An organism search hit leaves the shared list-row rules: it is the library's Search hits (css/components/search-hits.css), moved unchanged with its class names (UI consolidation phase 5, a move).
 *   v1.41.0 -- 2026-09-25 -- The GAII control's rules (pf-agd-gaii*) move to css/components/gaii-chip.css (UI consolidation phase 5, a move).
 *   v1.40.0 -- 2026-09-25 -- A row of tabs draws no rule of its own under it (the crew's Form and JSON, the activity filters), a unification: Jouni's decision Tabs and filters.
 *   v1.39.0 -- 2026-09-25 -- The crew templates are the Choice (poster.css .poster-choice), as a new agent's shapes are, a unification: the look most tabs use.
 *   v1.38.0 -- 2026-09-25 -- A dot that says a state (active, inactive, running, something unseen) is the status dot (css/components/status-dot.css), a unification: the look most tabs use.
 *   v1.37.0 -- 2026-09-25 -- .pj-tab-pill leaves the badge group: a workspace's state is the Status (a unification: Jouni's decision "Status").
 *   v1.36.0 -- 2026-09-25 -- .pj-org-crumb-link leaves the bold words group: the workspace breadcrumb is the crumb trail (a unification: the look most tabs use).
 *   v1.35.0 -- 2026-09-25 -- A group of memory keys is the folded row: .mem-group-header and .mem-group-name leave their rules here (a unification: the look most tabs use).
 *   v1.34.0 -- 2026-09-25 -- .vis-pill leaves the badge and chip lists: it is the Tag (.poster-chip) now (a unification: Jouni's decision "Tag").
 *   v1.33.0 -- 2026-09-25 -- .pf-agd-info-row leaves the row rule group: no markup writes it (the agents' facts are the Facts, css/components/facts.css).
 *   v1.32.0 -- 2026-09-25 -- A workspace record’s field names leave the label margin group: they are the Facts (css/components/facts.css), a unification: the look most tabs use.
 *   v1.31.0 -- 2026-09-25 -- The workspace settings’ space rows and the memory browse rows leave the row rule: they are the Listing (css/components/listing.css), a unification: the look most tabs use.
 *   v1.30.0 -- 2026-09-25 -- A search field over a list is the Search line (.search-line with the Text field); a place keeps only its layout (a unification: the look most tabs use).
 *   v1.30.0 -- 2026-09-25 -- Every drop-down is the Select field (.select-field, css/components/select-field.css); a place keeps only its width and margin (a unification: the look most tabs use).
 *   v1.30.0 -- 2026-09-25 -- Every many-line field is the Text area (.og-textarea); a place keeps only its size and margin (a unification: the look most tabs use).
 *   v1.30.0 -- 2026-09-25 -- Every one-line field is the Text field (.og-input); a place keeps only its layout (a unification: the look most tabs use).
 *   v1.29.0 -- 2026-09-25 -- Every drop-down is the Select field (.select-field, css/components/select-field.css); a place keeps only its width and margin (a unification: the look most tabs use).
 *   v1.29.0 -- 2026-09-25 -- Every many-line field is the Text area (.og-textarea); a place keeps only its size and margin (a unification: the look most tabs use).
 *   v1.29.0 -- 2026-09-25 -- Every one-line field is the Text field (.og-input); a place keeps only its layout (a unification: the look most tabs use).
 *   v1.28.0 -- 2026-09-25 -- Every many-line field is the Text area (.og-textarea); a place keeps only its size and margin (a unification: the look most tabs use).
 *   v1.28.0 -- 2026-09-25 -- Every one-line field is the Text field (.og-input); a place keeps only its layout (a unification: the look most tabs use).
 *   v1.27.0 -- 2026-09-25 -- Every one-line field is the Text field (.og-input); a place keeps only its layout (a unification: the look most tabs use).
 *   v1.26.0 -- 2026-09-25 -- The stat card and stat grid rules go: a row of figures is the figure strip (css/components/figure-strip.css); a place's gap stays here (UI consolidation phase 5, a unification).
 *   v1.25.0 -- 2026-09-25 -- A note's own frame, ground and corners go: it is the Attention note (.poster-aside, css/poster.css); its place (margin) stays here (Jouni's decision "Attention note", a unification).
 *   v1.24.0 -- 2026-09-25 -- A framed box's own frame and ground go: it is the Object box (.poster-box, css/poster.css); its place (margin, padding) stays here (Jouni's decision "Object box", a unification).
 *   v1.23.0 -- 2026-09-25 -- The Organisms page's Discover slab is the kit's section (PageSection), so its spacing rule (.poster-section-title.section-title-spaced) goes (a unification: the look most tabs use).
 *   v1.22.0 -- 2026-09-25 -- Every small number is the Count (.poster-count waiting or tally), a unification: Jouni's decision Count.
 *   v1.21.0 -- 2026-09-25 -- Every word that says a state is the Status (.poster-status fine, attention, danger, off), a unification: Jouni's decision Status.
 *   v1.20.0 -- 2026-09-25 -- Every tag is the Tag (.poster-chip and its tones, .poster-chips for a row), a unification: Jouni's decision Tag.
 *   v1.19.0 -- 2026-09-25 -- The form message rules go: the line a form says after it acted is the Form message (css/components/form-message.css) (UI consolidation phase 5, a unification).
 *   v1.18.0 -- 2026-09-25 -- The older tabs' row labels (card-h3, the agent detail's section titles, detail and form labels, the workspace form groups) and the settings box labels wear .poster-label; their rule here keeps only the margin (Jouni's decision "Row label", a unification).
 *   v1.17.0 -- 2026-09-25 -- The quiet ways on are the library's action link (Jouni's decision "Action
 *     link"): the rules that restyled og-door, the classic buttons and the text buttons here go; a
 *     place's layout value moves to the new class.
 *   2026-09-25 -- The sub-tabs, the platform tabs, the segmented switches, the usage report buttons and the agent filter and legend pills lose their rules: the tab (.poster-tab) now draws them (a unification: Jouni's decision "Tabs and filters"). .pf-tabs lays out a row of them.
 *   2026-09-23: The home's and the chat's words-on-the-sun selectors moved to css/parts.css and css/parts-conversation.css with the parts they belong to.
 *   2026-09-13 -- Let an explicitly composed poster aside own the MCP install row frame.
 *   2026-09-13 -- V2y: compose agent setup panel section headings from poster.css.
 *   2026-09-13 -- V2w: compose remaining profile section top rules from poster.css.
 *   2026-09-13 -- V2v: compose section top rules from poster.css.
 *   2026-09-13 -- V2u: compose the tab strip top rule from poster.css.
 *   2026-09-13 -- V2t: compose card and section top rules from poster.css.
 *   v1.16.0 -- 2026-09-25 -- The Settings & Controls frame and its side menu are library components (SettingsFrame, SideMenu; settings-frame.css, side-menu.css); the old .pf-shell, .pf-side- and .pf-content names are gone (UI consolidation phase 5, a move).
 *   v1.15.0 -- 2026-09-25 -- Dead rules removed: selectors whose classes no file writes (UI consolidation phase 5, a move; the browser's reading proves only those went).
 *   v1.14.0 -- 2026-09-13 -- Retire selectors whose profile views no longer render.
 *   v1.13.0 -- 2026-09-13 -- Compose portfolio page and B1 section headlines.
 *   v1.12.0 -- 2026-09-13 -- Compose portfolio section and flow rules from poster.css.
 *   v1.11.0 -- 2026-09-13 -- Compose top rules from poster.css; move board colours into CSS.
 *   v1.10.0 -- 2026-09-13 -- Compose inbox top rules from poster.css.
 *   v1.9.0 -- 2026-09-13 -- Compose list and guide rules from poster.css; retire unused list rules.
 *   v1.8.0 — 2026-09-13 — The dialog frame, header and footer rules leave for /css/dialog.css, the one
 *     dialog every page uses; only the account dialogs' field rules stay.
 *   v1.7.0 -- 2026-09-13 -- V2: profile markup selects the shared crumb shape.
 *   v1.6.0 — 2026-09-13 — V1: profile markup composes shared page and B1 section headings.
 *   v1.5.1 — 2026-09-09 — Account dialogs share the poster frame, fields and actions in Home and Settings.
 *   v1.5.0 — 2026-09-06 — The GAII control on an agent row (.pf-agd-gaii) takes the square corner
 *     and the sun on hover, like the board tiles it came from; the fleet search count reads as a
 *     quiet mono figure beside the underline field the shared .input-field already gives it.
 *   v1.4.2 — 2026-09-04 — The wallet-card and wallet-request selectors go: the wallet wears its own
 *     poster face (wallet-poster.css) and the classes they styled no longer exist.
 *   v1.4.1 — 2026-09-04 — The fnd-cal- selectors go: the calibrator wears its own poster face
 *     (calibrator-poster.css) and the classes they quieted no longer exist.
 *   v1.4.0 — 2026-09-03 — The starter card (.pf-agd-basic, September's "begin with two agents")
 *     wears the ink box and the square chips. It was built in the classic shell after this skin
 *     shipped and named nothing this file reached, so it was the one 16px radius on two poster
 *     pages. A new surface that invents its own prefix has to be added here or carry the face
 *     itself; the fleet took the second road (fleet.css v2).
 *   v1.3.2 — 2026-08-31 — The pf-co selectors leave: the Companies tab wears the poster face
 *     (companies-poster.css, co- prefix), so there is no old-shape companies surface to skin.
 *   v1.3.1 — 2026-08-29 — Every headline reads --font-poster-tracking / --font-poster-leading (theme.css)
 *     instead of the -.035em / .9 measured for Archivo Black, which made Fjalla One's letters touch.
 *   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 ─────────────────────────────────────────────────────────────── */
.portfolio-container, .portfolio-viewer-full { font-family: var(--font-showroom-body); }
.portfolio-container { --poster-page-size: 3.4rem; --poster-section-size: 1.8rem; }
.portfolio-container .poster-page-title { margin-bottom: 0.5rem; }
.pf .section-desc, .portfolio-subtitle-text { font-weight: 600; color: var(--text-dim); font-size: 0.92rem; }
.pf .card-title,
.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;
}
/* The row labels of the older tabs wear .poster-label (Jouni's decision "Row label"); this keeps
   only their place. */
.pf .card-h3,
.pf .pf-agd-section-title,
.pf .pj-section-title,
.pf .form-row label,
.pf .detail-label { margin-bottom: 0.4rem; }
/* A settings box's label (formerly .og-box-label) stands on its own line over the box's words. */
.pf .og-box > .poster-label { display: block; margin-bottom: .3rem; }
.pf .card-title { font-size: 1.05rem; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.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,
.portfolio-step,
.portfolio-instructions {
  background: none; border-radius: 0; box-shadow: none;
  padding: 1.1rem 0 1.5rem; margin-bottom: 2rem;
}
.pf .card,
.pf .card.card-glass,
.pf .pf-agd-card,
.pj-section {
  border-right: 0; border-bottom: 0; border-left: 0;
}
.pf .card:hover, .pf .card.card-glass:hover { border-color: var(--text); box-shadow: none; transform: none; }
.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 .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 {
  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,
.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,
.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 .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 {
  background: transparent; border: 0; border-bottom: var(--shape-frame-heavy) solid var(--shape-field-colour); 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; }
.portfolio-container textarea.input-field,
.portfolio-paste-area,
.portfolio-custom-desc,
.portfolio-prompt-output {
  border: 2px solid var(--text); border-radius: 0; padding: 10px 12px; background: var(--bg-dim);
}
.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 {
  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 ───────────────────────── */
/* A row of tabs (Jouni's decision "Tabs and filters"): the tabs are .poster-tab; this only lays them out. */
.pf-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; min-width: 0; }
.pf .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 { color: var(--text); background: none; border-color: transparent; }
.pf .tab.active {
  background: var(--sun); color: var(--on-sun); border-bottom-color: var(--text); font-weight: var(--font-poster-strong-weight);
}

/* ── Lists: one rule per row, the row's own words in bold ───────────────────────────────── */
.pf .mem-item,
.pf .kv-row {
  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 { background: none; color: var(--accent); }
/* The organism row's poster face (.pj-org-row, .pj-org-list) is in css/components/org-row.css. */
/* An organism search hit (.pj-search-hit) is a library part: css/components/search-hits.css. */
.pf .kv-value { font-weight: var(--font-poster-text-weight); }
.pf .kv-label { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 400; color: var(--text-dim); }

/* ── An agent, opened: an ink frame with a sun shadow, its zones ruled inside ───────────── */

/* ── The fleet board above the agent list: a ruled grid of names, the state as a left stripe ── */
.tag-pill {
  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;
}
.tag-pill--active, .tag-pill.active { background: var(--sun); color: var(--on-sun); }
/* The install row (components/McpInstall) outside an aside: an ink frame. It also reaches the home's
   first steps. An agent's quick-connect box and its one-liner draw their own look (Jouni's decision
   "MCP guide", the option classic). */
.mcpi--tool:where(:not(.poster-aside)) { border: 2px solid var(--text); border-radius: 0; background: var(--bg-dim); }

/* ── Raw fields the older tabs still use ───────────────────────────────────────────────── */
.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: var(--shape-frame-heavy) solid var(--shape-field-colour); 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; }
/* The chat's typing field (.poster-composer-input) keeps its own line under it (Jouni's decision "Typing box"). */
.pf select, .pf textarea:not(.poster-composer-input) { border: var(--shape-frame) solid var(--shape-field-colour); border-radius: var(--shape-corner-control); 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 ───────────────────────────────────────────────────────────── */
/* An opened document is the Object box's raised tone (.poster-box--raised). */
/* A record's row in the poster face is in css/components/record-row.css. */
.pj-doc-link { font-weight: var(--font-poster-text-weight); }

/* ── Controls that keep a box ──────────────────────────────────────────────────────────── */
.pf .alert { border-radius: 0; border-width: 2px; border-left-width: 6px; font-weight: 600; }
.pf .pagination { font-family: var(--font-mono); }

/* ── Dialogs ────────────────────────────────────────────────────────────────────────────── */
/* The frame, header, X and footer of every dialog are /css/dialog.css. The account dialogs' fields
   are the field kit now (page group G8); the display preferences' fields are
   css/components/display-prefs-fields.css. */

/* ── 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; }
.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-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: var(--font-poster-tracking); }

/* ── What the browser tour of 2026-08-29 added: the agents tab's details ────────────────── */
.pf input:not([type]) {
  background: transparent; border: 0; border-bottom: var(--shape-frame-heavy) solid var(--shape-field-colour); 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 .create-form {
  background: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; padding: 1rem 0 1.25rem;
}
/* Rows: one rule under each, the row's own words in bold */
.pf .app-card,
.pf .post-card,
.pf .mbr-card,
.pf .pf-agd-quality-review-row {
  background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 0.9rem 0;
}
.pf .app-card:hover,
.pf .mbr-card:hover {
  transform: none; box-shadow: none; border-color: var(--accent); background: none;
}
/* The offer card's row, box and chip (.pf .of-*) are the component's: css/components/offer-card-view.css. */
/* Chips: square, mono, the colour kept as the frame */
.pf .brd-member-tag {
  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;
}
/* The message tab: square panes and bubbles; inbox-poster.css sets the face. */
.inbox-body { 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 .pf-eco-adv-item {
  background: none; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 0.9rem 0; margin-bottom: 0;
}
/* Sections and panels */
.pf .pf-eco-section, .pf .pf-eco-mcp {
  background: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; padding: 1rem 0 1.25rem;
}
.pf .pf-eco-section-title {
  font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight);
  font-size: 1.7rem; line-height: var(--font-poster-leading); letter-spacing: var(--font-poster-tracking); text-transform: uppercase; color: var(--text);
}
/* ── The starter card: "begin with two agents" ──────────────────────────────────────────────
   It was written in the classic shell in September, after this skin, and named nothing this file
   already reached: a 16px radius on --card, a pill for the warning, a rounded chip strip. It sits
   on the Agents tab and in the Agents section, so it was the one rounded object on two poster
   pages. Shape 2, the box for a thing that must read as one object, and shape 4 for its chips. */
/* Mono NAMES A MACHINE THING and nothing else. The first cut of this block put the hint and the
   reaches line in it too, and turned two ordinary sentences — "these agents run on your own
   machine", "your saved data, your messages" — into something that reads as a config dump. What
   is left is the three status labels, which do name a state the software is in. */
/* The pill that says an agent starts work without being asked. It is the one thing in this card a
   person is agreeing to, so it is a square framed chip in the accent rather than a rounded aside. */

@media (max-width: 700px) {
  .pf { --poster-page-size: 2rem; }
  .portfolio-container { --poster-page-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; }
}