/**
 * @file offers.css
 * @description Styles for the Agent Offers "Do" surface (offers-tab.js). Prefix `of-`. Uses theme.css
 *   variables only (no hardcoded colors / no rgba(255,255,255)).
 * @version-history
 *   v1.0.0 -- 2026-06-12 -- Initial: Do feed cards, badges, offer detail, provenance footer.
 *   v1.1.0 -- 2026-06-12 -- Billable offers: price/visibility badges + the Selling editor row.
 *   v1.2.0 -- 2026-06-12 -- Markdown deliverable/sample (.of-md) + Inbox deep-link (.of-link).
 *   v1.2.1 -- 2026-06-12 -- Scope markdown headings/tables/lists to the card (LLM h1 was giant; tables
 *     now render with borders).
 *   v1.3.0 -- 2026-06-16 -- Richer Offerings card: prerequisites chips (.of-prereq*), per-offer Recent
 *     runs (.of-runs*), and the workflow-bundle row (.of-bundle).
 *   v1.4.0 -- 2026-06-16 -- Findability: toolbar + AI button, facet chips, group-by/sort controls,
 *     collapsible group sections, Mermaid map wrap, AI need-results + build-for-need empty state.
 */
.of { max-width: 920px; }
.of-search { width: 100%; margin: 0.5rem 0 0.75rem; }

.of-card { border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: 0.6rem 0.75rem; margin: 0.5rem 0; }
.of-card--open { border-color: var(--accent, var(--border)); }
.of-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; cursor: pointer; }
.of-card-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.of-offer-title { font-weight: 600; }
.of-agent { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }

