/* Companion Bench — public site stylesheet. * * No build step. Cozy light theme by default; .theme-dark on swaps * the variables. Theme persistence handled by assets/theme.js. */ :root { /* Cozy light */ --bg: #fffbf8; --bg-elev: #ffffff; --bg-soft: #f7f2ec; --bg-strip: #fcf8f5; --text: #1c1612; --text-muted: #7a6a5e; --header-color: #5a3d32; --subheader-color: #8a7163; --border: #e6e0d7; --accent-border: #d0c0b0; --accent: #b8754d; /* warm clay */ --accent-strong: #8a4f30; --accent-soft: rgba(184, 117, 77, 0.12); --good: #5a8a4a; --good-soft: rgba(90, 138, 74, 0.12); --bad: #b04848; --bad-soft: rgba(176, 72, 72, 0.12); --warn: #c0844f; --warn-soft: rgba(192, 132, 79, 0.14); --shadow: rgba(60, 40, 30, 0.08); --link: var(--accent-strong); --link-hover: var(--header-color); --code-bg: #f3eee6; --code-text: #3c2e25; --bar-track: #ece4d7; --bar-fill: var(--accent); --bar-fill-good: var(--good); --bar-fill-bad: var(--bad); --tag-bg: rgba(184, 117, 77, 0.16); --tag-text: var(--accent-strong); --tab-bg: transparent; --tab-active-bg: var(--bg-elev); --tab-active-text: var(--header-color); --judge-bg: #f5f2ed; --transcript-user-bg: #faf3ec; --transcript-asst-bg: #fbf8f3; --kbd-bg: #ffffff; --kbd-border: #c9bfb1; --header-bg: #fbf6f0; --footer-bg: #f7f1e9; } body.theme-dark { /* Cozy dark */ --bg: #1f1b18; --bg-elev: #28221e; --bg-soft: #2a2421; --bg-strip: #251f1c; --text: #f5ece0; --text-muted: #b9a995; --header-color: #f7eee0; --subheader-color: #d8c8b6; --border: #3a322c; --accent-border: #5a4a3e; --accent: #d49b71; --accent-strong: #e7b289; --accent-soft: rgba(212, 155, 113, 0.18); --good: #88c074; --good-soft: rgba(136, 192, 116, 0.16); --bad: #e08585; --bad-soft: rgba(224, 133, 133, 0.16); --warn: #e0a878; --warn-soft: rgba(224, 168, 120, 0.18); --shadow: rgba(0, 0, 0, 0.45); --link: var(--accent-strong); --link-hover: #fff7e8; --code-bg: #2c2522; --code-text: #f0d8b8; --bar-track: #3a322c; --bar-fill: var(--accent); --bar-fill-good: var(--good); --bar-fill-bad: var(--bad); --tag-bg: rgba(212, 155, 113, 0.18); --tag-text: var(--accent-strong); --tab-bg: transparent; --tab-active-bg: var(--bg-elev); --tab-active-text: var(--header-color); --judge-bg: #28221e; --transcript-user-bg: #2c2520; --transcript-asst-bg: #29231f; --kbd-bg: #1f1b18; --kbd-border: #4a4036; --header-bg: #25201c; --footer-bg: #221d19; } /* ---------- base reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 16px/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } h1, h2, h3, h4 { font-family: 'Lora', 'Iowan Old Style', Georgia, serif; color: var(--header-color); letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 0.5em; } h1 { font-size: 2.25rem; } h2 { font-size: 1.55rem; margin-top: 1em; } h3 { font-size: 1.2rem; margin-top: 1.2em; } h4 { font-size: 1rem; color: var(--subheader-color); } p, ul, ol { margin: 0 0 1rem; } ul, ol { padding-left: 1.4rem; } li { margin: 0.25rem 0; } code, kbd, pre, samp { font-family: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 0.9em; } code { background: var(--code-bg); color: var(--code-text); padding: 0.1em 0.4em; border-radius: 4px; } pre { background: var(--code-bg); border: 1px solid var(--border); padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; } pre code { background: none; padding: 0; } kbd { background: var(--kbd-bg); border: 1px solid var(--kbd-border); border-bottom-width: 2px; border-radius: 4px; padding: 0.1em 0.45em; font-size: 0.82em; } hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } /* ---------- layout ---------- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } .container-narrow { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; } main { padding: 2rem 0 4rem; } main section { margin-bottom: 3rem; } /* ---------- header / nav ---------- */ .site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); padding: 0.9rem 0; position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(4px); } .site-header .container { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .site-header .brand { display: flex; align-items: baseline; gap: 0.6rem; font-family: 'Lora', serif; color: var(--header-color); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; margin-right: auto; } .site-header .brand a { color: inherit; text-decoration: none; } .site-header .brand .version { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; font-family: 'Inter', sans-serif; background: var(--accent-soft); padding: 0.1em 0.5em; border-radius: 999px; } .site-header nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.93rem; } .site-header nav a { color: var(--subheader-color); text-decoration: none; padding: 0.3em 0; border-bottom: 2px solid transparent; transition: color 120ms, border-color 120ms; } .site-header nav a:hover { color: var(--header-color); border-bottom-color: var(--accent); } .site-header nav a.active { color: var(--header-color); border-bottom-color: var(--accent); } .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--subheader-color); width: 36px; height: 32px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms, color 120ms, border-color 120ms; } .theme-toggle:hover { background: var(--accent-soft); color: var(--header-color); border-color: var(--accent); } /* ---------- footer ---------- */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 1.6rem 0; color: var(--text-muted); font-size: 0.85rem; } .site-footer .container { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; justify-content: space-between; } .site-footer p { margin: 0.2rem 0; } .site-footer a { color: var(--subheader-color); } .site-footer a:hover { color: var(--header-color); } /* ---------- hero ---------- */ .hero { padding: 3rem 0 2rem; text-align: center; } .hero h1 { font-size: 2.8rem; margin: 0 0 0.5rem; } .hero .tagline { color: var(--subheader-color); font-size: 1.15rem; max-width: 720px; margin: 0 auto 1.4rem; } .hero .ctas { display: inline-flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; } .btn { display: inline-block; padding: 0.55em 1.1em; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fffbf8; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 120ms, transform 80ms; } .btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fffbf8; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.btn-ghost { background: transparent; color: var(--accent-strong); } .btn.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-strong); } /* ---------- banner ---------- */ .banner { padding: 0.85rem 1rem; border-radius: 8px; margin: 0 0 1rem; border-left: 4px solid var(--warn); background: var(--warn-soft); color: var(--text); font-size: 0.93rem; } .banner strong { color: var(--header-color); } /* ---------- table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); box-shadow: 0 1px 3px var(--shadow); } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; } table thead th { text-align: left; padding: 0.7rem 0.85rem; background: var(--bg-soft); border-bottom: 1px solid var(--border); color: var(--subheader-color); font-weight: 600; font-family: 'Lora', serif; white-space: nowrap; position: sticky; top: 0; z-index: 1; } table thead th.numeric, table tbody td.numeric { text-align: right; } table tbody td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } table tbody tr:last-child td { border-bottom: none; } table tbody tr:hover { background: var(--accent-soft); } .system-name { color: var(--text); font-weight: 500; } .system-id { color: var(--text-muted); font-size: 0.78rem; display: block; font-family: 'JetBrains Mono', monospace; } .companionbench-cell, .score-cell { font-weight: 600; color: var(--header-color); } .cap-tag, .category-tag, .family-tag, .axis-tag { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; } .cap-tag { background: var(--bad-soft); color: var(--bad); } .category-tag { background: var(--tag-bg); color: var(--tag-text); } .family-tag { background: var(--accent-soft); color: var(--accent-strong); } .axis-tag { background: var(--good-soft); color: var(--good); } /* ---------- filters ---------- */ .filters { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.92rem; flex-wrap: wrap; align-items: center; } .filters label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--subheader-color); } .filters select, .filters input[type="search"] { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); padding: 0.35rem 0.6rem; border-radius: 6px; font: inherit; min-width: 140px; } .filters input[type="search"] { min-width: 220px; } /* ---------- bars ---------- */ .bar { display: inline-block; position: relative; width: 100%; max-width: 220px; height: 8px; background: var(--bar-track); border-radius: 4px; overflow: hidden; vertical-align: middle; } .bar > .fill { display: block; height: 100%; background: var(--bar-fill); border-radius: 4px; transition: width 200ms ease-out; } .bar > .fill.good { background: var(--bar-fill-good); } .bar > .fill.bad { background: var(--bar-fill-bad); } .axis-row { display: grid; grid-template-columns: 80px 1fr 60px; gap: 0.7rem; align-items: center; margin: 0.4rem 0; font-size: 0.92rem; } .axis-row .label { color: var(--subheader-color); } .axis-row .value { font-variant-numeric: tabular-nums; text-align: right; color: var(--header-color); font-weight: 600; } /* ---------- card grid ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 3px var(--shadow); } .card h3 { margin-top: 0; } .card .meta { color: var(--text-muted); font-size: 0.85rem; } /* ---------- two-col ---------- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } } /* ---------- tabs ---------- */ .tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; overflow-x: auto; } .tabs button { background: var(--tab-bg); border: none; border-bottom: 2px solid transparent; padding: 0.55rem 1rem; color: var(--subheader-color); cursor: pointer; font: inherit; font-weight: 500; border-radius: 6px 6px 0 0; } .tabs button:hover { color: var(--header-color); } .tabs button.active { background: var(--tab-active-bg); color: var(--tab-active-text); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ---------- transcripts (used by results page) ---------- */ .session { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1.2rem; background: var(--bg-elev); overflow: hidden; } .session-header { background: var(--bg-soft); padding: 0.55rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; color: var(--subheader-color); cursor: pointer; user-select: none; } .session-header:hover { background: var(--accent-soft); } .session-body { display: none; padding: 1rem 1rem 0.4rem; } .session.open .session-body { display: block; } .session.open .session-header .toggle::before { content: "▾ "; } .session .session-header .toggle::before { content: "▸ "; } .turn { margin-bottom: 0.8rem; border-radius: 8px; padding: 0.7rem 0.9rem; border: 1px solid var(--border); } .turn.user { background: var(--transcript-user-bg); } .turn.asst { background: var(--transcript-asst-bg); } .turn .turn-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.25rem; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; } .turn .turn-text { white-space: pre-wrap; word-break: break-word; } .turn .fsm-marker { background: var(--accent-soft); color: var(--accent-strong); padding: 0.1em 0.45em; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; } /* callback ledger */ .callback-list { list-style: none; padding-left: 0; } .callback-list li { padding: 0.55rem 0.7rem; margin-bottom: 0.4rem; border-radius: 8px; border-left: 4px solid var(--good); background: var(--good-soft); } .callback-list li.fab { border-left-color: var(--bad); background: var(--bad-soft); } .callback-list .claim { font-style: italic; color: var(--text); } .callback-list .evidence { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--text-muted); } /* heatmap (per-turn rubric) */ .heatmap-svg { max-width: 100%; height: auto; } /* judge box */ .judge-box { background: var(--judge-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 0.7rem; } .judge-box h4 { margin: 0 0 0.3rem; color: var(--header-color); font-family: 'Lora', serif; font-size: 0.95rem; } /* ---------- compare-page side-by-side ---------- */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 980px) { .compare-grid { grid-template-columns: 1fr; } } .compare-grid .turn.turn-hover { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 0 4px var(--accent-soft); } /* ---------- meta line ---------- */ .meta { color: var(--text-muted); font-size: 0.85rem; } /* ---------- utility ---------- */ .text-muted { color: var(--text-muted); } .text-good { color: var(--good); } .text-bad { color: var(--bad); } .text-accent { color: var(--accent-strong); } .right { text-align: right; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .no-wrap { white-space: nowrap; } /* ---------- print-friendly ---------- */ @media print { .site-header, .site-footer, .filters, .theme-toggle { display: none; } body { background: white; color: black; } }