: inside a card it would be clipped by overflow: hidden, and any transformed or filtered ancestor would re-anchor the fixed positioning. */ .obs-drawer { --accent-b: #EC4899; --accent-ink: #9D174D; position: fixed; top: 63px; right: 0; /* Stop above the fixed site footer (its measured height lands in --footer-h on body, set by application.js) instead of covering it. */ bottom: var(--footer-h, 92px); z-index: 45; width: min(380px, 90vw); background: var(--bg); border-left: 1px solid var(--line); padding: 22px 22px 20px; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .obs-drawer.is-open { transform: translateX(0); } .obs-drawer-close { position: absolute; top: 12px; right: 14px; font-size: 20px; line-height: 1; color: var(--ink-faint); background: none; border: none; cursor: pointer; padding: 4px; } .obs-drawer-close:hover { color: var(--ink); } .obs-drawer-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink, var(--ink)); margin-top: 4px; } .obs-drawer-title { font-family: var(--font-sans); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink); margin-top: 8px; padding-right: 18px; } .obs-panel-customer { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--accent-ink, var(--ink)); padding-right: 18px; } .obs-panel-customer[hidden] { display: none; } .obs-panel-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ink); margin-top: 8px; padding-right: 18px; } .obs-panel-meta { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } /* Verbatim detail meta — one labelled pill per field (segment/theme/ sentiment/source/date) instead of a flat "·"-joined sentence, so each value's meaning is legible at a glance rather than inferred from position. */ .obs-meta-pills { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; } .obs-meta-pill { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } .obs-meta-pill-label { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); } .obs-panel-ask { margin-top: 16px; } /* Lives inside the sticky strip (which carries the background and bottom border) — swatches only, kept compact so the pinned bar stays slim. */ .obs-legend-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 0 12px; font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted); } .obs-swatch { display: inline-flex; align-items: center; gap: 6px; } .obs-swatch i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* This entry collapses to a single column (number stacked above content, same technique already used at the mobile breakpoint) so the Cluster Explorer gets the whole .wrap width instead of just the content column. */ .lab-entry.obs-full-width { grid-template-columns: 1fr; gap: 12px; } /* ---- Cluster Explorer: one full-width lane per cluster, real verbatim dots ---- */ /* Mirrors .obs-lane's own grid exactly (same fixed column width, same gap, same horizontal padding) so the tick positions and each lane's dot positions share one coordinate space — they used to be laid out in two differently-sized containers (this spanned the full card; each lane's strip only got the width left over after its label column), so "20 July" lined up with the card's edge while the actual rightmost dots fell well short of it. */ .obs-axis { display: grid; grid-template-columns: 460px 1fr 90px; gap: 20px; padding: 4px 20px 0; height: 20px; } .obs-axis-ticks { position: relative; } .obs-axis-tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; } .obs-lanes { background: var(--bg); } .obs-lane { display: grid; grid-template-columns: 460px 1fr 90px; align-items: stretch; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--line-soft); cursor: pointer; transition: background 0.15s; } .obs-lane:hover { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); } /* The author display:grid above would beat the UA's [hidden] rule — make the empty-cluster hiding explicit. */ .obs-lane[hidden] { display: none; } .obs-lane-label { display: flex; flex-direction: column; justify-content: center; gap: 4px; } /* Coloured by the same size rank as its box in the Cluster Explorer's box grid above (--text-tint, set per-lane in JS by applySizeShading() — same function, same rank, a wider mix-with-ink range since this mixes into heading text rather than a background fill) — ties the two views' reading of "how big is this cluster" together at a glance. */ .obs-lane-name { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.35; color: color-mix(in srgb, #9D174D var(--text-tint, 45%), var(--ink)); white-space: nowrap; /* the label column is sized to fit the longest real cluster name on one line */ } .obs-lane-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); } .obs-lane-dominant { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; } .obs-lane-dominant[hidden] { display: none; } /* Trend-in-words + a truncated pull from the cluster's existing AI summary — set via updateTrendLabels() in JS, empty (and so invisible, :empty above) until the controller connects. */ .obs-lane-summary { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--ink-faint); margin: 4px 0 0; } .obs-lane-summary:empty { display: none; } .obs-lane-strip { position: relative; min-height: 56px; } /* The visible mark stays a small 8px dot, but the clickable/hoverable hit area is a larger 22px invisible box around it (skill floor: ~24px) — an 8px-only hit target is unreliable to click precisely. */ .obs-dot { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); cursor: pointer; display: flex; align-items: center; justify-content: center; } .obs-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-colour, #999); opacity: 0.85; transition: transform 0.12s, opacity 0.12s; } .obs-dot:hover::before { transform: scale(1.6); opacity: 1; } .obs-lane-trend { display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 640px) { .obs-axis { grid-template-columns: 1fr; } .obs-axis-ticks { display: none; } /* no fixed label column to align against once lanes stack */ .obs-lane { grid-template-columns: 1fr; gap: 6px; } .obs-lane-name { white-space: normal; } /* a 460px single-line name doesn't fit once the column drops to full-width-stacked */ .obs-lane-strip { min-height: 44px; } .obs-lane-trend { justify-content: flex-start; } } /* ── cluster size boxes: an "at a glance" companion to the swimlanes below, area proportional to verbatim count (sqrt-scaled, not a packed treemap — see renderClusterBoxes()/boxSizeClass() in observatory_controller.js), shaded — one hue, the same pink used for this page's eyebrow — from darkest (the biggest cluster) to lightest (the smallest), a relative rank set per-box via the --box-tint custom property in JS rather than a fixed sentiment-coloured fill, so the boxes read as one size-ranked family rather than competing with the page's actual sentiment encoding (negative/neutral/positive, used everywhere else — map, legend, dots). ── */ .obs-boxes-hint { margin-top: 14px; margin-bottom: 0; padding: 0 20px; } .obs-boxes { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 20px; background: var(--line-soft); } .obs-box { --box-hue: #9D174D; /* matches .eyebrow-pink */ position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; background: color-mix(in srgb, var(--box-hue) var(--box-tint, 10%), var(--bg)); border: none; border-radius: 0; padding: 14px 16px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: filter 0.12s; } .obs-box:hover { filter: brightness(0.97); } .obs-box[hidden] { display: none; } /* Fixed to exactly 2 lines' worth of height so the stats row below always lands at the same vertical offset across every box, regardless of bucket — a 1-line name and a 2-line name otherwise pushed the count/negative%/ trend chip to different heights. The text itself is pre-truncated to fit in JS (truncateNames() in the controller, per-bucket character budgets) — CSS -webkit-line-clamp was tried here first but proved unreliable at narrow bucket widths (a long name would still render a 3rd line instead of clipping, growing that one box taller than same-bucket siblings — exactly this misalignment bug). overflow:hidden stays only as a safety net. A fixed pixel value (not em) deliberately, sized for the largest bucket's font (xl, 16px: 16 × 1.35 × 2 ≈ 43px) — an em value scales with each bucket's own font-size, so two *different*-size boxes sharing a flex-wrap row (common: boxes pack by width, not by bucket) would still end up with different-height name blocks. */ .obs-box-name { font-family: var(--font-sans); font-weight: 500; line-height: 1.35; color: var(--ink); min-height: 44px; overflow: hidden; } /* Always three stacked lines (count, negative%, trend pill) rather than a flex-wrap row — at narrower bucket widths the row wrapped inconsistently (sometimes the pill shared a line with "X% negative", sometimes it wrapped onto its own 3rd line), so the pill landed at a different vertical offset in different boxes even within the same visual row. A fixed one-item-per- line structure makes that offset identical for every box regardless of its bucket. */ .obs-box-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .obs-box-count, .obs-box-neg { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; } /* width communicates rank/size; min-height (not height) gives longer names or a wrapped stats row room to grow rather than clipping — a fixed height here previously cut off the negative% and trend chip on smaller boxes. */ .obs-box[data-box-size="xl"] { width: 336px; min-height: 136px; } .obs-box[data-box-size="l"] { width: 232px; min-height: 130px; } .obs-box[data-box-size="m"] { width: 180px; min-height: 116px; } .obs-box[data-box-size="s"] { width: 148px; min-height: 100px; } .obs-box[data-box-size="xs"] { width: 116px; min-height: 84px; } .obs-box[data-box-size="xl"] .obs-box-name { font-size: 16px; } .obs-box[data-box-size="l"] .obs-box-name { font-size: 15px; } .obs-box[data-box-size="m"] .obs-box-name { font-size: 13.5px; } .obs-box[data-box-size="s"] .obs-box-name { font-size: 12.5px; } .obs-box[data-box-size="xs"] .obs-box-name { font-size: 11.5px; } .obs-box[data-box-size="xs"] .obs-box-stats { display: none; } @media (max-width: 640px) { .obs-boxes { gap: 3px; padding: 14px; } .obs-box[data-box-size] { width: calc(50% - 2px) !important; } } /* ── trend chip: shared by boxes, lanes, and the drawer. Volume direction, not sentiment — deliberately neutral ink tones rather than red/green so it never reads as a second, competing sentiment encoding. ── */ .obs-trend { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 10.5px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line); white-space: nowrap; color: var(--ink-faint); } /* visibility (not display: none) — an empty chip still reserves its line's height, so a cluster with no computable trend doesn't end up one line shorter than its row siblings and throw off the same alignment this whole trend-chip/stats layout exists to guarantee. */ .obs-trend:empty { visibility: hidden; } .obs-trend[data-direction="up"] { color: var(--ink); border-color: var(--ink-faint); } .obs-trend[data-direction="new"] { font-style: italic; } /* ============================================================ The Proving Ground (/labs/proving-ground) — agent-eval matrix + bout detail. Reuses .lp-page/.lp-head/.lp-title/.lp-subtitle, .eyebrow, .lab-block-label, .dt-table/.dt-scroll, and .sl-empty for section rhythm and tables; only genuinely new components (verdict cells/chips, transcript turns, persona card) get their own .pg- classes. ============================================================ */ /* Screen-reader-only. Scoped to pg- rather than claiming a generic utility name in a stylesheet every page of the site loads. */ .pg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Section rhythm — a hairline rule and generous top space per section, matching the Observatory's and Monday Brief's treatment of the same shape. */ .pg-sec { margin-top: clamp(56px, 6vw, 72px); border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 32px); } .pg-sec-lead { margin-top: 0; border-top: none; padding-top: 0; } /* In-page anchor nav — plain mono links, same wayfinding tone as the eyebrow/lab-block-label mono voice elsewhere on the page. No sticky positioning, consistent with the site's minimal chrome. */ .pg-nav { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 2.5vw, 28px); margin: clamp(24px, 3vw, 32px) 0 clamp(40px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--line-soft); } .pg-nav a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; } .pg-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ---- 01 · explanatory prose ---- */ /* Runs the full width of the wrap rather than sitting in a narrow measure — the section heading and hint above it already span the container, and a short column under them read as unfinished. */ .pg-plain p { font-family: var(--font-sans); font-size: 16px; line-height: 1.72; color: var(--ink-muted); margin: 16px 0 0; } .pg-plain p:first-child { margin-top: 4px; } .pg-plain code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); } /* The five steps. Numbered markers are used here and nowhere else on the page, because this is the one part of the content that genuinely is a sequence — five things that happen in that order, every time. */ /* auto-fit rather than a hardcoded column count, so adding or removing a step doesn't mean editing the grid and three media queries to match. */ .pg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); list-style: none; margin: 0; padding: 0; } .pg-steps-label { margin-top: clamp(30px, 4vw, 40px); } /* The agent's three tools, as a numbered list —

disclosure for reference-only content (full prompts) — same label look as everywhere else, just made a focusable/clickable summary. */ .pg-details { margin-top: 24px; } .pg-details summary { cursor: pointer; list-style: none; } .pg-details summary::-webkit-details-marker { display: none; } .pg-details summary::before { content: "+"; display: inline-block; width: 1em; color: var(--ink-faint); } .pg-details[open] summary::before { content: "\2212"; } /* Criterion lanes. The plot is wide and short and the SVG stretches to fill it (preserveAspectRatio="none"), so every stroke uses non-scaling-stroke and the point markers are round-capped zero-length lines — a would render as an ellipse. Axis is truncated; LabsHelper#lane_domain guarantees no line can bottom out, and the caption prints the range. */ .pg-lanes { margin-top: clamp(30px, 4vw, 40px); } .pg-lane-axis, .pg-lane { display: grid; grid-template-columns: 152px 1fr 168px; align-items: center; gap: 0 4px; } .pg-lane-axis { padding-bottom: 7px; border-bottom: 1px solid var(--line); } .pg-lane { padding: 4px 0; border-bottom: 1px solid var(--line-soft); } .pg-lane-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .pg-lane-cap-r { text-align: right; } .pg-lane-ticks { display: flex; justify-content: space-between; padding: 0 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-faint); } /* overflow-wrap: anywhere because criterion names are single unbroken tokens — "no_hallucination" is wider than this column on a phone and would otherwise spill over the trend line rather than wrapping. */ .pg-lane-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); overflow-wrap: anywhere; } /* Clamped to two lines so every lane is the same height and the trend lines stay on a common grid — the full rubric text is a couple of sections up, and the title attribute carries it here. */ .pg-lane-name span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-sans); font-size: 12px; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; } .pg-lane-plot svg { display: block; width: 100%; height: 46px; } .pg-lane-area { fill: #207C36; opacity: 0.10; } .pg-lane-base { stroke: rgba(0,0,0,0.22); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } .pg-lane-line { fill: none; stroke: #207C36; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .pg-lane-dot { stroke: #207C36; stroke-width: 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.7; } .pg-lane-dot.is-last { stroke-width: 7; opacity: 1; } .pg-lane.is-down .pg-lane-area { fill: #D3686D; } .pg-lane.is-down .pg-lane-line, .pg-lane.is-down .pg-lane-dot { stroke: #D3686D; } .pg-lane-read { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; } .pg-lane-pct { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; } .pg-lane.is-down .pg-lane-pct { color: #D3686D; } .pg-lane-delta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; } .pg-lane-delta-up { background: #DCFFDC; color: #207C36; } .pg-lane-delta-down { background: #FFDCDC; color: #D3686D; } .pg-lane-delta-flat { background: rgba(0,0,0,0.05); color: var(--ink-faint); } .pg-lane-note { font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.6; max-width: 78ch; } /* ---- 05 · every verdict ---- */ .pg-tabs { display: flex; flex-wrap: wrap; gap: 2px 22px; border-bottom: 1px solid var(--line); margin-top: 4px; } .pg-tabs button { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint); padding: 0 0 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; } .pg-tabs button:hover { color: var(--ink); } .pg-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .pg-tabs button i { font-style: normal; color: var(--ink-faint); } .pg-grid-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); margin-top: 20px; } .pg-matrix-wrap { overflow-x: auto; } .pg-matrix { border-collapse: collapse; width: 100%; min-width: 520px; } .pg-matrix thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; font-weight: 400; color: var(--ink-faint); text-align: center; padding: 0 4px 9px; white-space: nowrap; } .pg-matrix thead th.l { text-align: left; padding-left: 0; } .pg-matrix tbody th { font-family: var(--font-mono); font-size: 12px; font-weight: 400; text-align: left; color: var(--ink); white-space: nowrap; padding: 4px 14px 4px 0; } .pg-matrix tbody th .pg-persona-emoji { margin-right: 8px; } /* Underlined at rest, not a hairline: a persona name is a door to that whole conversation, and nothing else on the row says so. */ .pg-matrix-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .pg-matrix-link:hover { text-decoration-color: var(--ink); } .pg-matrix th.pg-matrix-open, .pg-matrix td.pg-matrix-open { text-align: right; padding-left: 14px; white-space: nowrap; } .pg-matrix td { padding: 3px 2px; text-align: center; } /* Each cell links to that row's bout — the same destination as the persona name and the trailing "Read →", so these carry tabindex="-1" in the markup rather than adding six redundant tab stops per row. */ .pg-matrix-cell { display: block; width: 100%; height: 26px; border-radius: 5px; } a.pg-matrix-cell { cursor: pointer; transition: box-shadow 0.12s; } a.pg-matrix-cell:hover { box-shadow: 0 0 0 1px var(--ink); } .pg-matrix-cell-pass { background: #DCFFDC; } .pg-matrix-cell-fail { background: #FFDCDC; } .pg-matrix-cell-missing { background: repeating-linear-gradient(45deg, var(--line-soft) 0 2px, transparent 2px 4px); } .pg-matrix-legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); } .pg-matrix-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; } .pg-stream { align-self: start; min-width: 0; } .pg-stream-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); } .pg-stream-item { padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .pg-stream-item-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; } .pg-stream-persona { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-faint); } .pg-stream-item p { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-muted); } .pg-stream-empty { font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); padding: 20px 0; } /* ---- 06 · still open ---- */ .pg-open { border-top: 1px solid var(--line-soft); margin-top: 6px; } .pg-open-item { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; } .pg-open-item .pg-cell { justify-self: start; } .pg-open-item p { font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--ink-muted); } .pg-open-item p b { color: var(--ink); font-weight: 600; } /* Full width, matching every other block on the page. */ .pg-closing { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; font-style: italic; color: var(--ink); margin-top: 26px; } /* ---- responsive ---- */ @media (max-width: 1080px) { .pg-grid-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px) { /* .pg-steps is auto-fit and reflows on its own — no override needed */ .pg-terms { grid-template-columns: repeat(2, 1fr); } .pg-arc { grid-template-columns: repeat(2, 1fr); } .pg-tool-cards-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .pg-exhibit, .pg-method-grid { grid-template-columns: minmax(0, 1fr); } .pg-persona-grid, .pg-tool-cards { grid-template-columns: repeat(2, 1fr); } .pg-lane-axis, .pg-lane { grid-template-columns: 118px 1fr 128px; } } @media (max-width: 760px) { .pg-strip-head, .pg-strip-row { grid-template-columns: 96px 1fr 62px; gap: 10px; } .pg-strip-personas { display: none; } .pg-strip-groups { gap: 4px; } } @media (max-width: 640px) { .pg-terms, .pg-arc, .pg-criteria-grid, .pg-persona-grid, .pg-tool-cards, .pg-tool-cards-4 { grid-template-columns: 1fr; } .pg-open-item { grid-template-columns: 1fr; gap: 8px; } .pg-lane-axis, .pg-lane { grid-template-columns: 96px 1fr 104px; } .pg-lane-name span { display: none; } } /* ---- bout detail page ---- */ .pg-breadcrumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); margin: 0 0 18px; } .pg-breadcrumb a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; } .pg-breadcrumb a:hover { color: var(--ink); } /* Same customer, every version — the improvement arc at bout level, and the only place on the site that exposes it. Each chip carries that version's failure count for this persona, so the trend is legible before you click anything. */ .pg-siblings { display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(28px, 3.5vw, 40px); border-bottom: 1px solid var(--line-soft); } .pg-siblings-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .pg-siblings ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .pg-sibling { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); text-decoration: none; padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 9999px; } .pg-sibling i { font-style: normal; font-size: 10px; color: var(--ink-faint); } .pg-sibling:hover { color: var(--ink); border-color: var(--line); } .pg-sibling.is-current { color: var(--ink); border-color: var(--ink); } .pg-bout-back { margin-top: clamp(28px, 3vw, 36px); padding-top: 16px; border-top: 1px solid var(--line-soft); } .pg-bout-back a { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; } .pg-bout-back a:hover { color: var(--ink); } .pg-vs { color: var(--ink-faint); font-style: italic; } /* ---- persona intro — sets the scene before the verdict/transcript, so a reader gets the persona's motive, the hidden facts the agent couldn't see, and what a good outcome looks like, before judging the transcript themselves. Two-column blocks reuse the same pattern as the show page's own two-column blocks, for consistency. */ .pg-persona-intro { margin-top: clamp(24px, 3vw, 32px); margin-bottom: clamp(40px, 5vw, 56px); } .pg-persona-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); margin-top: 10px; } @media (max-width: 680px) { .pg-persona-intro-grid { grid-template-columns: 1fr; } } .pg-persona-intro-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } .pg-persona-intro-block p, .pg-persona-hidden li { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); } .pg-persona-resolves { margin-top: 20px; } /* the eval's whole asymmetry lives here — the judge sees this, the agent never does — so it gets a callout, not a plain paragraph in a sidebar. */ .pg-persona-hidden { margin-top: 20px; padding: 16px 18px; border: 1px solid color-mix(in srgb, #047857 30%, var(--line-soft)); background: color-mix(in srgb, #047857 4%, var(--bg)); border-radius: 10px; } .pg-persona-hidden-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #047857; margin-bottom: 10px; } .pg-persona-hidden ul { margin: 0; padding-left: 20px; } .pg-persona-hidden li { color: var(--ink); margin: 4px 0; } /* ============================================================ Shared chat transcript — used by BOTH the bout page and the show page's exhibit (section 02). Rendered by the reusable _chat_exchange partial (customer_message/tool_calls/agent_reply locals, no Proving Ground literals in that file). Bubbles carry a "tail" corner sharp on the side nearest the speaker; tool calls are borderless icon+text rows, not cards, so they read as quiet log lines above the reply. ============================================================ */ .pg-chat { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; } .pg-chat-row { display: flex; flex-direction: column; gap: 6px; max-width: 78%; min-width: 0; } .pg-chat-row-customer { align-items: flex-start; margin-right: auto; } .pg-chat-row-agent { align-items: flex-end; margin-left: auto; } @media (max-width: 680px) { .pg-chat-row { max-width: 92%; } } .pg-chat-speaker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 4px; } .pg-chat-bubble { padding: 14px 16px; font-size: 14.5px; line-height: 1.6; border-radius: 14px; border: 1px solid var(--line); overflow-wrap: break-word; min-width: 0; } .pg-chat-bubble-customer { background: var(--bg); color: var(--ink); border-bottom-left-radius: 3px; font-family: var(--font-sans); } .pg-chat-bubble-agent { background: #F4F9FF; border-color: #DCE9FB; color: var(--ink); border-bottom-right-radius: 3px; font-family: var(--font-sans); } /* Nested markdown (render_markdown) inside the agent bubble — compact version of .mb-brief's rules */ .pg-chat-bubble-agent p { margin: 0; } .pg-chat-bubble-agent p + p { margin-top: 10px; } .pg-chat-bubble-agent strong { font-weight: 600; } .pg-chat-bubble-agent em { font-style: italic; } .pg-chat-bubble-agent ul, .pg-chat-bubble-agent ol { margin: 8px 0 0; padding-left: 20px; } .pg-chat-bubble-agent li { margin: 3px 0; } .pg-chat-bubble-agent a { color: var(--ink); text-decoration: underline; } /* Tool-call rows — collapsed-by-default disclosures (same expand pattern as Monday Brief's action/observation trace, .mb-trace-action), but borderless: icon + muted-gray description + chevron, no card. Stacked right-aligned above the reply bubble, under the turn's single "Agent" speaker label. */ .pg-chat-actions { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; } /* text-align: right (not flex + justify-content) — .pg-chat-action-item wraps both the trigger button AND its collapsed detail panel; making the item a flex row put those two side by side, and the detail's hidden-but-still horizontally-laid-out width (max-height only collapses the vertical axis) ate space and pushed the button left. text-align only affects inline-level boxes (the inline-flex button), so the block-level detail panel underneath is unaffected and still stacks/expands downward as normal. */ .pg-chat-action-item { text-align: right; width: 100%; min-width: 0; } .pg-chat-action { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 4px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; } .pg-action-icon-svg { display: block; color: var(--ink-faint); } .pg-chat-action-label { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--ink-faint); } .pg-chat-action:hover .pg-chat-action-label, .pg-chat-action:hover .pg-action-icon-svg { color: var(--ink-muted); } .pg-chat-action .lp-step-chevron { color: var(--ink-faint); flex: 0 0 auto; transition: transform 0.15s; } .pg-chat-action[aria-expanded="true"] .lp-step-chevron { transform: rotate(90deg); } .pg-chat-action-detail { max-height: 0; overflow: hidden; transition: max-height 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .pg-chat-action-json { /* inline-block (not the

 default of block) so the box shrinks to fit
     its own content instead of always stretching the row's full width — a
     one-line {"tool": "check_account"} call shouldn't render as wide as a
     multi-field search query. text-align:right on the ancestor .pg-chat-
     action-item then positions this shrunk box at the right edge, matching
     the trigger button above it. */
  display: inline-block;
  max-width: 100%;
  margin: 4px 4px 6px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.pg-json-key { color: #1D4ED8; }
.pg-json-string { color: #047857; }

.pg-bout-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}