.of-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-start; }
.of-badge { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 10px; background: var(--bg-dim); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.of-badge--ver { color: var(--success, #10b981); }
.of-badge--data { color: var(--info, var(--accent)); }
.of-badge--cost { color: var(--warn, #f59e0b); }
.of-badge--untested { color: var(--muted); font-style: italic; }

.of-ask { margin: 0.35rem 0 0; color: var(--text); }
.of-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; }
.of-example { font-size: 0.88rem; color: var(--muted); }
.of-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.of-mini { font-size: 0.8rem; color: var(--muted); }

.of-req-list, .of-conseq-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.of-req { font-size: 0.82rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.45rem; }
.of-fix { color: var(--accent); font-weight: 600; }
.of-conseq { font-size: 0.78rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.45rem; }
.of-conseq--warn { color: var(--warn, #f59e0b); border-color: var(--warn, #f59e0b); }

.of-sample { font-size: 0.8rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; white-space: pre-wrap; overflow-x: auto; max-height: 200px; margin: 0; }
.of-input { width: 100%; resize: vertical; }

.of-result { margin-top: 0.4rem; padding: 0.5rem 0.6rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; }
.of-result-msg { font-weight: 600; }
.of-prov { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }

/* Do/Inbox segment */
.of-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 0.25rem 0 0.75rem; }
.of-seg-btn { background: var(--card); color: var(--muted); border: none; padding: 0.3rem 0.9rem; cursor: pointer; font-weight: 600; }
.of-seg-btn--on { background: var(--accent, var(--bg-dim)); color: var(--accent-contrast, var(--text)); }

/* Inbox status badges */
.of-status { font-size: 0.72rem; padding: 0.05rem 0.5rem; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; }
.of-st--done { color: var(--success, #10b981); border-color: var(--success, #10b981); }
.of-st--failed { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.of-st--active { color: var(--info, var(--accent)); }
.of-st--queued { color: var(--muted); }
.of-fail { color: var(--danger, #ef4444); font-size: 0.88rem; }

/* Rating */
.of-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.of-stars { display: inline-flex; }
.of-star { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted); padding: 0 0.05rem; }
.of-star--on { color: var(--warn, #f59e0b); }
.of-rate-note { flex: 1 1 200px; min-width: 140px; }

/* Billing badges + the Selling editor */
.of-badge--vis { color: var(--accent); border-color: var(--accent); }
.of-badge--price { color: var(--warn, #f59e0b); font-weight: 600; }
.of-bill { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 0.35rem; }
.of-bill-row { align-items: center; gap: 0.4rem; }
.of-bill-vis { flex: 0 1 180px; }
.of-bill-price { flex: 0 1 110px; }
.of-warn { color: var(--warn, #f59e0b); }

/* Rendered markdown (deliverable + sample) + the Inbox deep-link */
.of-md { font-size: 0.86rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.7rem; overflow-x: auto; max-height: 360px; }
.of-md > :first-child { margin-top: 0; }
.of-md > :last-child { margin-bottom: 0; }
.of-sample-md { max-height: 200px; }
/* Scale headings/tables/lists to the card context (an LLM h1 must not be giant here). */
.of-md h1, .of-md h2, .of-md h3, .of-md h4, .of-md h5, .of-md h6 { font-size: 0.95rem; font-weight: 700; line-height: 1.3; margin: 0.45rem 0 0.2rem; }
.of-md h1 { font-size: 1.02rem; }
.of-md p { margin: 0.3rem 0; }
.of-md ul, .of-md ol { margin: 0.3rem 0; padding-left: 1.2rem; }
.of-md li { margin: 0.1rem 0; }
.of-md table { border-collapse: collapse; font-size: 0.8rem; margin: 0.3rem 0; }
.of-md th, .of-md td { border: 1px solid var(--border); padding: 0.15rem 0.45rem; text-align: left; }
.of-md th { background: var(--surface); font-weight: 600; }
.of-md pre { font-size: 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.6rem; overflow-x: auto; }
.of-md code { font-size: 0.82em; }
.of-link { background: none; border: none; padding: 0; margin-left: 0.35rem; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* Prerequisites ("needs first") — one chip per dependency, marked met / blocked / advisory. */
.of-prereq-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.of-prereq { font-size: 0.82rem; background: var(--bg-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.45rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.of-prereq-mark { font-weight: 700; }
.of-prereq--ok { color: var(--success, #10b981); border-color: var(--success, #10b981); }
.of-prereq--blocked { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.of-prereq--warn { color: var(--warn, #f59e0b); border-color: var(--warn, #f59e0b); }

/* Per-offer Recent runs (collapsible; reuses the inbox DeliverableRow cards inside). */
.of-runs { display: flex; flex-direction: column; gap: 0.3rem; }
.of-runs-toggle { align-self: flex-start; background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 0.82rem; }
.of-runs .of-card { margin: 0.25rem 0; }

/* Workflow bundle row (this offer is a step of a multi-step chain). */
.of-bundle { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); }

/* ── Findability: toolbar, facets, group controls, sections, map, AI results ── */
.of-toolbar { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.4rem; }
.of-toolbar .of-search { flex: 1 1 auto; margin: 0; }
.of-ai-btn { white-space: nowrap; }

.of-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.25rem 0 0.4rem; }
.of-ctrl { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); }
.of-ctrl select { width: auto; }

.of-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.25rem 0 0.6rem; }
.of-facet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.of-facet-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.of-chip { font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 12px; background: var(--bg-dim); color: var(--muted); border: 1px solid var(--border); cursor: pointer; }
.of-chip:hover { border-color: var(--accent); }
.of-chip--on { background: var(--accent, var(--bg-dim)); color: var(--accent-contrast, var(--text)); border-color: var(--accent); }
.of-clear { font-size: 0.8rem; }

/* Collapsible group sections */
.of-group { margin: 0.4rem 0; }
.of-group-head { display: flex; align-items: center; gap: 0.4rem; width: 100%; background: none; border: none; cursor: pointer; padding: 0.3rem 0; font: inherit; color: var(--text); border-bottom: 1px solid var(--border); }
.of-group-caret { color: var(--muted); width: 1em; }
.of-group-title { font-weight: 600; }
.of-group-count { font-size: 0.72rem; color: var(--muted); background: var(--bg-dim); border: 1px solid var(--border); border-radius: 10px; padding: 0.02rem 0.45rem; }
.of-group-body { padding-top: 0.25rem; }

/* Mermaid map */
.of-mapwrap { margin: 0.5rem 0; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); overflow-x: auto; }
.of-mapwrap .mmd { display: flex; justify-content: center; }
/* Clickable nodes (handled by our own overlay listener — Mermaid stays securityLevel:'strict'). */
.of-mapwrap--clickable .mmd .node { cursor: pointer; }
.of-mapwrap--clickable .mmd .node:hover { opacity: 0.82; }

/* AI need-router results */
.of-ai-results { margin-top: 0.5rem; }
.of-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.of-ai-item { margin: 0.3rem 0; }
.of-why { font-size: 0.84rem; color: var(--text); background: var(--bg-dim); border-left: 3px solid var(--accent); border-radius: 4px; padding: 0.25rem 0.55rem; margin-bottom: 0.2rem; }

/* "No match → build an agent for this need" */
.of-empty-need { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; padding: 0.75rem; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg-dim); margin: 0.5rem 0; }
.of-brief { font-size: 0.86rem; color: var(--text); font-style: italic; }