/* ========================================================================== * Theme tokens * * Colors are exposed as CSS custom properties so the runtime can flip the * whole app between dark and light by setting `data-theme` on . * Default (no attribute) is dark — matches the design reference. * ========================================================================== */ :root, :root[data-theme="dark"] { /* Surfaces */ --bg: #0a0d12; --surface: #141822; --surface-2: #1c2130; --surface-3: #232838; --border: #2a2f3e; /* Text */ --text: #f5f7fa; --muted: #7d8595; /* Brand */ --accent: #ff5e3a; /* coral-orange — primary CTA */ --accent-hover: #ff7a5a; --accent-soft: rgba(255, 94, 58, 0.16); --accent-grad: linear-gradient(135deg, #ff5e3a 0%, #ff8b3d 100%); --accent-grad-hover: linear-gradient(135deg, #ff7a5a 0%, #ffa05a 100%); /* Semantic */ --success: #34d399; --success-soft: rgba(52, 211, 153, 0.16); --danger: #ef4444; --warn: #f59e0b; --info: #ec4899; /* pink secondary, e.g. for chart accents */ --info-soft: rgba(236, 72, 153, 0.16); --shadow: 0 8px 24px rgba(0, 0, 0, 0.45); --backdrop: rgba(0, 0, 0, 0.6); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-sans: -apple-system, "Segoe UI", Roboto, sans-serif; } :root[data-theme="light"] { --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f1f3f7; --surface-3: #e7eaf1; --border: #dee1e8; --text: #0a0d12; --muted: #5b6477; --accent: #ff5e3a; --accent-hover: #f44d23; --accent-soft: rgba(255, 94, 58, 0.12); --accent-grad: linear-gradient(135deg, #ff5e3a 0%, #ff8b3d 100%); --accent-grad-hover: linear-gradient(135deg, #f44d23 0%, #ff7a2d 100%); --success: #10b981; --success-soft: rgba(16, 185, 129, 0.12); --danger: #dc2626; --warn: #d97706; --info: #db2777; --info-soft: rgba(219, 39, 119, 0.12); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --backdrop: rgba(15, 23, 42, 0.45); } * { box-sizing: border-box; } /* Feather icons are SVGs that inherit currentColor; sit on the text baseline * with vertical-align:middle so they look right next to label text. */ .icon { display: inline-block; flex-shrink: 0; vertical-align: middle; stroke: currentColor; fill: none; } .btn .icon { margin-right: 0; } .btn .icon + span, .btn span + .icon { margin-left: 6px; } .icon-only { /* For circular/square icon-only buttons. */ padding: 6px; line-height: 0; } html { height: 100%; } /* Body is the top-level flex row: sidebar + main pane. * * IMPORTANT: html is *not* display:flex. If it were, body would default to * flex: 0 1 auto and shrink to its content width (sidebar + flex-basis-0 * content = 240px), leaving everything past 240px as a dead black strip. */ body { height: 100%; width: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; display: flex; overflow: hidden; min-width: 480px; min-height: 320px; /* Smooth fade between themes — restricted to color/background so we don't * accidentally animate every layout change. */ transition: background-color 220ms ease, color 220ms ease; } #sidebar, #content, .topbar, .toolbar, .modal-card, .btn, .modal-card-wide, .tab, table.results td, table.results th { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; } button { font: inherit; color: inherit; cursor: pointer; } input, select { font: inherit; color: inherit; } .btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 8px; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } .btn:hover { background: var(--surface-3); border-color: var(--surface-3); } .btn-primary { background: var(--accent-grad); border-color: transparent; color: #ffffff; font-weight: 600; box-shadow: 0 4px 12px var(--accent-soft); } .btn-primary:hover { background: var(--accent-grad-hover); box-shadow: 0 6px 16px var(--accent-soft); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-2); } .hidden { display: none !important; } /* Sidebar */ #sidebar { flex: 0 0 240px; min-width: 180px; max-width: 30vw; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 12px; overflow: hidden; } .sidebar-header { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; } .sidebar-list { list-style: none; padding: 0; margin: 0 0 8px 0; flex: 1; overflow: auto; } .sidebar-list li { padding: 8px 10px; border-radius: 6px; margin-bottom: 2px; cursor: pointer; } .sidebar-list li:hover { background: var(--surface-2); } .sidebar-list li.active { background: var(--surface-2); border-left: 2px solid var(--accent); } .sidebar-list li .delete { float: right; color: var(--muted); opacity: 0; transition: opacity 120ms; } .sidebar-list li:hover .delete { opacity: 1; } /* Main pane — claims every pixel left over after the sidebar. */ #content { flex: 1 1 0%; min-width: 0; width: 100%; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); gap: 12px; background: var(--surface); flex-wrap: wrap; } .title { font-size: 16px; font-weight: 600; } .meta { color: var(--muted); font-size: 12px; flex: 1 1 200px; min-width: 0; } .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface); } .toolbar .inline { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .toolbar input { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); width: 120px; } .toolbar input[type="number"] { width: 60px; } .log { flex: 1; overflow: auto; padding: 16px 18px; font-family: var(--font-sans); } .log .entry { margin-bottom: 14px; border-left: 2px solid var(--border); padding: 2px 10px; /* Each entry is a block in the log column — span the full width of the * scroll container so result tables don't look constrained on wide * monitors. */ width: 100%; box-sizing: border-box; } .log .entry.success { border-color: var(--success); } .log .entry.error { border-color: var(--danger); color: var(--danger); } .log .entry.info { border-color: var(--accent); } /* Tables */ table.results { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; } table.results th, table.results td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); } table.results th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } table.results .combo { font-weight: 600; } table.results .score { color: var(--success); } table.results .contrib { color: var(--muted); } table.results .recency { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; width: 4ch; cursor: help; } /* Modals * * Sizing rules: * - width capped at 95vw, height capped at 90vh (always fits the window) * - the card itself is a flex column; an inner element gets `overflow: auto` * so long content scrolls *inside* the card instead of pushing it offscreen * - on small viewports, the backdrop padding pulls the card off the edges */ .modal { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; overflow: auto; } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; width: min(480px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } /* Plain modal-card (e.g. New Analysis): the card itself is the scroll * container, so all direct children stay at intrinsic size. */ .modal-card:not(.modal-card-wide) { overflow: auto; } .modal-card:not(.modal-card-wide) > * { flex: 0 0 auto; } /* Wide modal (Load + Settings): only the active tab-body grows; everything * else stays at intrinsic height. */ .modal-card-wide > * { flex: 0 0 auto; } .modal-card-wide > .tab-body { flex: 1 1 auto; min-height: 0; } .modal-card-wide { /* Scale with the window: 90vw / 92vh, but cap so the modal doesn't run * to the literal screen edges on large 4K monitors. The min(N, 95vw) * pattern means: take the smaller of (1280 px, 90% of viewport width). */ width: min(1280px, 90vw); height: min(960px, 92vh); padding: 0; } .modal-card h2 { margin: 0 0 14px; } .modal-card fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 10px 0; display: flex; gap: 10px; flex-wrap: wrap; } .modal-card fieldset legend { padding: 0 6px; color: var(--muted); } .modal-card label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .modal-card label input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; width: 120px; max-width: 100%; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-shrink: 0; } .checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--text); } .checkbox-row input[type="checkbox"] { width: auto; } .title-input { background: var(--surface-2); border: 1px solid transparent; color: var(--text); font: inherit; font-weight: 600; font-size: 16px; padding: 4px 8px; border-radius: 4px; /* Grow to share the topbar's free space, capped so it doesn't dominate. */ flex: 1 1 240px; min-width: 200px; max-width: 720px; } .title-input:hover { border-color: var(--border); } .title-input:focus { border-color: var(--accent); outline: none; background: var(--bg); } .modal-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--surface-2); padding: 0 6px; border-radius: 10px 10px 0 0; flex-shrink: 0; } .tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 12px 16px; color: var(--muted); } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-color: var(--accent); } .modal-close { margin-left: auto; } /* Tab bodies are the scroll container for tabbed modals. The wide card uses * `display: flex; flex-direction: column;` and gives all four bodies * `flex: 1; overflow: auto;` so content longer than the card scrolls * internally rather than pushing the card off-viewport. */ .tab-body { padding: 20px 24px; overflow: auto; flex: 1 1 auto; min-height: 0; } .tab-body h3 { margin-top: 0; color: var(--muted); font-weight: 500; letter-spacing: 0.06em; } .tab-body.hidden { display: none; } .mode-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; margin-left: 6px; cursor: help; } .mode-badge.live { background: var(--success-soft); color: var(--success); } .mode-badge.snapshot { background: var(--accent-soft); color: var(--accent); } .rule-row { display: grid; grid-template-columns: 24px minmax(120px, 180px) 70px 70px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .rule-row .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rule Builder modal */ .modal-tabs .modal-title { padding: 12px 16px; font-weight: 600; flex: 1; } .modal-tabs.sub-tabs { background: var(--bg); border-radius: 6px; } .builder-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; } .builder-grid > div { display: flex; flex-direction: column; gap: 10px; } .builder-grid h4 { margin: 12px 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .builder-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; } .builder-grid label input, .builder-grid label select { padding: 6px 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; width: 100%; } .builder-grid label input.formula-input, .builder-grid #rb-formula, code.formula-input { font-family: var(--font-mono); } .builder-grid label input.invalid { border-color: var(--danger); } #rb-preset-params, #rb-scoring-params { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .builder-preview { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; } /* Rule discovery (GP) — Output tab section. */ .discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; } .discovery-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .discovery-grid label input { padding: 4px 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-size: 13px; width: 100%; } .d-include-bonus { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; } .d-include-bonus input[type="checkbox"] { margin: 0; } progress { appearance: none; -webkit-appearance: none; height: 6px; border: none; border-radius: 3px; background: var(--surface-2); } progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 3px; } progress::-webkit-progress-value { background: var(--accent-grad); border-radius: 3px; } /* Discovery-tab tutorial mockups */ .rd-fitness-bar { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin: 4px 0; flex-wrap: wrap; } .rd-fitness-label { color: var(--accent); font-weight: 600; } .rd-fitness-formula { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .rd-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; } .rd-tag-good { background: var(--success-soft); color: var(--success); } .rd-split-strip { display: flex; height: 22px; border-radius: 5px; overflow: hidden; margin: 6px 0; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .rd-split-train, .rd-split-test { display: flex; align-items: center; justify-content: center; color: #fff; } .rd-split-train { background: var(--accent); } .rd-split-test { background: var(--info); } /* Discovery result card — explainer-style metric grid */ .rd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; } .rd-metric { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: help; position: relative; } .rd-metric-value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: var(--text); line-height: 1.1; } .rd-metric-name { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; font-weight: 600; } .rd-metric-hint { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.35; } /* Per-band accent colour on the value + a left border tint. */ .rd-metric-good { border-left: 3px solid var(--success); } .rd-metric-good .rd-metric-value { color: var(--success); } .rd-metric-ok { border-left: 3px solid var(--accent); } .rd-metric-ok .rd-metric-value { color: var(--accent); } .rd-metric-weak { border-left: 3px solid var(--warn); } .rd-metric-weak .rd-metric-value { color: var(--warn); } .rd-metric-bad { border-left: 3px solid var(--danger); } .rd-metric-bad .rd-metric-value { color: var(--danger); } .rd-verdict-hint { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; font-size: 12px; background: var(--surface-2); color: var(--text); line-height: 1.4; } .rd-verdict-hint[data-band="good"] { background: var(--success-soft); color: var(--success); } .rd-verdict-hint[data-band="ok"] { background: var(--accent-soft); color: var(--accent); } .rd-verdict-hint[data-band="weak"] { color: var(--warn); } .rd-verdict-hint[data-band="bad"] { color: var(--danger); } /* Noise-floor axis on the result card. * * Visualises where the discovered fitness sits relative to the * mathematical ~0.25 ceiling for uniform-random lottery data. * 0..0.25 = noise zone (warning tint), 0.25..0.35 = edge, * 0.35..1.0 = above ceiling (success tint). A vertical marker shows * the fitness; a dashed line marks the 0.25 ceiling. */ .rd-noise-axis { margin: 8px 0 4px; font-family: var(--font-mono); font-size: 9px; color: var(--muted); cursor: help; } .rd-noise-track { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: visible; } .rd-noise-zone-noise, .rd-noise-zone-edge, .rd-noise-zone-good { position: absolute; top: 0; bottom: 0; border-radius: 5px; } .rd-noise-zone-noise { background: rgba(245, 158, 11, 0.18); } .rd-noise-zone-edge { background: rgba(124, 139, 255, 0.12); } .rd-noise-zone-good { background: rgba(52, 211, 153, 0.18); } .rd-noise-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--text); border-radius: 2px; transform: translateX(-50%); } .rd-noise-ceiling { position: absolute; top: -2px; bottom: -2px; width: 1px; border-left: 1px dashed var(--warn); transform: translateX(-50%); } .rd-noise-labels { position: relative; height: 12px; margin-top: 2px; } .rd-noise-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .rd-noise-ceiling-label { color: var(--warn); } /* Saved-discoveries library * * Card layout (per row): * [✓] [name (editable, flex)] [fit pill] [trash] ← header row * [tr%] [te%] [rd%] [w 1.0] ← stats row * [formula ] ← code line * [converged badge] [50 gen · 134 draws] [date] ← meta row */ .rd-lib-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; } .rd-lib-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .rd-lib-check { flex: 0 0 auto; margin: 0; } .rd-lib-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-lib-fit { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 2px 8px; border-radius: 4px; } .rd-lib-kind { flex: 0 0 auto; cursor: pointer; border: 1px solid transparent; font-size: 10px; font-weight: 800; font-family: var(--font-mono); letter-spacing: 0.08em; padding: 3px 8px; border-radius: 3px; transition: filter 120ms; } .rd-lib-kind:hover { filter: brightness(1.12); } /* BOOST = scorer — green so the "good for scoring" intent is loud. */ .rd-lib-kind-scorer { background: var(--success-soft); color: var(--success); border-color: var(--success); } /* REJECT = filter — amber so the "drops combos" warning is obvious. */ .rd-lib-kind-filter { background: rgba(245, 158, 11, 0.18); color: var(--warn); border-color: var(--warn); } .rd-lib-legend { display: flex; flex-direction: column; gap: 4px; font-size: 11px; padding: 8px 10px; margin-bottom: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .rd-lib-legend-cta { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border); flex-wrap: wrap; } .rd-lib-legend-cta .btn { padding: 4px 10px; font-size: 11px; } .rd-lib-mini { font-family: var(--font-mono); font-size: 10px; color: var(--muted); padding: 2px 6px; border-radius: 3px; background: var(--surface-2); } .rd-lib-weight-wrap { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); } .rd-lib-weight { width: 44px; font-size: 11px; padding: 2px 4px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; } .rd-lib-formula { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text); background: var(--bg); padding: 6px 8px; border-radius: 4px; word-break: break-word; } .rd-lib-meta { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--muted); flex-wrap: wrap; } .rd-lib-badge { background: var(--surface-2); color: var(--muted); padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .rd-lib-badge-good { background: var(--success-soft); color: var(--success); } .rd-lib-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .rd-lib-name[contenteditable="true"] { outline: none; border-radius: 4px; padding: 1px 4px; cursor: text; border: 1px solid transparent; flex: 1 1 auto; } .rd-lib-name[contenteditable="true"]:hover { background: var(--surface-2); } .rd-lib-name[contenteditable="true"]:focus { background: var(--bg); border-color: var(--accent); } /* ============================================================================ * Discovery tab — 2-column layout (form on the left, saved library on right) * ============================================================================ */ .d-layout { display: grid; grid-template-columns: 1fr min(360px, 38%); gap: 18px; align-items: start; } .d-main { min-width: 0; } .d-side { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; position: sticky; top: 0; max-height: 80vh; overflow-y: auto; } .d-side-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .d-side-header strong { font-size: 13px; } .d-side-hint { color: var(--muted); font-size: 11px; } @media (max-width: 720px) { .d-layout { grid-template-columns: 1fr; } .d-side { position: static; max-height: none; } } /* ============================================================================ * Main view — Active rules pane (right of the analysis log) * * Sits next to #content as a flex sibling. Width fixed; collapses to a tiny * floating button so users can hide it without losing access. * ============================================================================ */ #rules-pane { flex: 0 0 280px; min-width: 240px; max-width: 320px; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: flex-basis 200ms ease; } #rules-pane.hidden { display: none; } .rules-pane-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .rules-pane-header strong { font-size: 13px; } .rules-pane-count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .rules-pane-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 16px; } .rules-pane-empty { padding: 14px 8px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; } .rp-group + .rp-group { margin-top: 14px; } .rp-group-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px; } .rp-rule { display: grid; grid-template-columns: 1fr 50px 24px; gap: 6px; align-items: center; padding: 4px 0; font-size: 12px; } .rp-rule-name { font-family: var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-rule-weight { width: 100%; padding: 2px 4px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; font-size: 11px; } .rp-rule-del { padding: 4px; line-height: 0; } /* Floating "expand" button shown when the pane is collapsed. */ .rules-pane-expand { position: fixed; top: 14px; right: 14px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-grad); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); } .rules-pane-expand.hidden { display: none; } /* ============================================================================ * Tutorial graphics (Rule Builder + Discovery) * Small, theme-aware visuals that explain abstract concepts at a glance. * ============================================================================ */ /* Rule Builder Step 4 — scoring mode curves */ .rb-scoring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; } .rb-sc-card { display: flex; flex-direction: column; align-items: stretch; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .rb-sc-curve { width: 100%; height: 32px; margin-bottom: 4px; } .rb-sc-curve path, .rb-sc-curve line { stroke: var(--accent); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .rb-sc-curve rect { fill: var(--accent); } .rb-sc-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text); } .rb-sc-hint { font-size: 10px; color: var(--muted); line-height: 1.3; } /* Discovery Step 2 — search-budget dot grid */ .rd-budget-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; margin: 8px 0; position: relative; } .rd-budget-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; opacity: 0.6; margin: auto; } /* Dim the corner-most dots so the grid reads as "lots of evals". */ .rd-budget-dot:nth-child(8n+1), .rd-budget-dot:nth-child(8n+8) { opacity: 0.4; } .rd-budget-x, .rd-budget-y { grid-column: 1 / -1; font-size: 10px; color: var(--muted); text-align: center; } .rd-budget-y { text-align: left; } /* Discovery Step 3 — formula trees */ .rd-tree-row { display: flex; gap: 14px; margin: 8px 0 4px; flex-wrap: wrap; } .rd-tree { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .rd-tree-label { font-size: 10px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .rd-tree svg { width: 90px; height: auto; } .rd-tree svg line { stroke: var(--muted); stroke-width: 1; } .rd-tree svg circle { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.4; } .rd-tree svg text { fill: var(--text); font-family: var(--font-mono); font-size: 7px; font-weight: 600; } /* Discovery Step 4 — tournament + threshold bar */ .rd-tournament { display: grid; grid-template-columns: repeat(4, 1fr) auto auto; gap: 6px; align-items: center; margin: 8px 0; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .rd-cand { text-align: center; padding: 6px 4px; border-radius: 4px; background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; position: relative; } .rd-cand-name { font-weight: 700; color: var(--text); } .rd-cand-fit { color: var(--muted); font-size: 10px; } .rd-cand-medal { position: absolute; top: -4px; right: -4px; background: var(--accent); color: #fff; border-radius: 50%; width: 14px; height: 14px; font-size: 9px; display: flex; align-items: center; justify-content: center; } .rd-cand-winner { background: var(--success-soft); border: 1px solid var(--success); } .rd-cand-winner .rd-cand-name { color: var(--success); } .rd-tournament-arrow { color: var(--muted); padding: 0 4px; } .rd-tournament-out { color: var(--accent); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } .rd-threshold-bar { position: relative; height: 24px; background: var(--surface-2); border-radius: 3px; margin: 8px 0 16px; } .rd-threshold-fill { height: 100%; background: var(--accent-grad); border-radius: 3px; opacity: 0.7; } .rd-threshold-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--success); cursor: help; } .rd-threshold-marker::after { content: "0.95"; position: absolute; top: -14px; left: -10px; font-size: 9px; color: var(--success); font-weight: 600; font-family: var(--font-mono); } .rd-threshold-axis { position: absolute; left: 0; right: 0; bottom: -14px; display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); font-family: var(--font-mono); } /* Discovery Step 6 — seed determinism table */ .rd-seed-table { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px; margin: 8px 0; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .rd-seed-cell { font-family: var(--font-mono); font-size: 11px; padding: 4px 6px; } .rd-seed-input { color: var(--muted); } .rd-seed-arrow { color: var(--muted); text-align: center; } .rd-seed-output { color: var(--text); } .rd-seed-same { background: var(--success-soft); color: var(--success); border-radius: 4px; } .rd-seed-diff { background: var(--accent-soft); color: var(--accent); border-radius: 4px; } /* Discovery Step 7 — annotated result mockup */ .rd-result-mock { margin: 8px 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } .rd-result-mock-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 12px; } .rd-result-mock-verdict { color: var(--success); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .rd-result-mock-formula { display: block; background: var(--surface-2); padding: 5px 8px; border-radius: 4px; font-size: 11px; font-family: var(--font-mono); color: var(--text); margin: 4px 0; } .rd-result-mock-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; } .rd-result-mock-metric { text-align: center; padding: 6px 2px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; } .rd-rm-val { font-family: var(--font-mono); font-weight: 700; font-size: 14px; } .rd-rm-label { font-size: 9px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.08em; } .rd-band-good { border-left-color: var(--success); } .rd-band-good .rd-rm-val { color: var(--success); } .rd-result-mock-anno { position: relative; height: 18px; margin-top: 4px; } .rd-result-mock-anno span { position: absolute; font-size: 9px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; } @media (max-width: 720px) { .builder-grid { grid-template-columns: 1fr; } } /* ============================================================================ * Rule Builder tutorial * * Numbered step cards with stylised "screenshots" — small mock widgets built * from real CSS so each step shows what the user should be looking at in the * actual form. The mocks share visual language with the real UI (same font * stack, same border + surface tokens) so the connection is obvious. * ============================================================================ */ .rb-tutorial { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; overflow: hidden; } .rb-tutorial-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-3); } .rb-tutorial-header strong { font-weight: 600; } .rb-tutorial-header > span:nth-of-type(2) { flex: 1; } /* Whole header row toggles — make it look interactive even when expanded. */ .rb-tutorial-header { cursor: pointer; user-select: none; } .rb-tutorial-header:hover { background: var(--border); } .rb-tutorial.collapsed .rb-tutorial-header { border-bottom-color: transparent; background: var(--accent-soft); } .rb-tutorial.collapsed .rb-tutorial-header strong { color: var(--accent); } .rb-tutorial.collapsed .rb-tutorial-steps { display: none; } /* Collapsed-state hint — visible only when the tutorial is hidden. */ .rb-tut-collapsed-hint { display: none; color: var(--accent); font-size: 12px; } .rb-tutorial.collapsed .rb-tut-collapsed-hint { display: inline; } .rb-tutorial:not(.collapsed) .rb-tut-expanded-hint { color: var(--muted); font-size: 12px; } .rb-tutorial.collapsed .rb-tut-expanded-hint { display: none; } .rb-tutorial-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding: 16px; } .rb-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; align-items: start; } .rb-step h5 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--text); } .rb-step p { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; } .rb-step p:last-child { margin-bottom: 0; } .rb-step code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; color: var(--text); } .rb-step-num { display: inline-flex; width: 24px; height: 24px; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: 12px; border-radius: 50%; align-items: center; justify-content: center; margin-top: 1px; } .rb-step-aside { margin-top: 6px !important; font-style: italic; font-size: 11px !important; } /* Step 1 mock — fake form labels */ .rb-mock { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .rb-mock-label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); } .rb-mock-input { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-family: var(--font-mono); color: var(--text); font-size: 12px; } /* Step 2 mock — cell row */ .rb-cells-diagram { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .rb-cell { display: flex; flex-direction: column; align-items: center; min-width: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); overflow: hidden; } .rb-cell-letter { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; width: 100%; text-align: center; } .rb-cell-num { padding: 4px 6px; font-family: var(--font-mono); font-size: 13px; color: var(--text); } .rb-cell-bonus .rb-cell-letter { color: var(--info); background: var(--info-soft); } /* Step 2: cross-draw history strip */ .rb-history-strip { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .rb-hist-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); } .rb-hist-label { flex: 0 0 90px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .rb-hist-cell { display: inline-flex; flex-direction: column; align-items: center; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); min-width: 40px; overflow: hidden; } .rb-hist-letter { font-size: 9px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 4px; width: 100%; text-align: center; letter-spacing: 0.04em; } .rb-hist-num { padding: 2px 4px; font-size: 11px; color: var(--text); } .rb-hist-future .rb-hist-cell { opacity: 0.6; border-style: dashed; } .rb-hist-future .rb-hist-letter { color: var(--muted); background: transparent; } /* Step 3 mock — tab pair + formula row */ .rb-mock-tabs { display: inline-flex; background: var(--bg); border-radius: 6px; padding: 3px; border: 1px solid var(--border); margin: 4px 0; } .rb-mock-tab { padding: 4px 12px; font-size: 11px; border-radius: 4px; color: var(--muted); } .rb-mock-tab-active { background: var(--surface-2); color: var(--text); font-weight: 600; } .rb-formula-row { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 8px; margin: 6px 0; } .rb-formula-prefix { color: var(--accent); font-weight: 700; margin-right: 6px; font-family: var(--font-mono); } .rb-formula-mock { font-family: var(--font-mono); font-size: 12px; color: var(--text); background: transparent; padding: 0; } /* Step 4 mock — scoring list */ .rb-scoring-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); } .rb-scoring-list li { line-height: 1.5; } .rb-scoring-list strong { color: var(--accent); font-family: var(--font-mono); } /* Step 5 mock — preview strip */ .rb-mock-preview { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); margin-top: 4px; font-size: 12px; } /* Step 6 mock — rendered rule row */ .rb-mock-rule-row { display: grid; grid-template-columns: 24px auto auto auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; font-size: 12px; } .rb-mock-checkbox { display: inline-flex; width: 18px; height: 18px; background: var(--accent-grad); color: #fff; align-items: center; justify-content: center; border-radius: 4px; font-size: 11px; font-weight: 700; } .rb-mock-rule-name { font-weight: 600; } .rb-mock-rule-kind { font-family: var(--font-mono); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .rb-mock-rule-weight { font-family: var(--font-mono); color: var(--success); font-size: 11px; } .rb-mock-rule-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rule-group { margin-top: 18px; } .rule-group + .rule-group { margin-top: 22px; } .rule-group-header { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--accent); margin-bottom: 4px; } .rule-group-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); } .rule-group-count { flex: 1; font-size: 11px; color: var(--muted); font-family: var(--font-mono); } .rule-group-toggle { font-size: 11px; padding: 2px 8px; } .rule-row.header { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; } .rule-row input[type=number] { width: 60px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 2px 6px; } .rule-row .desc { color: var(--muted); } .rule-row .kind { font-family: var(--font-mono); color: var(--muted); font-size: 11px; } /* ---- Backend tab + re-auth banner ---------------------------------------- */ .backend-form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; } .backend-mode { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .backend-mode .radio-row { display: flex; align-items: center; gap: 8px; } .backend-mode .radio-row em { color: var(--muted); font-style: normal; font-size: 12px; } .backend-remote-fields { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; transition: opacity 120ms; } .backend-remote-fields .form-row { display: flex; align-items: center; gap: 12px; } .backend-remote-fields .form-row > span { width: 56px; color: var(--muted); } .backend-remote-fields input { flex: 1; } .backend-hint { color: var(--muted); font-size: 12px; margin: 0; } .reauth-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--surface-2, #2a1f1f); border-bottom: 1px solid var(--border); color: var(--text); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } /* ---- Campaign panel (Discovery tab) -------------------------------------- */ .campaign-panel { margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--surface-2, transparent); } .campaign-panel > summary { cursor: pointer; font-weight: 600; padding: 4px 0; } .campaign-blurb { color: var(--muted); font-size: 12px; margin: 6px 0 12px; } .campaign-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .campaign-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .campaign-criteria { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin: 8px 0; } .campaign-criteria legend { font-size: 12px; color: var(--muted); padding: 0 4px; } .campaign-criteria .radio-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .campaign-criteria .radio-row em { color: var(--muted); font-style: normal; font-size: 11px; } .campaign-mode-fields { display: flex; gap: 12px; flex-wrap: wrap; padding-left: 22px; padding-bottom: 6px; } .campaign-mode-fields label { display: flex; align-items: center; gap: 6px; font-size: 12px; } .campaign-phase { color: var(--muted); font-family: var(--font-mono); font-size: 11px; margin: 4px 0; } .campaign-summary { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; } .campaign-summary-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; } .campaign-summary-table { width: 100%; border-collapse: collapse; font-size: 12px; } .campaign-summary-table th, .campaign-summary-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); } .campaign-summary-table th { color: var(--muted); font-weight: 600; } .campaign-summary-table code { font-family: var(--font-mono); font-size: 11px; } .campaign-summary-table em { color: var(--muted); } /* ---- Campaign progress (live metrics + per-run mini-bars) ---------------- */ .campaign-overall { margin-bottom: 6px; } .campaign-meta-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin: 4px 0 8px; } .campaign-meta-row .campaign-meta-cell { display: inline-flex; align-items: center; gap: 4px; } .campaign-meta-row code { color: var(--text); font-family: var(--font-mono); font-size: 11px; } .campaign-active { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; } .campaign-active-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 8px; align-items: center; font-size: 11px; } .campaign-active-label { font-family: var(--font-mono); color: var(--muted); } .campaign-active-bar { width: 100%; height: 6px; } .campaign-active-phase { color: var(--muted); font-size: 11px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Discovery library toolbar + pagination + sliding pages -------------- */ .lib-toolbar { display: flex; gap: 6px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; } .lib-toolbar input[type="search"] { flex: 1 1 100%; min-width: 0; padding: 4px 8px; font-size: 12px; } .lib-sortbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 6px; font-size: 11px; } .lib-sortbar-label { color: var(--muted); margin-right: 2px; } .lib-sort-chip { background: var(--surface-3, var(--surface-2)); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; transition: background 120ms, color 120ms, border-color 120ms; } .lib-sort-chip:hover { color: var(--text); } .lib-sort-chip.is-active { background: var(--accent-soft, var(--surface-3)); color: var(--accent, var(--text)); border-color: var(--accent, var(--border)); } .lib-sort-arrow { font-weight: 700; font-family: var(--font-mono); } .lib-campaign-select { font-size: 11px; padding: 2px 4px; background: var(--surface-3, var(--surface-2)); color: var(--text); border: 1px solid var(--border); border-radius: 4px; } .lib-metric-filter { font-size: 11px; margin-bottom: 6px; } .lib-metric-filter > summary { cursor: pointer; color: var(--muted); padding: 2px 0; } .lib-metric-filter[open] > summary { color: var(--text); } .lib-metric-filter-row { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 0; align-items: center; } .lib-metric-filter-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } .lib-metric-filter-row input { width: 56px; padding: 2px 4px; font-size: 11px; } .lib-metric-filter-row .btn { padding: 2px 8px; font-size: 11px; margin-left: auto; } .lib-viewport { position: relative; overflow: hidden; min-height: 80px; } .lib-page { display: flex; flex-direction: column; gap: 4px; width: 100%; will-change: transform; } .lib-page-incoming { /* set inline by _slideToPage */ } .lib-pager { /* Stay visible at the bottom of the side-pane scroll so the user can navigate without scrolling past every row on the page first. */ position: sticky; bottom: -12px; /* compensate for .d-side's 12px bottom padding */ background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); z-index: 1; } .lib-pager .btn { padding: 2px 6px; } .lib-pager .btn:disabled { opacity: 0.35; cursor: not-allowed; } .lib-pager-status { font-family: var(--font-mono); } /* ---- Campaign criteria guideline hints ---------------------------------- */ .campaign-criteria-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; } .campaign-criteria-field label { display: inline-flex; align-items: center; gap: 6px; } .campaign-criteria-hint { flex: 1 1 100%; color: var(--muted); font-size: 10px; margin-left: 90px; /* indent under the input, past the label text */ margin-top: -2px; } .campaign-criteria-band { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; } .campaign-criteria-band:empty { display: none; } .campaign-criteria-band.band-good { background: var(--accent-soft, var(--surface-3)); color: var(--accent, var(--text)); } .campaign-criteria-band.band-ok { background: var(--surface-3); color: var(--text); } .campaign-criteria-band.band-weak { background: var(--warn-soft, var(--surface-3)); color: var(--warn, var(--text)); } .campaign-criteria-band.band-bad { background: var(--danger-soft, var(--surface-3)); color: var(--danger, var(--text)); }