@layer reset, tokens, base, components, utilities; /* Self-hosted (CSP default-src 'self' forbids font CDNs). Variable weight axis 100-900 so the weight tokens below render true, not synthesized. */ @font-face { font-family: InterVariable; src: url("/app/assets/InterVariable.woff2?v=4.66") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @layer reset { *, *::before, *::after { box-sizing: border-box; } /* Some Chrome builds let an author display (grid/flex) on a details child defeat the UA's closed-state hiding, so collapsed panels painted their content over the panels below. Enforce the semantic. */ details:not([open]) > *:not(summary) { display: none !important; } html { color-scheme: light; scroll-behavior: smooth; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } img, svg { display: block; max-inline-size: 100%; } [hidden] { display: none !important; } } @media (max-width: 760px) { .style-option-grid, .style-comparison-grid, .comparison-selection-controls { grid-template-columns: 1fr; } .style-result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @layer tokens { :root { --ink: #132019; --ink-soft: #59665f; --canvas: #f1f3ed; --canvas-deep: #e7ece5; --surface: #fafbf7; --surface-strong: #ffffff; --surface-muted: #f1f4ef; --line: #d9dfd7; --line-strong: #b8c3ba; --accent: #0d6648; --accent-hover: #084f37; --accent-soft: #dcefe5; --lime: #d8f58b; --sidebar: #14241c; --sidebar-soft: #21352a; --warning: #9a5b08; --warning-soft: #fff1d6; --danger: #a33a32; --danger-soft: #f9e5e2; --info: #225b88; --info-soft: #e2eff8; --shadow-sm: 0 1px 2px rgb(20 38 28 / 0.05), 0 7px 22px rgb(20 38 28 / 0.045); --shadow: 0 20px 48px rgb(20 38 28 / 0.11); --shadow-float: 0 24px 64px rgb(20 38 28 / 0.14); --radius-sm: 0.55rem; --radius-md: 0.85rem; --radius-lg: 1.2rem; --content: 1440px; --topbar-height: 4.5rem; accent-color: var(--accent); } /* Dark theme: true greys with the same green identity, layered elevation through background shifts, off-white text. Toggled via data-theme on ; RevMessage starts light and does not use browser storage. */ html[data-theme="dark"] { color-scheme: dark; --ink: #e6eae4; --ink-soft: #9fab9f; --canvas: #151a16; --canvas-deep: #10140f; --surface: #1a201b; --surface-strong: #212823; --surface-muted: #262e28; --line: #313a33; --line-strong: #46524a; --accent: #4fae85; --accent-hover: #6cc49d; --accent-soft: #1d3a2d; --sidebar: #10140f; --sidebar-soft: #1d2a20; --warning: #e0a44a; --warning-soft: #3a2c12; --danger: #e07a6d; --danger-soft: #3c1f1b; --info: #6fa9d6; --info-soft: #16283a; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 7px 22px rgb(0 0 0 / 0.3); --shadow: 0 20px 48px rgb(0 0 0 / 0.45); --shadow-float: 0 24px 64px rgb(0 0 0 / 0.5); } } @layer base { body { min-block-size: 100vh; min-block-size: 100dvh; display: grid; grid-template: "header header" auto "nav main" 1fr / 15.5rem minmax(0, 1fr); background: var(--canvas); color: var(--ink); font-family: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-optical-sizing: auto; font-size: 0.95rem; line-height: 1.55; } h1, h2, h3, p { margin-block-start: 0; } h1 { margin-block-end: 0; font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: -0.025em; } h2 { margin-block-end: 0.5rem; max-inline-size: 34ch; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; } h3 { margin-block-end: 0.4rem; font-size: 1.05rem; } p { color: var(--ink-soft); text-wrap: pretty; } code { border-radius: 0.3rem; background: var(--surface-muted); padding: 0.08rem 0.3rem; font-size: 0.88em; } a { color: var(--accent); } label { display: grid; gap: 0.35rem; color: var(--ink); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; } input, select, textarea { inline-size: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--ink); font-weight: 400; padding: 0.68rem 0.75rem; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { color: var(--ink-soft); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid rgb(20 92 69 / 0.22); outline-offset: 2px; border-color: var(--accent); } small { color: var(--ink-soft); font-weight: 500; } fieldset { min-inline-size: 0; } legend { padding: 0; font-size: 1rem; font-weight: 600; } } @layer components { .skip-link { position: fixed; z-index: 100; inset: 0.75rem auto auto 0.75rem; translate: 0 -160%; border-radius: var(--radius-sm); background: var(--ink); color: var(--canvas); padding: 0.65rem 0.9rem; } .skip-link:focus { translate: 0; } .topbar { grid-area: header; position: sticky; z-index: 40; inset-block-start: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: var(--topbar-height); padding: 0.7rem clamp(1rem, 2.5vw, 2rem); border-block-end: 1px solid rgb(184 195 186 / 0.72); background: rgb(250 251 247 / 0.9); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.72), 0 8px 26px rgb(20 38 28 / 0.045); } .brand-lockup, .runtime, .input-row, .legend-row, .evidence-heading, .dialog-actions, .meta-row, .touch-heading, .status-row { display: flex; align-items: center; } .brand-lockup { gap: 0.7rem; min-inline-size: 0; } .brand-lockup > div { min-inline-size: 0; } .brand-mark { display: grid; place-items: center; inline-size: 2.6rem; aspect-ratio: 1; border-radius: 0.8rem; background: var(--ink); color: var(--lime); font-weight: 600; font-size: 1.25rem; } /* Overline label: quiet gray, not a second accent — the heading below it carries the hierarchy. */ .eyebrow { margin-block-end: 0.12rem; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .topbar-actions { display: flex; align-items: center; gap: 0.65rem; min-inline-size: 0; } .docs-link { border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); color: var(--ink); padding: 0.42rem 0.72rem; font-size: 0.76rem; font-weight: 600; text-decoration: none; } .docs-link:hover { border-color: var(--accent); color: var(--accent); } .runtime { gap: 0.45rem; border: 1px solid var(--line); border-radius: 999px; max-inline-size: min(46vw, 38rem); background: var(--surface-strong); padding: 0.42rem 0.75rem; color: var(--ink-soft); font-size: 0.77rem; font-weight: 600; } #runtime-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-dot { inline-size: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--line-strong); } .runtime.is-online .status-dot { background: var(--accent); box-shadow: 0 0 0 4px rgb(40 162 103 / 0.13); } .runtime.is-error .status-dot { background: var(--danger); } .section-tabs { grid-area: nav; position: sticky; z-index: 20; inset-block-start: var(--topbar-height); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; block-size: calc(100dvh - var(--topbar-height)); padding: 1rem; background: var(--sidebar); overflow: auto; } .tab-group { display: grid; gap: 0.35rem; } .tab-button { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 0.6rem; inline-size: 100%; min-block-size: 4rem; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--chrome-ink-soft); padding: 0.55rem 0.65rem; text-align: start; } .tab-button:hover { background: var(--sidebar-soft); color: var(--chrome-ink); } .tab-button:focus-visible, .docs-link:focus-visible, .link-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } .tab-button.is-active { border-color: var(--accent-soft); background: var(--lime); color: var(--ink); box-shadow: 0 8px 24px rgb(0 0 0 / 0.16); } .tab-index { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; opacity: 0.65; } .tab-copy { display: grid; min-inline-size: 0; } .tab-copy strong { font-size: 0.9rem; } .tab-copy small { color: currentColor; font-size: 0.7rem; opacity: 0.68; } .nav-safety { display: flex; align-items: flex-start; gap: 0.65rem; border: 1px solid var(--chrome-line); border-radius: var(--radius-md); background: var(--chrome-bg-soft); color: var(--chrome-ink); padding: 0.85rem; } .nav-safety div { display: grid; } .nav-safety strong { font-size: 0.78rem; } .nav-safety small { margin-block-start: 0.15rem; color: var(--ink-soft); font-size: 0.6875rem; line-height: 1.35; } .safety-icon { display: grid; place-items: center; flex: 0 0 auto; inline-size: 1.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 0.75rem; font-weight: 600; } .workspace { grid-area: main; inline-size: 100%; max-inline-size: var(--content); margin-inline: auto; padding: clamp(1.1rem, 2vw, 1.9rem); container: workspace / inline-size; } .workspace-section { animation: reveal 180ms ease-out; } @keyframes reveal { from { opacity: 0; translate: 0 5px; } } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-block-end: clamp(0.85rem, 1.6vw, 1.25rem); } .section-heading > div { position: relative; padding-inline-start: 1rem; } .section-heading > div::before { content: ""; position: absolute; inset: 0.15rem auto 0.2rem 0; inline-size: 0.28rem; border-radius: 999px; background: linear-gradient(var(--accent), var(--lime)); } .section-heading h2 { max-inline-size: 34ch; font-size: clamp(1.25rem, 1.8vw, 1.55rem); } .section-heading p:last-child { margin-block-end: 0; max-inline-size: 70ch; font-size: 0.98rem; } .contract-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-block: 0 0.4rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--ink); overflow: clip; } .contract-strip > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.6rem; min-block-size: 4.25rem; border-inline-end: 1px solid var(--line); background: transparent; padding: 0.7rem 0.8rem; } .contract-strip > div:last-child { border-inline-end: 0; } .contract-strip strong { color: var(--accent); font-size: 1.35rem; line-height: 1; } .contract-strip span { color: var(--ink-soft); font-size: 0.6875rem; line-height: 1.3; } .contract-strip .contract-safe { background: var(--accent-soft); } .contract-strip .contract-safe strong, .contract-strip .contract-safe span { color: var(--ink); } .panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-strong); padding: clamp(1rem, 2.2vw, 1.35rem); box-shadow: var(--shadow-sm); } .panel:focus-within { border-color: color-mix(in oklab, var(--accent) 48%, var(--line)); box-shadow: 0 0 0 3px rgb(13 102 72 / 0.07), var(--shadow-sm); } .run-batch-export-panel { border-color: color-mix(in oklab, var(--accent) 38%, var(--line)); background: linear-gradient(145deg, var(--surface-strong), color-mix(in oklab, var(--accent-soft) 38%, var(--surface-strong))); } .run-batch-export-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .run-batch-export-heading h3 { margin: 0; } .run-batch-export-panel > p:last-child { margin-block-end: 0; } .workbook-contract { margin-block-end: 0; border-color: var(--line); background: var(--surface-strong); color: var(--ink); container: workbook-contract / inline-size; overflow: clip; } .workbook-contract-layout { display: grid; grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.35fr); gap: clamp(1rem, 2.4vw, 2rem); } .workbook-contract-copy { align-self: center; } .workbook-contract-copy .eyebrow { color: var(--accent); } .workbook-contract-copy h3 { max-inline-size: 20ch; margin-block-end: 0.65rem; font-size: clamp(1.35rem, 2.5cqi, 2rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; } .workbook-contract-copy p:last-child { max-inline-size: 52ch; margin: 0; color: var(--ink-soft); font-size: 0.84rem; text-wrap: pretty; } .workbook-contract-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0; padding: 0; list-style: none; } .workbook-contract-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; border-block-start: 1px solid var(--line); padding: 0.72rem 0.2rem; } .workbook-contract-rules span { color: var(--accent); font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; } .workbook-contract-rules p { margin: 0; color: var(--ink); font-size: 0.79rem; line-height: 1.4; text-wrap: pretty; } .workbook-contract-flow { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto; align-items: center; gap: 0.65rem; border-block-start: 1px solid var(--line); padding-block-start: 0.9rem; color: var(--ink-soft); } .workbook-contract-flow strong { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .workbook-contract-flow i { block-size: 1px; background: var(--line-strong); } @container workbook-contract (width < 46rem) { .workbook-contract-layout { grid-template-columns: 1fr; } .workbook-contract-copy h3 { max-inline-size: 28ch; } } /* Step chips removed: the panel headings already sequence the flow. */ .panel[data-step] { position: relative; } .compose-layout { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr); gap: 1.25rem; align-items: start; } .form-stack, .result-stack { display: grid; gap: 1rem; } .form-stack { container: form-stack / inline-size; } .seller-panel { container: seller-panel / inline-size; border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); } .seller-selector-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; } .seller-actions { display: flex; align-items: center; gap: 0.4rem; padding-block-end: 0.05rem; } .seller-summary { display: grid; gap: 0.45rem; margin-block-start: 0.85rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--accent-soft) 48%, var(--surface-strong)); padding: 0.8rem; } .seller-summary:empty { display: none; } .seller-summary p, .seller-summary small { margin: 0; } .seller-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; min-inline-size: 0; } .seller-identity strong { font-size: 1rem; } .seller-identity a { max-inline-size: 100%; overflow-wrap: anywhere; font-size: 0.76rem; } .seller-identity span { margin-inline-start: auto; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .seller-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-block: 1rem 0.65rem; } .seller-feature-heading > div { display: grid; } .seller-feature-heading .seller-feature-heading-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.4rem; } .seller-feature-heading small { font-size: 0.7rem; } .seller-feature-disclosure { margin-block-start: 1rem; border-block-start: 1px solid var(--line); padding-block-start: 0.8rem; } .seller-feature-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; cursor: pointer; list-style: none; } .seller-feature-disclosure > summary::-webkit-details-marker { display: none; } .seller-feature-disclosure > summary::after { content: "▸"; margin-inline-start: auto; color: var(--accent); font-size: 0.8rem; transition: transform 0.15s ease; } .seller-feature-disclosure[open] > summary::after { transform: rotate(90deg); } .seller-feature-disclosure-title { display: grid; } .seller-feature-disclosure-title small { font-size: 0.7rem; color: var(--ink-soft); } .seller-feature-summary-count { min-inline-size: 1.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 600; text-align: center; } .seller-feature-disclosure .seller-feature-heading-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.4rem; margin-block: 0.7rem 0.6rem; } .seller-feature-list { display: grid; gap: 0.6rem; max-block-size: 32rem; overflow: auto; overscroll-behavior: contain; } .seller-feature-card { display: grid; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); padding: 0.75rem; } .seller-feature-card p { margin: 0; color: var(--ink); font-size: 0.78rem; } .seller-feature-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.65rem; } .seller-feature-card-heading > div:first-child { display: grid; min-inline-size: 0; } .seller-feature-card-heading strong { overflow-wrap: anywhere; font-size: 0.86rem; } .seller-feature-card-heading span:not(.source-badge) { color: var(--ink-soft); font-size: 0.6875rem; } .seller-feature-badges { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: end; gap: 0.3rem; } .source-badge { border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); padding: 0.18rem 0.4rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.035em; text-transform: uppercase; } .source-badge.is-verified { background: var(--accent-soft); color: var(--accent); } .source-badge.is-unverified { background: var(--warning-soft); color: var(--warning); } .seller-feature-source { display: grid; gap: 0.25rem; border-inline-start: 3px solid var(--accent); padding-inline-start: 0.55rem; } .seller-feature-source a { font-size: 0.72rem; font-weight: 600; } .seller-feature-source small { max-block-size: 4lh; overflow: auto; font-size: 0.6875rem; line-height: 1.35; } .seller-feature-actions { display: flex; justify-content: end; gap: 0.35rem; } .domain-extractor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: end; margin-block-start: 0.85rem; border-block-start: 1px solid var(--line); padding-block-start: 0.85rem; } .domain-extractor p { grid-column: 1 / -1; margin: 0; font-size: 0.7rem; line-height: 1.4; } @container seller-panel (width < 34rem) { .seller-selector-row, .domain-extractor { grid-template-columns: 1fr; align-items: stretch; } .seller-actions { flex-wrap: wrap; } .seller-feature-card-heading { display: grid; } .seller-feature-badges { justify-content: start; } .seller-feature-heading { align-items: start; } } .workbook-upload, .workbook-preview { position: relative; overflow: hidden; } .workbook-upload[data-step] { overflow: visible; } .upload-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; } .upload-heading h3 { margin: 0; font-size: 1.15rem; } .format-badge { flex: 0 0 auto; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent); padding: 0.3rem 0.62rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; } .drop-zone { position: relative; place-items: center; min-block-size: 12rem; border: 1.5px dashed color-mix(in oklab, var(--accent) 55%, var(--line)); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--surface), var(--surface-muted)); padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, translate 150ms ease; } .drop-zone:hover, .drop-zone:focus-within { border-color: var(--accent); background: var(--accent-soft); translate: 0 -1px; } .drop-zone input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; } .drop-zone > span, .drop-zone > strong { pointer-events: none; } .upload-icon { display: grid; place-items: center; inline-size: 2.8rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 1.2rem; } .drop-zone strong { margin-block-start: 0.25rem; font-size: 1rem; } .drop-zone span:last-of-type { color: var(--ink-soft); font-size: 0.78rem; font-weight: 500; } .file-meta { margin-block-start: 0.7rem; color: var(--ink-soft); font-size: 0.78rem; overflow-wrap: anywhere; } .schema-help { margin-block-start: 0.9rem; border-block-start: 1px solid var(--line); padding-block-start: 0.8rem; } .schema-help > summary { color: var(--accent); font-size: 0.78rem; } .schema-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .schema-grid > div { display: grid; gap: 0.25rem; border-radius: var(--radius-md); background: var(--surface-muted); padding: 0.75rem; } .schema-grid span { font-size: 0.78rem; } .schema-grid small { line-height: 1.4; } .workbook-preflight { container: workbook-preflight / inline-size; } .preflight-status.is-pass { background: var(--accent-soft); color: var(--accent); } .preflight-status.is-warning { border-color: color-mix(in oklab, var(--warning) 35%, var(--line)); background: var(--warning-soft); color: var(--warning); } .preflight-status.is-fail { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); background: var(--danger-soft); color: var(--danger); } .preflight-status.is-pending { border-color: color-mix(in oklab, var(--info) 35%, var(--line)); background: var(--info-soft); color: var(--info); } .preflight-groups { display: grid; gap: 0.65rem; } .preflight-empty { border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info); padding: 0.7rem; font-size: 0.75rem; } .preflight-group { border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in oklab, var(--surface) 88%, var(--canvas)); padding: 0.75rem; } .preflight-group > summary { display: flex; justify-content: space-between; gap: 0.8rem; cursor: pointer; } .preflight-group > summary span { color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .preflight-group[open] > summary { margin-block-end: 0.7rem; border-block-end: 1px solid var(--line); padding-block-end: 0.65rem; } .preflight-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .preflight-check { display: grid; align-content: start; gap: 0.35rem; min-inline-size: 0; border: 1px solid var(--line); border-inline-start-width: 3px; border-radius: var(--radius-sm); background: var(--surface); padding: 0.65rem; } .preflight-check.is-pass { border-inline-start-color: var(--accent); } .preflight-check.is-warning { border-inline-start-color: var(--warning); } .preflight-check.is-fail { border-inline-start-color: var(--danger); } .preflight-check.is-pending { border-inline-start-color: var(--info); } .preflight-check-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.5rem; } .preflight-check-heading strong { overflow-wrap: anywhere; font-size: 0.76rem; } .preflight-check p { margin: 0; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere; } .preflight-outcome { flex: 0 0 auto; border-radius: 999px; padding: 0.15rem 0.38rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .preflight-outcome.is-pass { background: var(--accent-soft); color: var(--accent); } .preflight-outcome.is-warning { background: var(--warning-soft); color: var(--warning); } .preflight-outcome.is-fail { background: var(--danger-soft); color: var(--danger); } .preflight-outcome.is-pending { background: var(--info-soft); color: var(--info); } .preflight-check-meta { color: var(--ink-soft); font-size: 0.6875rem; overflow-wrap: anywhere; } .preflight-remediation { color: var(--ink); font-size: 0.6875rem; line-height: 1.35; overflow-wrap: anywhere; } .workbook-repair { display: grid; gap: 0.7rem; margin-block-start: 0.85rem; border-block-start: 1px solid var(--line); padding-block-start: 0.85rem; } .workbook-repair-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .workbook-repair-heading > div { display: grid; gap: 0.2rem; } .workbook-repair-heading small { color: var(--ink-soft); font-size: 0.6875rem; line-height: 1.4; } .workbook-repair-report { display: grid; gap: 0.45rem; } .workbook-repair-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 0.6rem; } .workbook-repair-item strong { display: block; font-size: 0.72rem; } .workbook-repair-item p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.69rem; line-height: 1.4; } @container workbook-preflight (width < 36rem) { .preflight-checks { grid-template-columns: 1fr; } .workbook-repair-heading { align-items: stretch; flex-direction: column; } } .mapping-panel { container: column-mapping / inline-size; } .mapping-fields-disclosure { margin-block-start: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in oklab, var(--surface) 86%, var(--canvas)); padding: 0.85rem; } .mapping-fields-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; } .mapping-fields-disclosure > summary > span { display: grid; gap: 0.15rem; } .mapping-fields-disclosure > summary small { color: var(--ink-soft); } .mapping-fields-disclosure[open] > summary { margin-block-end: 0.9rem; padding-block-end: 0.75rem; border-block-end: 1px solid var(--line); } .message-plan-panel > summary { align-items: center; } .message-plan-panel > summary > span { display: grid; } .message-plan-panel > summary .eyebrow { margin: 0; } .message-plan-body { display: grid; gap: 1rem; } .sequence-importer { display: grid; gap: 0.75rem; border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line)); border-radius: var(--radius-md); background: color-mix(in oklab, var(--accent-soft) 42%, var(--surface)); padding: 0.9rem; } .sequence-importer > div:first-child { display: grid; gap: 0.2rem; } .sequence-importer p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; } .sequence-inference-options { display: grid; gap: 0.65rem; } .enhanced-inference-toggle { display: flex; align-items: flex-start; gap: 0.65rem; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface) 82%, var(--accent-soft)); padding: 0.75rem; cursor: pointer; } .enhanced-inference-toggle input { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: 0.15rem; accent-color: var(--accent); } .enhanced-inference-toggle span { display: grid; gap: 0.18rem; } .enhanced-inference-toggle small { color: var(--ink-soft); line-height: 1.4; } .enhanced-inference-toggle:has(input:disabled) { cursor: not-allowed; opacity: 0.66; } .cta-definition-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 0.65rem 0.75rem; } .cta-definition-panel > summary { color: var(--accent); font-size: 0.75rem; font-weight: 600; cursor: pointer; } .cta-definition-panel dl { display: grid; gap: 0.55rem; margin: 0.7rem 0 0; } .cta-definition-panel dl > div { display: grid; grid-template-columns: minmax(4.5rem, 0.18fr) 1fr; gap: 0.6rem; } .cta-definition-panel dt { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .cta-definition-panel dd { margin: 0; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.45; } .sequence-import-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; } .sequence-import-actions .muted { flex: 1 1 18rem; font-size: 0.72rem; } .template-toolbar { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr); gap: 0.75rem; } .template-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; } .sequence-counts { display: grid; grid-template-columns: repeat(2, minmax(8rem, 0.25fr)) minmax(14rem, 1fr); align-items: end; gap: 0.75rem; } .sequence-counts p { margin: 0 0 0.55rem; font-size: 0.78rem; } .sequence-touch-plans { display: grid; gap: 0.7rem; } .sequence-touch-plan { display: grid; grid-template-columns: minmax(9rem, 0.28fr) minmax(8rem, 0.22fr) minmax(16rem, 1fr); align-items: start; gap: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 0.8rem; } .sequence-touch-identity { display: grid; gap: 0.2rem; padding-block-start: 0.3rem; } .sequence-touch-identity strong { font-size: 0.86rem; } .sequence-touch-identity span { color: var(--ink-soft); font-size: 0.7rem; } .prompt-preview-panel { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem; } .prompt-preview-actions { display: flex; align-items: center; gap: 0.7rem; margin-block-end: 0.7rem; } .prompt-preview-panel pre, .exact-prompt-panel pre { max-block-size: 28rem; margin: 0; border-radius: var(--radius-sm); background: var(--terminal-bg); color: var(--terminal-ink); padding: 0.9rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .exact-prompt-panel { display: grid; gap: 0.7rem; } .mapping-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .mapping-groups fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); margin: 0; padding: 0.85rem; } .mapping-groups legend { padding-inline: 0.35rem; font-size: 0.82rem; } .mapping-field-toolbar { display: grid; grid-template-columns: minmax(10rem, 1fr) auto auto; align-items: end; gap: 0.45rem; margin-block-end: 0.7rem; } .mapping-field-toolbar label { min-inline-size: 0; } .mapping-field-toolbar select { min-inline-size: 0; font-size: 0.74rem; } .mapping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .mapping-field-row { display: grid; align-content: start; gap: 0.55rem; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 0.65rem; } .mapping-field-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.45rem; min-inline-size: 0; } .mapping-field-identity { display: grid; gap: 0.2rem; min-inline-size: 0; } .mapping-field-identity strong { overflow-wrap: anywhere; font-size: 0.8rem; } .mapping-field-name-input { min-inline-size: 0; padding: 0.42rem 0.5rem; font-size: 0.78rem; } .mapping-field-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; } .mapping-field-badges small { border-radius: 999px; background: var(--accent-soft); color: var(--accent); padding: 0.1rem 0.35rem; font-size: 0.6875rem; } .mapping-field-badges .is-required { background: var(--warning-soft); color: var(--warning); } .mapping-field-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.25rem; } .mapping-field-actions .text-button { padding: 0.2rem 0.3rem; font-size: 0.6875rem; } .mapping-delete-button:not(:disabled) { color: var(--danger); } .mapping-column-choice { min-inline-size: 0; } .mapping-column-choice select { min-inline-size: 0; font-size: 0.78rem; } .mapping-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 0.9rem; } .mapping-actions .field-help { margin: 0; } .research-hint-field { border-block-start: 1px solid var(--line); padding-block-start: 0.9rem; } .research-hint-field > span { color: var(--warning); font-size: 0.72rem; font-weight: 600; } .research-hint-field textarea { min-block-size: 3lh; max-block-size: 12rem; background: color-mix(in oklab, var(--warning-soft) 52%, var(--surface-strong)); } .research-hint-audit { margin-block-start: 0.9rem; border-inline-start: 3px solid var(--warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--warning-soft); padding: 0.65rem 0.75rem; } .research-hint-audit strong { color: var(--warning); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; } .research-hint-audit p { margin: 0.3rem 0 0; color: var(--ink); } .compose-error { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); background: var(--danger-soft); } .compose-error .eyebrow, .compose-error h3 { color: var(--danger); } .compose-error p:last-child { overflow-wrap: anywhere; } .compose-error-actions { display: grid; gap: 0.55rem; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid color-mix(in oklab, var(--danger) 25%, var(--line)); } .compose-error-actions .secondary-button { justify-self: start; border-color: color-mix(in oklab, var(--danger) 35%, var(--line-strong)); background: var(--surface-strong); } .compose-error-actions p { margin: 0; color: var(--ink-soft); font-size: 0.76rem; } .seller-match-list { display: grid; gap: 0.65rem; margin-block-start: 0.9rem; } .seller-match-card { display: grid; gap: 0.3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.7rem; } .seller-match-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .seller-match-heading span { border-radius: 999px; background: var(--accent-soft); color: var(--accent); padding: 0.15rem 0.4rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .seller-match-card p { margin: 0; } .seller-match-sources { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.72rem; } .seller-match-sources a { overflow-wrap: anywhere; } .feature-evaluation { margin-block-start: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.8rem; min-inline-size: 0; } .feature-evaluation-summary { align-items: center; min-inline-size: 0; } .feature-evaluation-summary > span:first-child { display: grid; gap: 0.15rem; min-inline-size: 0; } .feature-evaluation-summary small { color: var(--ink-soft); font-weight: 500; } .feature-evaluation-counts { color: var(--accent); font-size: 0.72rem; font-weight: 600; overflow-wrap: anywhere; text-align: end; } .feature-evaluation-body { display: grid; gap: 0.75rem; min-inline-size: 0; } .feature-evaluation-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .feature-filter-button { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-soft); padding: 0.35rem 0.6rem; font-size: 0.7rem; font-weight: 600; } .feature-filter-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: white; } .feature-assessment-list { display: grid; gap: 0.65rem; min-inline-size: 0; } .feature-assessment-card { display: grid; gap: 0.55rem; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.75rem; } .feature-assessment-card.is-selected { border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); background: color-mix(in oklab, var(--accent-soft) 34%, var(--surface-strong)); } .feature-assessment-heading, .feature-assessment-decision { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; min-inline-size: 0; } .feature-assessment-heading strong { overflow-wrap: anywhere; } .feature-match-badge { flex: 0 0 auto; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); padding: 0.2rem 0.45rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .feature-match-badge.is-verified_deficiency { background: var(--warning-soft); color: var(--warning); } .feature-match-badge.is-general_fit { background: var(--info-soft); color: var(--info); } .feature-assessment-decision { color: var(--ink-soft); font-size: 0.7rem; } .feature-assessment-card p { margin: 0; overflow-wrap: anywhere; } .feature-score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; } .feature-score-grid > div { min-inline-size: 0; border-radius: var(--radius-sm); background: var(--surface); padding: 0.45rem; } .feature-score-grid strong, .feature-score-grid span { display: block; overflow-wrap: anywhere; } .feature-score-grid strong { color: var(--ink-soft); font-size: 0.6875rem; text-transform: uppercase; } .feature-score-grid span { font-size: 0.6875rem; } .feature-prompt-audit { border-block-start: 1px solid var(--line); padding-block-start: 0.75rem; min-inline-size: 0; } .feature-prompt-output { max-block-size: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius-sm); background: var(--terminal-bg); color: var(--terminal-ink); padding: 0.75rem; font-size: 0.6875rem; } @container column-mapping (width < 46rem) { .mapping-groups, .mapping-grid { grid-template-columns: 1fr; } .mapping-field-toolbar { grid-template-columns: 1fr 1fr; } .mapping-field-toolbar label { grid-column: 1 / -1; } } .preview-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-block-end: 0.9rem; } .preview-metrics > div { display: grid; border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.6rem; } .preview-metrics strong { font-size: 1.15rem; line-height: 1; } .preview-metrics span { color: var(--ink-soft); font-size: 0.6875rem; } .candidate-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.8fr); gap: 0.8rem; align-items: end; margin-block-end: 0.75rem; } .research-note { margin: 0; border-inline-start: 3px solid var(--info); background: var(--info-soft); padding: 0.55rem 0.65rem; font-size: 0.72rem; line-height: 1.4; } .candidate-list { display: grid; gap: 0.55rem; max-block-size: 31rem; overflow: auto; padding: 0.15rem; } .candidate-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 0.8rem; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; } .candidate-card:hover { border-color: var(--accent); } .candidate-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px rgb(13 102 72 / 0.08); } .candidate-card.is-blocked { cursor: not-allowed; opacity: 0.68; } .candidate-card input { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: 0.15rem; } .candidate-main { display: grid; gap: 0.2rem; min-inline-size: 0; } .candidate-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .candidate-heading strong { min-inline-size: 0; overflow-wrap: anywhere; font-size: 0.9rem; } .candidate-main > span:not(.candidate-heading) { font-size: 0.78rem; } .candidate-main small { overflow-wrap: anywhere; } .candidate-missing { color: var(--warning); } .candidate-blocked { color: var(--danger); } .candidate-status { flex: 0 0 auto; border-radius: 999px; padding: 0.18rem 0.45rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .candidate-status.is-ready { background: var(--accent-soft); color: var(--accent); } .candidate-status.is-needs_research { background: var(--warning-soft); color: var(--warning); } .candidate-status.is-blocked { background: var(--danger-soft); color: var(--danger); } .result-rail { position: sticky; inset-block-start: calc(var(--topbar-height) + 1.5rem); min-inline-size: 0; container: result-rail / inline-size; } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; } fieldset.field-grid { padding-block-start: 1rem; } .field-grid legend { grid-column: 1 / -1; margin-block-end: 0.1rem; } .span-2 { grid-column: 1 / -1; } .input-row { gap: 0.45rem; } .input-row input { flex: 1; } .checkbox-label { display: flex; align-items: center; gap: 0.55rem; align-self: center; } .checkbox-label input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--accent); } .legend-row, .evidence-heading, .touch-heading, .status-row { justify-content: space-between; gap: 0.75rem; } .field-help { margin-block: 0.35rem 1rem; font-size: 0.84rem; } .evidence-list { display: grid; gap: 0.8rem; counter-reset: evidence-row; } .evidence-row { counter-increment: evidence-row; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); padding: 0.9rem; } .evidence-heading { margin-block-end: 0.75rem; } .evidence-heading strong { display: flex; align-items: center; gap: 0.5rem; } .evidence-heading strong::before { content: counter(evidence-row); display: grid; place-items: center; inline-size: 1.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--sidebar); color: var(--lime); font-size: 0.6875rem; } button, .file-action { min-block-size: 2.35rem; } .primary-button, .secondary-button, .ghost-button, .danger-button, .small-button, .file-action { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: 0.58rem 0.88rem; font-weight: 600; text-decoration: none; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, translate 150ms ease; } .primary-button { border: 1px solid var(--accent); background: var(--accent); color: white; } .primary-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .secondary-button, .small-button, .file-action { border: 1px solid var(--line-strong); background: var(--surface-strong); color: var(--ink); } .secondary-button:hover, .small-button:hover, .file-action:hover { border-color: var(--accent); color: var(--accent); } .ghost-button { border: 1px solid transparent; background: transparent; color: var(--ink-soft); } .ghost-button:hover { border-color: var(--line-strong); color: var(--ink); } .danger-button { border: 1px solid var(--danger); background: var(--danger); color: white; } .danger-button:hover { background: color-mix(in oklab, var(--danger) 82%, black); } button:disabled { cursor: not-allowed; opacity: 0.58; } .small-button { min-block-size: 2rem; padding: 0.36rem 0.65rem; font-size: 0.78rem; } .text-button { border: 0; background: transparent; color: var(--danger); padding: 0.25rem; font-size: 0.8rem; font-weight: 600; } .file-action { position: relative; cursor: pointer; } .file-action input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; } .full-width { inline-size: 100%; margin-block-start: 0.7rem; } .submit-bar { display: grid; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-strong); color: var(--ink); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); } .submit-bar > div:first-child { display: grid; gap: 0.16rem; border-block-end: 1px solid var(--line); padding-block-end: 0.85rem; } .submit-bar > div:first-child strong { font-size: 0.94rem; } .submit-bar span { display: block; color: var(--ink-soft); font-size: 0.8rem; } .submit-bar .primary-button { background: var(--accent); border-color: var(--accent); color: #fff; } .submit-bar .primary-button:hover { background: var(--accent-hover); } .generate-actions { display: grid; gap: 0.85rem; min-inline-size: 0; } .generate-status-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-inline-size: 0; } .generate-safety-note { text-align: end; } .generate-control-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.75rem; min-inline-size: 0; } .generate-control-grid .writer-selector { grid-column: 1 / -1; } .criticism-control { display: grid; grid-column: 1; gap: 0.24rem; min-inline-size: 0; } .generate-control-grid .primary-button { grid-column: 2; grid-row: 2; min-block-size: 2.72rem; } .generate-live-status { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); padding: 0.38rem 0.7rem; } .generate-live-status > span:last-child { display: grid; line-height: 1.15; } .generate-live-status small { color: var(--ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .generate-live-status strong { color: var(--ink); font-size: 0.7rem; font-weight: 600; } .generate-live-dot { inline-size: 0.55rem; block-size: 0.55rem; flex: 0 0 auto; border-radius: 50%; background: var(--line-strong); } .generate-live-status.is-queued .generate-live-dot, .generate-live-status.is-running .generate-live-dot { background: var(--info); box-shadow: 0 0 0 0 rgb(126 200 255 / 0.45); animation: live-status-pulse 1.5s infinite; } .generate-live-status.is-succeeded .generate-live-dot { background: var(--accent); } .generate-live-status.is-failed .generate-live-dot { background: var(--danger); } @keyframes live-status-pulse { 70% { box-shadow: 0 0 0 0.42rem rgb(126 200 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(126 200 255 / 0); } } .result-placeholder { position: relative; display: grid; justify-items: start; min-block-size: 21rem; align-content: center; background: var(--surface-strong); color: var(--ink); padding: clamp(1.4rem, 4cqi, 2.4rem); overflow: hidden; } .result-placeholder p { max-inline-size: 48ch; color: var(--ink-soft); } .result-placeholder h3 { max-inline-size: 18ch; margin-block-end: 0.8rem; font-size: clamp(1.45rem, 5cqi, 2.15rem); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; } .result-placeholder .eyebrow { color: var(--ink-soft); } .empty-icon { display: grid; place-items: center; inline-size: 2.8rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; margin-block-end: 0.8rem; } .empty-orbit { position: relative; display: grid; place-items: center; inline-size: 4.15rem; aspect-ratio: 1; margin-block-end: 1.15rem; border: 1px solid rgb(201 239 104 / 0.5); border-radius: 50%; color: var(--lime); font-weight: 600; } .empty-orbit::before, .empty-orbit::after { content: ""; position: absolute; border: 1px solid rgb(201 239 104 / 0.16); border-radius: 50%; } .empty-orbit::before { inset: -0.65rem; } .empty-orbit::after { inset: -1.3rem; } .generation-progress { container: generation-progress / inline-size; margin-block-end: 1rem; border-inline-start: 5px solid var(--info); } .generation-progress-heading, .generation-stage-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; } .generation-progress-heading h3 { margin: 0; } .generation-progress-meta { margin-block: 0.45rem 1rem; overflow-wrap: anywhere; font-size: 0.72rem; } .job-status-badge, .generation-stage-state { display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); padding: 0.22rem 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .job-status-badge.is-running { background: var(--info-soft); color: var(--info); } .job-status-badge.is-succeeded { background: var(--accent-soft); color: var(--accent); } .job-status-badge.is-failed { background: var(--danger-soft); color: var(--danger); } .generation-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .generation-stage { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 0.65rem; padding-block-end: 0.9rem; } .generation-stage:not(:last-child)::before { content: ""; position: absolute; inset-block: 1.65rem 0; inset-inline-start: 0.84rem; inline-size: 2px; background: var(--line); } .generation-stage-marker { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 1.7rem; aspect-ratio: 1; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; } .generation-stage-body { min-inline-size: 0; padding-block-start: 0.05rem; } .generation-stage-body p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.4; text-wrap: pretty; } .generation-stage.is-active .generation-stage-marker { border-color: var(--info); background: var(--info-soft); color: var(--info); } .generation-stage.is-active .generation-stage-state { background: var(--info-soft); color: var(--info); } .generation-stage.is-complete .generation-stage-marker { border-color: var(--accent); background: var(--accent); color: white; } .generation-stage.is-complete .generation-stage-state { background: var(--accent-soft); color: var(--accent); } .generation-stage.is-failed .generation-stage-marker { border-color: var(--danger); background: var(--danger); color: white; } .generation-stage.is-failed .generation-stage-state { background: var(--danger-soft); color: var(--danger); } .generation-stage.is-skipped { opacity: 0.72; } .generation-stage-events { display: grid; gap: 0.2rem; margin: 0.45rem 0 0; padding: 0; list-style: none; } .generation-stage-events li { border-inline-start: 2px solid var(--line-strong); background: var(--surface-muted); padding: 0.3rem 0.45rem; overflow-wrap: anywhere; color: var(--ink-soft); font: 0.6875rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .generation-stage-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: 0.5rem; } .compact-button { min-block-size: 1.9rem; padding: 0.3rem 0.55rem; font-size: 0.6875rem; } .stage-checkpoint-data { display: grid; gap: 0.4rem; margin-block-start: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.55rem; } .stage-checkpoint-data p { overflow-wrap: anywhere; } .stage-checkpoint-data pre { max-block-size: 22rem; margin: 0; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: 0.6875rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .run-stage-checkpoint-list { display: grid; gap: 0.55rem; } .run-stage-checkpoint { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.65rem; } .run-stage-checkpoint > div:first-child { display: grid; min-inline-size: 0; gap: 0.15rem; } .run-stage-checkpoint small { overflow-wrap: anywhere; color: var(--ink-soft); font-size: 0.6875rem; } .run-stage-checkpoint .generation-stage-actions { justify-content: end; margin: 0; } @container generation-progress (width < 28rem) { .generation-progress-heading { align-items: start; } .generation-stage { grid-template-columns: 1.55rem minmax(0, 1fr); gap: 0.5rem; } .generation-stage-marker { inline-size: 1.45rem; } .generation-stage:not(:last-child)::before { inset-inline-start: 0.71rem; } .run-stage-checkpoint { grid-template-columns: 1fr; } .run-stage-checkpoint .generation-stage-actions { justify-content: start; } } .status-card { border-inline-start: 5px solid var(--info); } .status-card.is-review { background: var(--info-soft); border-color: var(--info); } .status-card.is-send { background: var(--accent-soft); border-color: var(--accent); } .status-card.is-suppress { background: var(--danger-soft); border-color: var(--danger); } .rejected-candidate { border-inline-start: 5px solid var(--danger); } .rejected-candidate > .status-row .status-badge { background: var(--danger-soft); color: var(--danger); } .rejected-candidate > h3 { color: var(--danger); } .rejected-touch-list { margin-block-start: 1rem; } .rejected-touch-list .touch-card { border-color: color-mix(in oklab, var(--danger) 24%, var(--line)); } .rejected-touch-list input[readonly], .rejected-touch-list textarea[readonly] { background: var(--surface-muted); cursor: text; } .contract-warning { margin-block: 0.8rem; border-inline-start: 4px solid var(--danger); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--danger-soft); padding: 0.7rem 0.8rem; } .contract-warning strong { color: var(--danger); } .contract-warning p { margin: 0.25rem 0 0; font-size: 0.82rem; } .status-badge, .qa-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.25rem 0.55rem; background: var(--surface-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; } .status-card.is-review .status-badge { background: var(--info-soft); color: var(--info); } .status-card.is-send .status-badge { background: var(--accent-soft); color: var(--accent); } .status-card.is-suppress .status-badge { background: var(--danger-soft); color: var(--danger); } .meta-row { flex-wrap: wrap; gap: 0.35rem 0.8rem; color: var(--ink-soft); font-size: 0.78rem; } .meta-row span { overflow-wrap: anywhere; } .meta-item { display: inline-flex; align-items: center; gap: 0.35rem; } .meta-item small { color: var(--ink-soft); font-size: 0.6875rem; font-weight: 500; } .meta-id { border: 0; background: var(--surface-muted); color: var(--ink); font-size: 0.6875rem; font-variant-numeric: tabular-nums; padding: 0.1rem 0.35rem; white-space: nowrap; } .meta-id[role="button"] { cursor: copy; } .meta-id.is-copied { background: var(--accent-soft); color: var(--accent); } .provenance-panel { border-inline-start: 5px solid var(--accent); } .provenance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .provenance-grid > div { border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.6rem; min-inline-size: 0; } .provenance-grid strong, .provenance-grid span { display: block; overflow-wrap: anywhere; } .provenance-grid strong { color: var(--ink-soft); font-size: 0.6875rem; text-transform: uppercase; } .provenance-grid span { font-size: 0.76rem; } .review-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-block: 0.75rem; } .review-meta > div { border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.6rem; min-inline-size: 0; } .review-meta strong, .review-meta span { display: block; overflow-wrap: anywhere; } .review-meta strong { color: var(--ink-soft); font-size: 0.6875rem; text-transform: uppercase; } .review-meta span { font-size: 0.76rem; } .persona-audit, .truth-audit, .rewrite-instructions, .quality-advisories, .blocking-review-issues { margin-block-start: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.8rem; } .truth-audit .issue-list, .rewrite-instructions .issue-list { margin-block-start: 0.7rem; } .quality-pass-summary { display: grid; gap: 0.15rem; margin-block-start: 0.8rem; border-inline-start: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--accent-soft); padding: 0.65rem 0.8rem; } .quality-pass-summary span, .quality-advisories p { color: var(--ink-soft); font-size: 0.78rem; } .quality-advisories p { margin: 0.25rem 0 0.65rem; } .issue-list.is-advisory li { border-inline-start-color: var(--accent); background: var(--accent-soft); } .issue-list.is-blocking li { border-inline-start-color: var(--danger); background: var(--danger-soft); } .touch-advisories { margin-block-start: 0.75rem; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); border-radius: var(--radius-sm); background: var(--accent-soft); padding: 0.65rem; } .touch-advisories > strong { display: block; margin-block-end: 0.45rem; font-size: 0.76rem; } .criticism-regeneration-help { max-inline-size: 18rem; color: var(--ink-soft); font-size: 0.6875rem; line-height: 1.25; } .citation-list { display: grid; gap: 0.3rem; margin-block-start: 0.75rem; } .citation-list a { overflow-wrap: anywhere; font-size: 0.73rem; } .facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; } .fact-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.8rem; } .fact-card span { display: block; margin-block-end: 0.3rem; color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .fact-card p { margin: 0; color: var(--ink); font-size: 0.83rem; } .fact-card a { display: block; margin-block-start: 0.5rem; overflow-wrap: anywhere; font-size: 0.72rem; } .touch-list { display: grid; gap: 0.75rem; } .touch-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.95rem; } .touch-heading { margin-block-end: 0.75rem; } .touch-heading h3 { margin: 0; } .channel-tag { color: var(--ink-soft); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; } .touch-fields { display: grid; gap: 0.7rem; } .claim-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-block-start: 0.75rem; } .claim-strip div { border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.55rem; min-inline-size: 0; } .claim-strip strong { display: block; font-size: 0.6875rem; color: var(--ink-soft); text-transform: uppercase; } .claim-strip span, .claim-strip a { display: block; overflow-wrap: anywhere; font-size: 0.74rem; color: var(--ink); } .touch-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-block-start: 0.8rem; } .batch-result-card { border-inline-start: 5px solid var(--info); } .batch-result-card.is-paused { border-color: var(--danger); background: var(--danger-soft); } .batch-result-card.is-completed { border-color: var(--accent); } .batch-result-heading, .batch-item-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; } .batch-result-heading h3, .batch-result-heading p { margin: 0; } .batch-result-metrics { margin-block: 0.85rem; } .batch-item-list { display: grid; gap: 0.65rem; } .batch-item-card { display: grid; gap: 0.5rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.8rem; } .batch-item-card.is-failed, .batch-item-card.is-blocked-research { border-inline-start-color: var(--danger); } .batch-item-card.is-review { border-inline-start-color: var(--info); } .batch-item-card.is-suppress { border-inline-start-color: var(--danger); } .batch-item-card.is-running { border-inline-start-color: var(--warning); } .batch-item-heading > div { display: grid; gap: 0.1rem; min-inline-size: 0; } .batch-item-heading strong, .batch-item-heading span { overflow-wrap: anywhere; } .batch-item-heading span { color: var(--ink-soft); font-size: 0.74rem; } .batch-failure-detail { display: grid; gap: 0.65rem; min-inline-size: 0; } .batch-failure-title { color: var(--danger); font-size: 0.86rem; } .batch-failure-copy { margin: 0; color: var(--ink); font-size: 0.8rem; overflow-wrap: anywhere; } .batch-failure-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; } .batch-failure-metrics .metric { min-block-size: 0; padding: 0.55rem; } .batch-failure-metrics .metric strong { font-size: 0.95rem; } .batch-failure-section-label { margin: 0.1rem 0 -0.15rem; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .batch-failure-guidance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } .batch-failure-guidance > div { display: grid; gap: 0.2rem; border: 1px solid color-mix(in oklab, var(--danger) 18%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--danger-soft) 38%, var(--surface-strong)); padding: 0.6rem; } .batch-failure-guidance strong { color: var(--danger); font-size: 0.7rem; } .batch-failure-guidance span { color: var(--ink-soft); font-size: 0.7rem; line-height: 1.4; } .batch-failure-technical { border-block-start: 1px solid var(--line); padding-block-start: 0.55rem; } .batch-failure-technical summary { color: var(--ink-soft); font-size: 0.7rem; } .batch-failure-technical summary small { font-weight: 500; } .batch-failure-technical > p { margin-block-end: 0; overflow-wrap: anywhere; font-size: 0.72rem; } .batch-retry-note { margin: 0; border-inline-start: 3px solid var(--warning); background: var(--warning-soft); padding: 0.55rem 0.65rem; color: var(--ink-soft); font-size: 0.72rem; } .batch-failure-summary { display: grid; gap: 0.65rem; margin-block-end: 0.85rem; border: 1px solid color-mix(in oklab, var(--danger) 38%, var(--line)); border-inline-start: 4px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-soft); padding: 0.8rem; } .batch-failure-summary > div { display: grid; gap: 0.15rem; } .batch-failure-summary > div span { color: var(--ink-soft); font-size: 0.78rem; } .batch-failure-summary ul { display: grid; gap: 0.45rem; margin: 0; padding-inline-start: 1.2rem; } .batch-failure-summary li strong, .batch-failure-summary li span { display: block; overflow-wrap: anywhere; } .batch-failure-summary li span { color: var(--danger); font-size: 0.74rem; } .batch-issue-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .batch-issue-list li { border-radius: 999px; background: color-mix(in oklab, var(--danger) 14%, var(--surface-strong)); padding: 0.25rem 0.5rem; color: var(--danger); font-size: 0.6875rem; font-weight: 600; } .batch-item-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; color: var(--ink-soft); font-size: 0.6875rem; } .batch-item-meta a, .batch-item-meta span { overflow-wrap: anywhere; } .batch-app-link { color: var(--accent); font-weight: 700; text-underline-offset: 0.16em; } .batch-app-link::after { content: " ↗"; } .batch-result-actions { align-items: center; border-block-start: 1px solid var(--line); padding-block-start: 0.8rem; } .batch-id { margin-block-end: 0; overflow-wrap: anywhere; } @container result-rail (width < 34rem) { .batch-failure-metrics, .batch-failure-guidance { grid-template-columns: 1fr; } } .manual-criticism-panel { display: grid; gap: 0.7rem; margin-block-start: 0.9rem; border: 1px solid color-mix(in oklab, var(--info) 30%, var(--line)); border-radius: var(--radius-md); background: var(--info-soft); padding: 0.9rem; } .manual-criticism-panel > p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; } .manual-criticism-panel .touch-actions { align-items: center; margin-block-start: 0; } .style-comparison-toolbar, .comparison-heading, .style-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .style-comparison-toolbar > div { display: flex; gap: 0.45rem; } .comparison-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .style-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; max-block-size: 25rem; overflow: auto; } .style-option { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-strong); padding: 0.7rem; cursor: pointer; } .style-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .style-option.is-incompatible { border-color: color-mix(in oklab, var(--danger) 24%, var(--line)); background: var(--surface-muted); cursor: not-allowed; opacity: 0.78; } .style-option.is-incompatible input { cursor: not-allowed; } .style-option input { margin-block-start: 0.18rem; } .style-option span, .style-option strong, .style-option small { display: block; } .style-option small { margin-block-start: 0.2rem; color: var(--ink-soft); } .style-option .style-option-incompatibility { margin-block-start: 0.45rem; color: var(--danger); font-weight: 600; } .style-compatibility-loading { grid-column: 1 / -1; margin: 0; border-inline-start: 4px solid var(--info); background: var(--info-soft); padding: 0.75rem; color: var(--ink-soft); } .comparison-cost { border-inline-start: 4px solid var(--warning); background: var(--warning-soft); padding: 0.65rem 0.8rem; } .style-comparison-result-slot:not(:empty) { margin-block-start: 1rem; } .style-comparison-results { display: grid; gap: 0.8rem; margin-block-start: 1rem; border-block-start: 1px solid var(--line); padding-block-start: 1rem; } .comparison-heading h3, .comparison-heading p { margin: 0; } .comparison-state { flex: 0 0 auto; border-radius: 999px; background: var(--surface-muted); padding: 0.25rem 0.55rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .comparison-state.is-recommended, .comparison-state.is-succeeded, .comparison-state.is-completed { background: var(--accent-soft); color: var(--accent); } .comparison-state.is-tie, .comparison-state.is-running, .comparison-state.is-queued, .comparison-state.is-pending { background: var(--warning-soft); color: var(--warning); } .comparison-state.is-failed, .comparison-state.is-none { background: var(--danger-soft); color: var(--danger); } .comparison-recommendation { border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); padding: 0.75rem; } .comparison-recommendation p { margin: 0.25rem 0; } .comparison-selection-controls { display: grid; grid-template-columns: minmax(10rem, 0.35fr) minmax(16rem, 1fr); gap: 0.65rem; } .style-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; } .style-result-card { min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.85rem; } .style-result-card.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 15%, transparent); } .style-result-card.is-selected { border-block-start: 4px solid var(--accent); } .style-result-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-block: 0.7rem; } .style-result-metrics > div { border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.45rem; min-inline-size: 0; } .style-result-metrics strong, .style-result-metrics span { display: block; overflow-wrap: anywhere; } .style-result-metrics strong { color: var(--ink-soft); font-size: 0.6875rem; text-transform: uppercase; } .style-result-metrics span { font-size: 0.75rem; } .style-message-list { display: grid; gap: 0.5rem; max-block-size: 34rem; overflow: auto; } .style-message-list > div { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.6rem; } .style-message-list strong { font-size: 0.6875rem; text-transform: uppercase; } .style-message-list pre { margin-block-start: 0.35rem; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 0.76rem; } .comparison-error { color: var(--danger); } .comparison-failure { display: grid; gap: 0.65rem; margin-block-start: 0.75rem; border: 1px solid color-mix(in oklab, var(--danger) 32%, var(--line)); border-inline-start: 4px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); padding: 0.75rem; } .comparison-failure > p, .comparison-failure-list, .comparison-technical p { margin: 0; } .comparison-failure > p { color: var(--ink-soft); font-size: 0.78rem; } .comparison-failure-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } .comparison-failure-meta > div { border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface-strong) 78%, transparent); padding: 0.5rem; } .comparison-failure-meta strong, .comparison-failure-meta span { display: block; overflow-wrap: anywhere; } .comparison-failure-meta strong { color: var(--ink-soft); font-size: 0.6875rem; text-transform: uppercase; } .comparison-failure-meta span { margin-block-start: 0.1rem; font-size: 0.74rem; } .comparison-failure-list { display: grid; gap: 0.45rem; padding: 0; list-style: none; } .comparison-failure-list li { display: grid; gap: 0.15rem; border-inline-start: 3px solid var(--danger); background: color-mix(in oklab, var(--surface-strong) 82%, transparent); padding: 0.55rem 0.65rem; font-size: 0.76rem; } .comparison-failure-list span { color: var(--ink-soft); } .comparison-next-step { border-block-start: 1px solid color-mix(in oklab, var(--danger) 24%, var(--line)); padding-block-start: 0.6rem; color: var(--ink) !important; } .comparison-technical { font-size: 0.72rem; } .comparison-technical summary { cursor: pointer; font-weight: 600; } .comparison-technical code { display: block; margin-block-start: 0.5rem; overflow-wrap: anywhere; } .comparison-technical p { margin-block-start: 0.45rem; color: var(--ink-soft); overflow-wrap: anywhere; } .comparison-selection-note { border-inline-start: 4px solid var(--accent); background: var(--accent-soft); padding: 0.65rem 0.8rem; } .issue-list, .audit-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .issue-list li, .audit-list li { border-inline-start: 3px solid var(--warning); background: var(--warning-soft); padding: 0.5rem 0.65rem; font-size: 0.78rem; } .audit-list li { border-color: var(--line-strong); background: var(--surface-muted); } .filter-bar, .inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem; margin-block-end: 1rem; } .filter-bar label, .inline-form label { flex: 1 1 150px; } .split-view { display: grid; grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr); gap: 1rem; align-items: start; } #runs-filter, #learning-loader, .skills-toolbar { border-radius: var(--radius-md); background: var(--surface-muted); box-shadow: none; } #learning-loader { display: grid; grid-template-columns: minmax(14rem, 22rem) auto; justify-content: start; } .run-list { display: grid; gap: 0; max-block-size: calc(100dvh - 17rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-strong); overflow: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; } .run-item { inline-size: 100%; text-align: start; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0.5rem 0.75rem; color: var(--ink); font-variant-numeric: tabular-nums; } .run-item:last-child { border-block-end: 0; } .run-item:hover { background: var(--surface-muted); } .run-item.is-selected { border-inline-start: 4px solid var(--accent); background: var(--accent-soft); padding-inline-start: calc(0.9rem - 3px); box-shadow: none; } .run-item strong, .run-item span { display: block; } .run-item strong { margin-block-end: 0.1rem; font-size: 0.86rem; } .run-item .run-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .run-item span { color: var(--ink-soft); font-size: 0.76rem; } .detail-pane { position: sticky; inset-block-start: 5rem; max-block-size: calc(100vh - 6rem); overflow: auto; } .detail-pane > .empty-state { display: grid; align-content: center; min-block-size: 15rem; } .detail-stack { display: grid; gap: 1rem; } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-block-end: 1rem; } .metric { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 1rem; } .metric strong { display: block; font-size: 1.65rem; line-height: 1.1; } .metric span { color: var(--ink-soft); font-size: 0.76rem; } #learning-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: clip; } #learning-summary .metric { min-block-size: 7.1rem; border: 0; border-radius: 0; background: var(--surface-strong); padding: 1rem; } #learning-summary .metric:first-child { background: var(--accent-soft); } #learning-summary .metric strong { font-size: clamp(1.35rem, 2.2vw, 1.8rem); } .table-wrap { overflow: auto; margin-block-end: 1rem; } table { inline-size: 100%; border-collapse: collapse; font-size: 0.8rem; } th, td { padding: 0.7rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; } th { color: var(--ink-soft); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; } td { overflow-wrap: anywhere; } details > summary { cursor: pointer; list-style: none; font-weight: 600; } details > summary::-webkit-details-marker { display: none; } details > summary { display: flex; justify-content: space-between; gap: 1rem; } details > summary::before { content: "+"; display: grid; place-items: center; flex: 0 0 1.35rem; inline-size: 1.35rem; block-size: 1.35rem; border: 1px solid color-mix(in oklab, var(--accent) 42%, var(--line)); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.82rem; font-weight: 750; line-height: 1; } details[open] > summary::before { content: "−"; } details[open] > summary { padding-block-end: 1rem; border-block-end: 1px solid var(--line); margin-block-end: 1rem; } .advanced-grid, .data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .data-grid { grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr); align-items: start; } #export-form { background: var(--surface-strong); } #data .advanced-panel:not([open]) { box-shadow: none; } .action-form { display: grid; align-content: start; gap: 0.8rem; } .advanced-grid .action-form { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem; } .compact { gap: 0.65rem; } dialog { max-inline-size: min(92vw, 32rem); max-block-size: min(90dvh, 56rem); border: 0; border-radius: var(--radius-lg); padding: 0; overflow: auto; box-shadow: 0 25px 70px rgb(13 32 23 / 0.3); } dialog::backdrop { background: rgb(12 26 19 / 0.56); backdrop-filter: blur(3px); } .dialog-card { display: grid; gap: 0.8rem; padding: 1.5rem; } .dialog-card h2, .dialog-card p { margin-block-end: 0; } .dialog-actions { justify-content: flex-end; gap: 0.65rem; margin-block-start: 1.25rem; } .toast-region { position: fixed; z-index: 100; inset: auto 1rem 1rem auto; display: grid; gap: 0.5rem; max-inline-size: min(26rem, calc(100vw - 2rem)); } .toast { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--ink); color: white; padding: 0.8rem 1rem; box-shadow: var(--shadow); } .toast.is-error { background: var(--danger); border-color: var(--danger); } .loading-line { block-size: 3px; background: var(--lime); transform-origin: left; animation: loading 1.2s ease-in-out infinite; } @keyframes loading { 0% { scale: 0.08 1; } 55% { scale: 0.75 1; } 100% { scale: 1 1; opacity: 0; } } } @layer components { .candidate-tools { grid-template-columns: repeat(3, minmax(9rem, 1fr)); } .candidate-tools .research-note { grid-column: 1 / -1; } .selection-toolbar, .pagination-bar, .dialog-table-tools, .skills-toolbar, .table-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; } .selection-toolbar { margin-block: 0.75rem; } .pagination-bar { justify-content: flex-end; margin-block: 0.8rem; } .pagination-bar label { display: flex; align-items: center; flex-direction: row; gap: 0.45rem; } .filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter-chip { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--accent-soft); color: var(--ink); padding: 0.4rem 0.7rem; font-size: 0.75rem; } .writer-selector { display: grid; gap: 0.25rem; min-inline-size: 0; font-size: 0.72rem; color: var(--ink-soft); } .writer-selector select { color: var(--ink); } .criticism-regeneration-selector { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-inline-size: 0; color: var(--ink-soft); cursor: pointer; } .submit-bar .criticism-regeneration-copy { display: grid; gap: 0.08rem; min-inline-size: 0; } .criticism-regeneration-copy strong { color: inherit; font-size: 0.72rem; line-height: 1.2; } .criticism-regeneration-copy small { color: var(--ink-soft); font-size: 0.6875rem; font-weight: 500; line-height: 1.25; } .criticism-regeneration-selector input { position: absolute; min-inline-size: 0; min-block-size: 0; inline-size: 1px; block-size: 1px; margin: 0; border: 0; padding: 0; opacity: 0; pointer-events: none; } .criticism-toggle { position: relative; display: flex; align-items: center; justify-content: flex-end; inline-size: 4rem; block-size: 2rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--line-strong); color: var(--ink); padding-inline: 0.48rem; flex: 0 0 auto; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .criticism-toggle-state::before { content: "OFF"; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.045em; } .submit-bar .criticism-toggle-state { color: inherit; } .criticism-toggle-knob { position: absolute; inset-block-start: 0.22rem; inset-inline-start: 0.22rem; inline-size: 1.42rem; block-size: 1.42rem; border-radius: 50%; background: var(--surface-strong); box-shadow: 0 2px 5px rgb(7 26 42 / 0.28); transition: translate 150ms ease; } .criticism-regeneration-selector input:checked + .criticism-toggle { justify-content: flex-start; border-color: var(--accent); background: var(--accent); color: #fff; } .criticism-regeneration-selector input:checked + .criticism-toggle .criticism-toggle-state::before { content: "ON"; } .criticism-regeneration-selector input:checked + .criticism-toggle .criticism-toggle-knob { translate: 2.12rem 0; } .criticism-regeneration-selector input:focus-visible + .criticism-toggle { outline: 3px solid rgb(201 239 104 / 0.3); outline-offset: 2px; } .wide-dialog { inline-size: min(88vw, 72rem); } dialog:has(.wide-dialog) { max-inline-size: min(94vw, 76rem); } .metric-grid.compact { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .metric-grid.compact .metric { padding: 0.75rem; } .metric-grid.compact .metric strong { font-size: 0.9rem; overflow-wrap: anywhere; } .dialog-table-tools { justify-content: space-between; } .dialog-table-tools label { min-inline-size: min(20rem, 100%); } .skills-toolbar { justify-content: space-between; } .skills-toolbar { padding-block: 0.8rem; } .table-actions { display: flex; min-inline-size: 0; flex-wrap: wrap; gap: 0.45rem; } #skills-table { padding-block: 0.35rem; } .skills-data-table { table-layout: fixed; } .skills-data-table th:nth-child(1) { inline-size: 31%; } .skills-data-table th:nth-child(2) { inline-size: 10%; } .skills-data-table th:nth-child(3) { inline-size: 14%; } .skills-data-table th:nth-child(4) { inline-size: 13%; } .skills-data-table th:nth-child(5) { inline-size: 12%; } .skills-data-table th:nth-child(6) { inline-size: 20%; } .skills-data-table tbody tr { transition: background 140ms ease; } .skills-data-table tbody tr:hover { background: var(--surface-muted); } .skills-data-table td:first-child small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } .skills-data-table code { font-size: 0.7rem; } .skill-actions-cell .table-actions { align-items: flex-start; } td > small, td > code, td > span { display: block; margin-block-start: 0.25rem; } .skill-status { display: inline-block; border-radius: 999px; padding: 0.2rem 0.5rem; background: var(--surface-muted); } .skill-status.is-validated, .skill-status.is-frozen_for_batch, .skill-status.is-validated_for_preview { background: var(--accent-soft); color: var(--accent); } .skill-status.is-draft, .skill-status.is-git_review_pending { background: var(--warning-soft); color: var(--warning); } .skill-status.is-archived, .skill-status.is-rejected, .skill-status.is-revoked { color: var(--ink-soft); } .dialog-card pre { max-block-size: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.8rem; } #skill-edit-form textarea { inline-size: 100%; font-family: var(--mono, ui-monospace, monospace); } } @layer utilities { .muted { color: var(--ink-soft); } .danger-text { color: var(--danger); } } @container result-rail (width < 32rem) { .facts-grid, .claim-strip { grid-template-columns: 1fr; } } @container form-stack (width < 44rem) { .contract-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contract-strip > div:nth-child(2) { border-inline-end: 0; } .contract-strip > div:nth-child(-n + 2) { border-block-end: 1px solid var(--line); } } @container workspace (width < 56rem) { .compose-layout { grid-template-columns: minmax(0, 1fr); } .result-rail { position: static; max-block-size: none; } } @media (max-width: 1180px) { body { grid-template: "header" auto "nav" auto "main" 1fr / minmax(0, 1fr); } .section-tabs { inset-block-start: var(--topbar-height); flex-direction: row; block-size: auto; padding: 0.5rem clamp(1rem, 3vw, 2rem); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; } .section-tabs::-webkit-scrollbar { display: none; } .tab-group { display: flex; flex: 0 0 auto; gap: 0.35rem; } .tab-button { grid-template-columns: 1.5rem auto; flex: 0 0 auto; inline-size: auto; min-block-size: 3.1rem; min-inline-size: 8rem; scroll-snap-align: start; } .tab-copy small { display: none; } .nav-safety { display: none; } .workspace { padding-block-start: 2rem; } } @media (max-width: 980px) { .split-view { grid-template-columns: 1fr; } .detail-pane { position: static; max-block-size: none; } .metric-grid { grid-template-columns: repeat(2, 1fr); } #learning-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .advanced-grid { grid-template-columns: 1fr; } .generate-control-grid { grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.75fr); } .generate-control-grid .primary-button { grid-column: 1 / -1; inline-size: 100%; } } @media (max-width: 640px) { :root { --topbar-height: 4.25rem; } .topbar { gap: 0.65rem; padding-inline: 0.8rem; } .brand-lockup { gap: 0.5rem; } .brand-mark { inline-size: 2.25rem; } .brand-lockup .eyebrow { display: none; } .brand-lockup h1 { max-inline-size: 7.7rem; font-size: 0.96rem; line-height: 1.02; text-wrap: balance; } .docs-link { display: none; } .runtime { max-inline-size: min(42vw, 9.5rem); border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; } #runtime-label { overflow: hidden; text-overflow: ellipsis; } .workbook-contract-rules { grid-template-columns: 1fr; } .workbook-contract-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; } .workbook-contract-flow i { display: none; } .workbook-contract-flow strong { display: grid; place-items: center; min-block-size: 2.2rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.055); font-size: 0.6875rem; } .section-tabs { padding-inline: 0.75rem; } .tab-button { display: block; min-inline-size: max-content; min-block-size: 2.75rem; padding-inline: 0.9rem; border-radius: 999px; text-align: center; } .tab-index { display: none; } .workspace { padding: 1rem; } .section-heading { align-items: flex-start; flex-direction: column; } .section-heading { margin-block-end: 1.1rem; } .section-heading h2 { font-size: clamp(1.75rem, 8.2vw, 2.25rem); } .section-heading p:last-child { font-size: 0.92rem; } .contract-strip { grid-template-columns: 1fr 1fr; margin-block-end: 0.4rem; } .contract-strip > div { min-block-size: 4.2rem; padding: 0.7rem 0.75rem; } .field-grid, .facts-grid, .claim-strip, .data-grid, .schema-grid, .candidate-tools, .provenance-grid, .mapping-groups, .mapping-grid, .review-meta { grid-template-columns: 1fr; } .feature-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-evaluation-summary, .feature-assessment-heading { align-items: start; flex-direction: column; } .feature-evaluation-counts { text-align: start; } .mapping-actions { align-items: stretch; flex-direction: column; } .mapping-fields-disclosure > summary { align-items: start; flex-direction: column; } .mapping-field-toolbar { grid-template-columns: 1fr; } .mapping-field-toolbar label { grid-column: auto; } .template-toolbar, .sequence-counts, .sequence-touch-plan { grid-template-columns: 1fr; } .preview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-2 { grid-column: auto; } .submit-bar { padding: 1rem; } .generate-status-row { align-items: stretch; flex-direction: column; } .generate-safety-note { text-align: start; } .generate-control-grid { grid-template-columns: 1fr; } .generate-control-grid .primary-button { grid-column: auto; grid-row: auto; min-block-size: 2.85rem; } .metric-grid { grid-template-columns: 1fr 1fr; } #learning-loader { grid-template-columns: 1fr; } #learning-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #learning-summary .metric { min-block-size: 6.25rem; } .run-list { max-block-size: 28rem; } #skills-table { border: 0; background: transparent; padding: 0; box-shadow: none; overflow: visible; } .skills-data-table, .skills-data-table tbody, .skills-data-table tr, .skills-data-table td { display: block; inline-size: 100%; } .skills-data-table thead { display: none; } .skills-data-table tbody { display: grid; gap: 0.8rem; } .skills-data-table tr { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-strong); padding: 0.75rem; box-shadow: var(--shadow-sm); } .skills-data-table td { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.5rem; border: 0; padding: 0.45rem 0.25rem; } .skills-data-table td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .skills-data-table td > * { grid-column: 2; } .skill-actions-cell .table-actions { grid-column: 2; } .skills-data-table td:first-child small { -webkit-line-clamp: 4; line-clamp: 4; } .result-placeholder { min-block-size: 18rem; } } @media (hover: hover) { .primary-button:not(:disabled):hover, .secondary-button:not(:disabled):hover, .small-button:not(:disabled):hover, .file-action:hover { translate: 0 -1px; } } @media (prefers-contrast: more) { :root { --line: #aab5ad; --line-strong: #77877d; } .panel, .contract-strip > div, .workbook-contract-rules li { box-shadow: none; } .eyebrow, .format-badge { font-weight: 600; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* RevMessage — concept-first visual system. */ @layer redesign { :root { --ink: #0d1b2a; --ink-soft: #586779; --canvas: #f3f6f8; --canvas-deep: #e8edf1; --surface: #f8fafb; --surface-strong: #ffffff; --surface-muted: #eef2f5; --line: #d7dfe5; --line-strong: #aebbc5; --accent: #0c765b; --accent-hover: #075c46; --accent-soft: #e1f3ec; --lime: #c9ef68; --sidebar: #071a2a; --sidebar-soft: #102d40; /* Chrome (topbar + nav + footer card) follows the theme: light chrome in light mode, the original navy in dark mode. */ --chrome-bg: #ffffff; --chrome-bg-soft: #eef2f5; --chrome-ink: #0d1b2a; --chrome-ink-soft: #586779; --chrome-line: #d7dfe5; --chrome-accent: #0c765b; --warning: #9a5a06; --warning-soft: #fff2d9; --danger: #a43b34; --danger-soft: #fae8e6; --info: #216da4; --info-soft: #e2eff8; --shadow-sm: 0 1px 2px rgb(12 27 42 / 0.04); --shadow: 0 0 0 1px rgb(12 27 42 / 0.05), 0 4px 8px rgb(12 27 42 / 0.05), 0 12px 24px rgb(12 27 42 / 0.06); --shadow-float: 0 0 0 1px rgb(12 27 42 / 0.05), 0 4px 8px rgb(12 27 42 / 0.05), 0 12px 24px rgb(12 27 42 / 0.06), 0 24px 48px rgb(12 27 42 / 0.1); --radius-sm: 0.38rem; --radius-md: 0.55rem; --radius-lg: 0.72rem; --terminal-bg: #0c1822; --terminal-ink: #dbe5eb; --content: 1560px; --topbar-height: 4.15rem; } /* Dark theme for the live navy/teal system: true dark greys with a navy cast, layered elevation, off-white text, same teal + lime identity. */ html[data-theme="dark"] { color-scheme: dark; --ink: #e4eaef; --ink-soft: #93a4b3; --canvas: #10161c; --canvas-deep: #0b1015; --surface: #151c23; --surface-strong: #1b242c; --surface-muted: #212b34; --line: #2b3742; --line-strong: #435362; --accent: #3eb08c; --accent-hover: #5cc4a3; --accent-soft: #143229; --lime: #c9ef68; --sidebar: #060f17; --sidebar-soft: #12242f; --chrome-bg: #060f17; --chrome-bg-soft: #12242f; --chrome-ink: #e9f0f4; --chrome-ink-soft: #9ab0bf; --chrome-line: #17364a; --chrome-accent: #3eb08c; --warning: #e0a44a; --warning-soft: #382a10; --danger: #e07a6d; --danger-soft: #3a1e1a; --info: #6fa9d6; --info-soft: #14293c; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 8px 24px rgb(0 0 0 / 0.45); --shadow-float: 0 0 0 1px rgb(255 255 255 / 0.07), 0 12px 32px rgb(0 0 0 / 0.55); } html[data-theme="dark"] label { color: var(--ink-soft); } html[data-theme="dark"] .run-group { border-color: var(--line); } html[data-theme="dark"] .run-group-summary { background: rgb(255 255 255 / 0.03); } html { background: var(--canvas); } body { grid-template: "header header" var(--topbar-height) "nav main" 1fr / 13.75rem minmax(0, 1fr); background: var(--canvas); font-family: InterVariable, Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; font-optical-sizing: auto; font-size: 0.875rem; line-height: 1.5; } h1, h2, h3, strong { color: inherit; } h2 { max-inline-size: none; font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.15; letter-spacing: -0.025em; } h3 { font-size: 1rem; letter-spacing: -0.012em; } code { border: 1px solid var(--line); border-radius: 0.2rem; background: var(--surface-muted); color: var(--ink); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } label { color: var(--ink); font-size: 0.76rem; font-weight: 600; } input, select, textarea { min-block-size: 2.55rem; border-color: var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; box-shadow: 0 1px 0 rgb(12 27 42 / 0.025); } input:hover, select:hover, textarea:hover { border-color: var(--line-strong); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .topbar { min-block-size: var(--topbar-height); border-block-end: 1px solid var(--chrome-line); background: var(--chrome-bg); color: var(--chrome-ink); padding: 0.55rem 1.15rem; backdrop-filter: none; box-shadow: none; } .brand-lockup { gap: 0.72rem; } .brand-lockup .eyebrow { margin: 0; color: var(--chrome-ink-soft); font-size: 0.6875rem; letter-spacing: 0.15em; } .brand-lockup h1 { color: var(--chrome-ink); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; } .brand-mark { position: relative; display: flex; align-items: center; justify-content: center; inline-size: 2.55rem; block-size: 2.55rem; border: 1px solid #395469; border-radius: 0.55rem; background: #0c2537; color: white; font-size: 1.02rem; letter-spacing: -0.36em; } .brand-mark span:first-child { color: #8399a9; translate: -0.12rem 0; } .brand-mark span:last-child { color: var(--lime); translate: 0.08rem 0; } .topbar-actions { gap: 0.55rem; } .docs-link { border-color: var(--chrome-line); border-radius: var(--radius-sm); background: transparent; color: var(--chrome-ink); padding: 0.47rem 0.72rem; } .docs-link:hover { border-color: var(--chrome-accent); color: var(--chrome-accent); } .runtime { gap: 0.55rem; border-color: var(--chrome-line); border-radius: var(--radius-sm); background: var(--chrome-bg-soft); color: var(--chrome-ink); padding: 0.38rem 0.68rem; } .runtime > span:last-child { display: grid; min-inline-size: 0; line-height: 1.08; } .runtime small { color: var(--chrome-ink-soft); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } #runtime-label { color: var(--chrome-ink); font-size: 0.69rem; } .runtime.is-online .status-dot { background: var(--accent); box-shadow: 0 0 0 3px rgb(67 216 134 / 0.15); } .section-tabs { border-inline-end: 1px solid var(--chrome-line); background: var(--chrome-bg); padding: 0.85rem 0.7rem; } .tab-group { gap: 0.25rem; } .tab-button { position: relative; grid-template-columns: minmax(0, 1fr); min-block-size: 3.25rem; border-radius: var(--radius-md); color: var(--chrome-ink-soft); padding: 0.48rem 0.7rem; } /* Decorative step numbers read as noise (and had drifted out of sync). */ .tab-index { display: none; } .tab-button:hover { background: var(--chrome-bg-soft); color: var(--chrome-ink); } .tab-button:focus-visible, .docs-link:focus-visible { outline-color: var(--chrome-accent); } /* Active nav: quiet accent tint, the Linear/Stripe pattern — no lime card, no shadow, no spine. */ .tab-button.is-active { border-color: transparent; background: var(--accent-soft); color: var(--accent); box-shadow: none; } .tab-button.is-active .tab-copy small { color: var(--accent); opacity: 0.75; } .tab-button.is-active::before { content: none; } .tab-index { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; } .tab-copy strong { font-size: 0.83rem; } .tab-copy small { font-size: 0.6875rem; } .nav-safety { border-color: var(--chrome-line); border-radius: var(--radius-md); background: var(--chrome-bg-soft); padding: 0.72rem; } .nav-safety strong { color: var(--chrome-ink); font-size: 0.7rem; } .nav-safety small { color: var(--chrome-ink-soft); font-size: 0.6875rem; } .safety-icon { border-radius: var(--radius-sm); background: transparent; color: var(--chrome-accent); font-size: 1rem; } .workspace { max-inline-size: var(--content); padding: clamp(1rem, 1.8vw, 1.6rem); } .workspace-section { animation: console-reveal 160ms ease-out; } @keyframes console-reveal { from { opacity: 0; translate: 0 3px; } } .section-heading { align-items: start; margin-block-end: 1.1rem; } .section-heading > div { padding-inline-start: 0; } .section-heading > div::before { display: none; } .section-heading h2 { margin-block-end: 0.32rem; max-inline-size: none; font-size: clamp(1.2rem, 1.8vw, 1.5rem); } .section-heading p:last-child { max-inline-size: 76ch; color: var(--ink-soft); font-size: 0.86rem; } /* Page-level kicker: the one overline allowed to carry the accent. */ .section-kicker { margin-block-end: 0.28rem; color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .compose-stage-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-end: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-strong); overflow: hidden; } .compose-stage-bar > li { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.55rem; min-block-size: 4.2rem; border-inline-end: 1px solid var(--line); padding: 0.72rem 0.8rem; } .compose-stage-bar > li:last-child { border-inline-end: 0; } .compose-stage-bar span { grid-row: 1 / span 2; display: grid; place-items: center; align-self: center; inline-size: 1.6rem; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-soft); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6875rem; font-weight: 600; } .compose-stage-bar strong { align-self: end; font-size: 0.8125rem; font-weight: 500; } .compose-stage-bar small { align-self: start; color: var(--ink-soft); font-size: 0.6875rem; } .compose-stage-bar .is-current { background: var(--accent-soft); box-shadow: inset 0 -2px var(--accent); } .compose-stage-bar .is-current span { border-color: var(--accent); background: var(--accent); color: #fff; } .compose-layout { grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); gap: 1rem; } .form-stack, .result-stack { gap: 0.75rem; } .panel { border-color: var(--line); border-radius: var(--radius-md); padding: clamp(0.9rem, 1.8vw, 1.15rem); box-shadow: var(--shadow-sm); } .panel:focus-within { box-shadow: 0 0 0 3px rgb(12 118 91 / 0.07); } .panel[data-step]::before { content: none; } .upload-heading { margin-block-end: 0.75rem; } .upload-heading h3 { font-size: 1.02rem; } .format-badge, .candidate-status, .job-status-badge, .generation-stage-state, .skill-status, .source-badge { border-radius: 0.25rem; font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: 0.035em; } .drop-zone { min-block-size: 8rem; border-color: var(--line-strong); border-radius: var(--radius-md); background: var(--surface); } .upload-icon { border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); } .drop-zone:hover, .drop-zone:focus-within { background: var(--accent-soft); translate: none; } .workbook-contract { border-color: var(--line); background: var(--surface-strong); color: var(--ink); box-shadow: none; } .workbook-contract-copy h3 { font-size: clamp(1.2rem, 2cqi, 1.55rem); } .workbook-contract-copy p:last-child { color: var(--ink-soft); } .workbook-contract-rules li { border-color: var(--line); } .workbook-contract-rules p { color: var(--ink); } .workbook-contract-flow { border-color: var(--line); } .workbook-contract-flow i { background: var(--line-strong); } .contract-strip { border-radius: var(--radius-md); background: var(--surface-strong); } .contract-strip > div { min-block-size: 3.7rem; padding: 0.62rem 0.72rem; } .contract-strip strong { font-family: "SFMono-Regular", Consolas, monospace; font-size: 1.05rem; } .contract-strip .contract-safe { background: var(--accent-soft); } .seller-panel { border-color: var(--line); } .seller-summary { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); } .seller-feature-card, .evidence-row { border-radius: var(--radius-sm); background: var(--surface-muted); } button, .file-action { min-block-size: 2.35rem; } .primary-button, .secondary-button, .ghost-button, .danger-button, .small-button, .file-action { border-radius: var(--radius-sm); font-size: 0.78rem; box-shadow: none; } .primary-button { background: var(--ink); border-color: var(--ink); color: var(--surface-strong); } .primary-button:hover { background: color-mix(in oklab, var(--ink) 88%, black); border-color: color-mix(in oklab, var(--ink) 88%, black); } .secondary-button, .small-button, .file-action { background: var(--surface-strong); } .primary-button:not(:disabled):hover, .secondary-button:not(:disabled):hover, .small-button:not(:disabled):hover, .file-action:hover { translate: none; } .submit-bar { gap: 0.85rem; border-color: var(--line); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.95rem 1rem; box-shadow: var(--shadow-sm); } .submit-bar .primary-button { min-inline-size: 8.75rem; border-color: var(--accent); background: var(--accent); color: #fff; } .submit-bar .primary-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); } .generate-live-status { border-radius: var(--radius-sm); } .writer-selector, .criticism-regeneration-selector { color: var(--ink); } .criticism-regeneration-help { color: var(--ink-soft); } .result-rail { inset-block-start: calc(var(--topbar-height) + 1rem); } .result-placeholder { min-block-size: 24rem; align-content: start; background: var(--surface-strong); color: var(--ink); padding: clamp(1.2rem, 3cqi, 1.8rem); } /* Banner band removed: the panel's own overline labels it. */ .result-placeholder::before { content: none; } .result-placeholder p { color: var(--ink-soft); } .result-placeholder h3 { max-inline-size: 24ch; font-size: clamp(1.35rem, 4cqi, 1.85rem); } .result-placeholder .eyebrow { color: var(--ink-soft); } .empty-orbit { inline-size: 3.55rem; margin-block: 2.5rem 0.9rem; border-color: var(--line-strong); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--ink); } .empty-orbit::before, .empty-orbit::after { display: none; } .empty-evidence-spine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; inline-size: 100%; margin-block-start: 1.2rem; border-block-start: 1px solid var(--line); padding-block-start: 0.9rem; } .empty-evidence-spine span { color: var(--ink-soft); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .empty-evidence-spine i { block-size: 1px; background: var(--line-strong); } #runs-filter, #learning-loader, .skills-toolbar { border-radius: var(--radius-md); background: var(--surface-strong); } .split-view { gap: 0.8rem; } .run-list { border-radius: var(--radius-md); } .run-item { padding: 0.78rem 0.82rem; } .run-item.is-selected { background: var(--accent-soft); } .metric-grid { gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); overflow: hidden; } .metric { min-block-size: 5.3rem; border: 0; border-radius: 0; background: var(--surface-strong); padding: 0.82rem; } .metric strong { font-family: "SFMono-Regular", Consolas, monospace; font-size: 1.3rem; } .metric span { font-size: 0.6875rem; } #learning-summary { border-radius: var(--radius-md); } #learning-summary .metric { min-block-size: 5.75rem; } #learning-summary .metric:first-child { background: var(--accent-soft); } .data-grid { gap: 0.8rem; } #export-form { background: var(--surface-strong); } .advanced-grid .action-form { border-radius: var(--radius-sm); background: var(--surface-muted); } details > summary { font-size: 0.82rem; } .table-wrap { border-radius: var(--radius-md); } table { font-size: 0.75rem; } /* Digits align in columns of counts, sizes, and timestamps. */ table, .metric strong, code, pre, .contract-strip strong { font-variant-numeric: tabular-nums; } th { position: sticky; z-index: 1; inset-block-start: 0; background: var(--surface-muted); color: var(--ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; } th, td { padding: 0.62rem; } tbody tr:hover { background: var(--surface-muted); } .skill-status { padding: 0.18rem 0.42rem; white-space: nowrap; } dialog { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-float); } dialog::backdrop { background: rgb(7 20 32 / 0.68); backdrop-filter: blur(2px); } .dialog-card { gap: 0.72rem; padding: 1.3rem; } .dialog-card > .eyebrow:first-child { color: var(--accent); } .dialog-card h2 { padding-block-end: 0.7rem; border-block-end: 1px solid var(--line); } .dialog-actions { position: sticky; z-index: 2; inset-block-end: 0; margin: 0.7rem -1.3rem -1.3rem; border-block-start: 1px solid var(--line); background: var(--surface-strong); padding: 0.85rem 1.3rem; } .dialog-card pre { border-radius: var(--radius-sm); background: var(--surface-muted); } .toast { border-radius: var(--radius-sm); background: var(--sidebar); } } @layer redesign { .knowledge-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 0.65rem; } .knowledge-toolbar label { min-inline-size: min(18rem, 100%); } .knowledge-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-block-start: 0.8rem; } .knowledge-overview-grid > .panel { min-inline-size: 0; } .knowledge-text, .knowledge-detail-text { max-block-size: 32rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.85rem; color: var(--ink); font-size: 0.74rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .knowledge-results, .knowledge-log { display: grid; gap: 0.55rem; margin-block-start: 0.75rem; } .knowledge-result, .knowledge-log-entry { min-inline-size: 0; border-inline-start: 3px solid var(--line-strong); background: var(--surface-muted); padding: 0.65rem 0.75rem; overflow-wrap: anywhere; word-break: break-word; } .knowledge-log-entry > * { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } .knowledge-result strong, .knowledge-log-entry strong { display: block; color: var(--ink); } .knowledge-result small, .knowledge-log-entry small { color: var(--muted); } .knowledge-status-warning { border-inline-start-color: var(--warning); } .knowledge-status-error { border-inline-start-color: var(--danger); } #knowledge-article-sources { min-block-size: 9rem; } #knowledge-item-fragments, #knowledge-bundle-items { min-block-size: 11rem; } #knowledge-sources-table .table-actions, #knowledge-articles-table .table-actions, #knowledge-items-table .table-actions, #knowledge-conflicts-table .table-actions, #knowledge-bundles-table .table-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .knowledge-gate-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 0.8rem; border-inline-start: 4px solid var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--surface-strong) 58%); } .gate-flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; } .knowledge-stage-selector { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem; } .knowledge-stage-selector legend { padding-inline: 0.35rem; color: var(--muted); font-size: 0.75rem; } .knowledge-stage-selector label { display: inline-flex; align-items: center; gap: 0.35rem; } .knowledge-preview-results { display: grid; gap: 0.75rem; } .knowledge-preview-stage { min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.75rem; } .knowledge-preview-stage summary { cursor: pointer; font-weight: 600; color: var(--ink); } .knowledge-preview-stage pre { margin-block-start: 0.6rem; white-space: pre-wrap; overflow-wrap: anywhere; } } @media (max-width: 1180px) { @layer redesign { body { grid-template: "header" var(--topbar-height) "nav" auto "main" 1fr / minmax(0, 1fr); } .section-tabs { border-inline-end: 0; border-block-end: 1px solid var(--chrome-line); } .tab-button.is-active::before { display: none; } .knowledge-overview-grid { grid-template-columns: 1fr; } .knowledge-gate-banner { align-items: flex-start; flex-direction: column; } .gate-flags { justify-content: flex-start; } } } @media (max-width: 900px) { @layer redesign { .compose-stage-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compose-stage-bar > li:nth-child(2) { border-inline-end: 0; } .compose-stage-bar > li:nth-child(-n + 2) { border-block-end: 1px solid var(--line); } } } @media (min-width: 641px) and (max-width: 690px) { @layer redesign { :root { --topbar-height: 4rem; } .topbar { gap: 0.65rem; padding-inline: 0.7rem; } .brand-lockup { gap: 0.5rem; } .brand-mark { inline-size: 2.25rem; block-size: 2.25rem; } .brand-lockup .eyebrow, .docs-link { display: none; } .brand-lockup h1 { max-inline-size: 10rem; font-size: 0.82rem; line-height: 1.08; text-wrap: balance; } .runtime { max-inline-size: 8.5rem; } .runtime small { display: none; } #runtime-label { font-size: 0.6875rem; } } } @media (max-width: 640px) { @layer redesign { :root { --topbar-height: 4rem; } .topbar { padding-inline: 0.7rem; } .brand-mark { inline-size: 2.25rem; block-size: 2.25rem; } .brand-lockup h1 { max-inline-size: 10rem; color: var(--chrome-ink); font-size: 0.82rem; line-height: 1.08; } .runtime { max-inline-size: 8.5rem; } .runtime small { display: none; } #runtime-label { font-size: 0.6875rem; } .section-tabs { background: var(--chrome-bg); } .tab-button { border-radius: var(--radius-sm); } .compose-stage-bar { grid-template-columns: 1fr 1fr; } .compose-stage-bar > li { min-block-size: 3.85rem; padding: 0.62rem; } .compose-stage-bar small { font-size: 0.6875rem; } .workspace { padding: 0.85rem; } .section-heading h2 { font-size: 1.55rem; } .empty-evidence-spine { grid-template-columns: repeat(4, minmax(0, 1fr)); } .empty-evidence-spine i { display: none; } .empty-evidence-spine span { text-align: center; } .dialog-card { padding: 1rem; } .dialog-actions { margin: 0.6rem -1rem -1rem; padding: 0.8rem 1rem; } } } .sequence-touch-offers { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.35rem 0 0.6rem; } .sequence-touch-offers label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; margin: 0; } .sequence-touch-offers input[type="checkbox"] { width: auto; margin: 0; } /* Runs grouped by uploaded workbook file, with campaign export */ .run-group { border: 1px solid rgb(11 37 69 / 0.12); border-radius: var(--radius-md); margin-block-end: 0.75rem; background: var(--surface-strong); overflow: hidden; } .run-group-summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; cursor: pointer; background: rgb(11 37 69 / 0.04); } .run-group-summary strong { flex: 1; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .run-group .run-item { border: 0; border-block-start: 1px solid rgb(11 37 69 / 0.08); border-radius: 0; } .campaign-export-dialog { border: 0; border-radius: var(--radius-lg); padding: 0; max-inline-size: min(44rem, 92vw); } .campaign-export-dialog::backdrop { background: rgb(4 16 28 / 0.55); } .campaign-export-box { max-block-size: 80vh; overflow: auto; } .campaign-export-leads { display: grid; gap: 0.5rem; margin-block: 0.9rem; } .campaign-export-lead { display: grid; gap: 0.3rem; } .campaign-export-lead select { inline-size: 100%; } .campaign-export-actions { display: flex; gap: 0.6rem; justify-content: flex-end; } .campaign-export-picker { display: grid; gap: 0.3rem; } .campaign-export-picker .small-button { justify-self: start; } .campaign-export-preview { display: grid; gap: 0.55rem; margin-block-start: 0.4rem; padding: 0.65rem 0.8rem; border: 1px solid rgb(11 37 69 / 0.14); border-radius: var(--radius-md); background: rgb(11 37 69 / 0.03); } .campaign-export-touch { display: grid; gap: 0.2rem; } .campaign-export-touch p { margin: 0; white-space: pre-wrap; } .recent-workbooks { display: grid; gap: 0.4rem; margin-block-start: 0.6rem; } .recent-workbooks-row { display: flex; gap: 0.5rem; align-items: center; } .recent-workbooks-row select { flex: 1; min-inline-size: 0; } .candidate-generated { color: var(--accent); font-weight: 500; } /* --- Authentication: login overlay + header account chip --- */ .login-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: var(--surface); } .login-panel { width: min(400px, calc(100vw - 2.5rem)); padding: 2.4rem 2.2rem 2.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-float); display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; } .login-panel h1 { font-size: 1.28rem; margin: 0; } .login-brand { transform: scale(1.25); margin-bottom: 0.35rem; } .login-copy { margin: 0 0 0.45rem; color: var(--text-muted); font-size: 0.92rem; } .google-signin { min-height: 44px; display: flex; justify-content: center; } .login-divider { width: 100%; display: flex; align-items: center; gap: 0.7rem; color: var(--text-muted); font-size: 0.8rem; } .login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); } .credential-form { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; } .credential-form input { width: 100%; padding: 0.62rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font: inherit; background: var(--surface); } .credential-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .login-submit { margin-top: 0.2rem; padding: 0.62rem 0.9rem; border: 0; border-radius: var(--radius-md); background: var(--accent); color: #fff; font: inherit; font-weight: 500; cursor: pointer; } .login-submit:hover { background: var(--accent-hover); } .login-error { margin: 0.2rem 0 0; color: var(--danger); font-size: 0.86rem; } .account-chip { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.65rem 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); /* Sits on the dark topbar, which sets white text; the pill is a light surface, so text colors must come from the surface tokens. */ color: var(--ink); } .account-copy strong { color: var(--ink); } .account-avatar, .account-initial { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .account-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.85rem; } .account-copy { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .account-copy strong { font-size: 0.82rem; } .account-copy small { font-size: 0.7rem; color: var(--ink-soft); } .link-button { border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.78rem; cursor: pointer; padding: 0.15rem 0.3rem; } .link-button:hover { text-decoration: underline; } .google-signin { max-height: 48px; overflow: hidden; } .google-signin svg, .google-signin img { max-height: 40px; max-width: 220px; } /* --- Status chips (disposition + QA verdicts) --- */ .chip { display: inline-flex; align-items: center; padding: 0.06rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; } .chip-review { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 30%, var(--surface-strong)); } .chip-approved { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, var(--surface-strong)); } .chip-suppress { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, var(--surface-strong)); } .chip-neutral { background: var(--surface-muted); color: var(--ink-soft); border-color: var(--line); } /* --- Skeleton loading rows --- */ .skeleton-row { block-size: 3rem; margin: 0.4rem 0.75rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-muted) 25%, var(--line) 45%, var(--surface-muted) 65%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; } @keyframes skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -20% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-row { animation: none; } } /* Keep the three production destinations visible without horizontal discovery. */ @media (max-width: 640px) { .section-tabs { overflow-x: clip; } .section-tabs .tab-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; inline-size: 100%; } .section-tabs .tab-button { inline-size: 100%; min-inline-size: 0; padding-inline: 0.35rem; } .section-tabs .tab-copy strong { font-size: 0.78rem; } } /* --- Live stage bar states --- */ .compose-stage-bar .is-done span { border-color: var(--accent); background: var(--accent); color: #fff; } .compose-stage-bar .is-done strong { color: var(--accent); } /* --- Theme toggle + dark chip/skeleton adjustments --- */ .theme-toggle { border: 1px solid var(--chrome-line); background: transparent; color: var(--chrome-ink); border-radius: 999px; inline-size: 2.1rem; block-size: 2.1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .theme-toggle:hover { background: var(--chrome-bg-soft); } html[data-theme="dark"] .login-panel { border-color: var(--line); } /* --- Dark-theme overrides for redesign-layer light literals --- */ html[data-theme="dark"] .compose-stage-bar .is-current { background: var(--accent-soft); } html[data-theme="dark"] .drop-zone { background: var(--surface-muted); border-color: var(--line-strong); } html[data-theme="dark"] .drop-zone:hover, html[data-theme="dark"] .drop-zone:focus-within { background: var(--accent-soft); } html[data-theme="dark"] .schema-grid > div { background: var(--surface-muted); } html[data-theme="dark"] .source-badge { background: var(--surface-muted); } html[data-theme="dark"] .contract-strip .contract-safe { background: var(--accent-soft); } html[data-theme="dark"] .seller-summary { background: var(--surface-muted); border-color: var(--line); } html[data-theme="dark"] .seller-feature-card { background: var(--surface-muted); } html[data-theme="dark"] .compose-stage-bar span { color: var(--ink-soft); border-color: var(--line-strong); } html[data-theme="dark"] .drop-zone strong, html[data-theme="dark"] .drop-zone > span { color: var(--ink-soft); } /* Dark theme: ink-inverted primary button (the light theme's navy ink button goes muddy on a dark canvas); the Generate button stays accent. */ html[data-theme="dark"] .primary-button { background: var(--ink); border-color: var(--ink); color: #10161c; } html[data-theme="dark"] .primary-button:not(:disabled):hover { background: #cfd8de; border-color: #cfd8de; } html[data-theme="dark"] .submit-bar .primary-button { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-theme="dark"] .submit-bar .primary-button:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* --- Dark-theme overrides: runs detail light-literal surfaces --- */ html[data-theme="dark"] .provenance-grid > div { background: var(--surface-muted); } html[data-theme="dark"] .feature-assessment-card { background: var(--surface-muted); } html[data-theme="dark"] .feature-assessment-card.is-selected { background: var(--accent-soft); } html[data-theme="dark"] .run-stage-checkpoint { background: var(--surface-muted); } html[data-theme="dark"] .audit-list li { background: var(--surface-muted); } html[data-theme="dark"] .dialog-card pre { background: var(--surface-muted); } html[data-theme="dark"] .candidate-generated { color: var(--accent); } html[data-theme="dark"] .review-meta > div, html[data-theme="dark"] .claim-strip > div { background: var(--surface-muted); } html[data-theme="dark"] code { background: var(--surface-muted); color: var(--ink); } html[data-theme="dark"] th { background: var(--surface-muted); color: var(--ink-soft); } /* --- Active generations dashboard (Runs tab) --- */ .active-generations { border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--surface-strong); padding: 0.7rem 0.85rem; margin-block-end: 0.85rem; display: grid; gap: 0.6rem; } .active-generations-heading { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; } .active-generations-heading small { color: var(--ink-soft); } .live-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); animation: live-pulse 1.6s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } .active-generations-list { display: grid; gap: 0.5rem; } .active-generation-card { display: grid; gap: 0.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.55rem 0.7rem; } .active-generation-card.is-paused { border-color: var(--warning); } .active-generation-card.is-failed, .active-generation-card.is-cancelled { border-color: var(--danger); } .active-card-head { display: flex; align-items: center; gap: 0.5rem; } .active-card-head strong { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; } .active-card-detail { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--ink-soft); } .active-progress { flex: 1; min-inline-size: 90px; block-size: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .active-progress-fill { block-size: 100%; border-radius: 999px; background: var(--accent); transition: width 400ms ease; } .active-card-actions { display: flex; gap: 0.45rem; } .small-button.danger { border-color: var(--danger); color: var(--danger); } .small-button.danger:hover { background: var(--danger-soft); } /* --- Command palette (Cmd/Ctrl+K) --- */ .command-palette { inline-size: min(34rem, 92vw); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-strong); color: var(--ink); box-shadow: var(--shadow-float); } .command-palette::backdrop { background: rgb(7 20 32 / 0.45); } .command-palette input { inline-size: 100%; min-block-size: 2.8rem; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); padding: 0.8rem 1rem; font-size: 0.875rem; } .command-palette input:focus-visible { outline: none; border-color: var(--line); } .command-list { list-style: none; margin: 0; padding: 0.35rem; max-block-size: 20rem; overflow: auto; } .command-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; font-size: 0.8125rem; cursor: pointer; } .command-list li small { color: var(--ink-soft); font-size: 0.6875rem; } .command-list li.is-selected { background: var(--accent-soft); color: var(--accent); } .command-list li.is-selected small { color: var(--accent); opacity: 0.75; } /* ========================================================================== 2026 modernization pass — glass chrome, motion, empty states, bento tiles, display headings. Unlayered on purpose: it must win over every layer. Every color comes from theme tokens so light and dark both stay correct. ========================================================================== */ /* --- 1. Glass chrome: refined frosted translucency on the surfaces content actually passes under (sticky topbar, command palette, dialog backdrops). Solid token backgrounds remain the fallback when blur is unsupported. --- */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .topbar { background: color-mix(in srgb, var(--chrome-bg) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } .command-palette { background: color-mix(in srgb, var(--surface-strong) 86%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); } #help-dialog { background: color-mix(in srgb, var(--surface-strong) 84%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); } dialog::backdrop { backdrop-filter: blur(6px); } .command-palette::backdrop { backdrop-filter: blur(3px); } } /* --- 2. Motion: staggered card reveals on section entry, animated stage-bar progression, and a one-time success ring when a run completes. The global prefers-reduced-motion rule above zeroes all of it for those users. --- */ @keyframes rise-in { from { opacity: 0; translate: 0 8px; } } .workspace-section.is-active .form-stack > *, .workspace-section.is-active .split-view > *, .workspace-section.is-active .result-rail > *, .workspace-section.is-active .data-grid > *, .workspace-section.is-active .knowledge-overview-grid > * { animation: rise-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards; } .form-stack > :nth-child(2), .split-view > :nth-child(2), .data-grid > :nth-child(2), .knowledge-overview-grid > :nth-child(2), .result-rail > :nth-child(2) { animation-delay: 50ms; } .form-stack > :nth-child(3), .result-rail > :nth-child(3) { animation-delay: 100ms; } .form-stack > :nth-child(4), .result-rail > :nth-child(4) { animation-delay: 150ms; } .form-stack > :nth-child(n + 5), .result-rail > :nth-child(n + 5) { animation-delay: 200ms; } .tab-button, .docs-link, .theme-toggle, .command-option, .run-item, .primary-button, .secondary-button, .small-button, .file-action, .chip { transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .compose-stage-bar > li { transition: background-color 350ms ease, box-shadow 350ms ease; } .compose-stage-bar span { transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease; } .result-stack.just-completed { border-radius: var(--radius-md); animation: success-ring 1s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes success-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } } /* --- 3. Empty states: an accent-tinted mark plus human-voiced copy instead of a bare "nothing here" line. Marks are inline SVGs in the markup. --- */ .empty-mark { display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; margin-block: 1.4rem 1rem; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); } .empty-mark svg { inline-size: 1.7rem; block-size: 1.7rem; } .detail-pane > .empty-state { justify-items: center; gap: 0.15rem; text-align: center; } .detail-pane > .empty-state .empty-mark { margin-block: 0 0.75rem; } .detail-pane > .empty-state p { max-inline-size: 36ch; } .run-list-empty { display: grid; gap: 0.3rem; border: 0; box-shadow: none; padding: 1.4rem 1.2rem; } .run-list-empty strong { font-size: 0.875rem; } .run-list-empty span { color: var(--ink-soft); font-size: 0.8125rem; } /* --- 4. Bento metric tiles: the safety invariant is the hero cell; the supporting counts wrap around it instead of four identical boxes. --- */ .contract-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) 1.3fr; grid-auto-rows: minmax(4.25rem, auto); } .contract-strip > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } .contract-strip > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; } .contract-strip > div:nth-child(3) { grid-area: 2 / 1 / 3 / 3; border-block-start: 1px solid var(--line); } .contract-strip > .contract-safe { grid-area: 1 / 3 / 3 / 4; grid-template-columns: 1fr; align-content: center; gap: 0.35rem; border-inline-end: 0; background: var(--accent-soft); padding: 1rem 1.1rem; } .contract-strip > .contract-safe strong { color: var(--accent); font-size: 2.2rem; } .contract-strip > .contract-safe span { color: var(--ink); font-size: 0.8125rem; font-weight: 500; } #learning-summary .metric:first-child { grid-column: span 2; } #learning-summary .metric:first-child strong { font-size: 2rem; } @media (max-width: 640px) { .contract-strip { grid-template-columns: 1fr 1fr; } .contract-strip > div:nth-child(1), .contract-strip > div:nth-child(2), .contract-strip > div:nth-child(3) { grid-area: auto; } .contract-strip > div:nth-child(3) { border-block-start: 0; } .contract-strip > .contract-safe { grid-area: auto; grid-column: 1 / -1; } #learning-summary .metric:first-child { grid-column: 1 / -1; } } /* --- User-guide help assistant: floating, draggable, non-modal panel. Opened with dialog.show(), so there is no backdrop and no blur — the app behind stays visible and interactive while the walkthrough runs. --- */ #help-dialog { position: fixed; inset: auto 1rem 1rem auto; z-index: 90; margin: 0; inline-size: min(23rem, calc(100vw - 2rem)); max-block-size: min(72vh, 42rem); overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-strong); color: var(--ink); box-shadow: var(--shadow-float); padding: 0; } .help-card { display: grid; gap: 0.65rem; padding: 0.55rem 1rem 1rem; } /* Grab affordance: the sheet-style bar signals the panel is draggable. */ .help-card::before { content: ""; justify-self: center; inline-size: 2.2rem; block-size: 0.24rem; border-radius: 999px; background: var(--line-strong); } .help-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; cursor: grab; user-select: none; touch-action: none; } .help-panel-head:active { cursor: grabbing; } .help-panel-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.02rem; } .help-panel-head .eyebrow { margin-block-end: 0.1rem; } .help-close { min-block-size: auto; border: 0; background: transparent; color: var(--ink-soft); font-size: 0.95rem; padding: 0.15rem 0.35rem; border-radius: var(--radius-sm); } .help-close:hover { background: var(--surface-muted); color: var(--ink); } .help-hint { margin: 0; color: var(--ink-soft); font-size: 0.76rem; } #help-form { display: grid; gap: 0.5rem; } .help-actions-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; } #help-dialog.is-dropping { outline: 2px dashed var(--accent); outline-offset: -6px; } .help-attachment { display: flex; align-items: center; gap: 0.45rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--ink); padding: 0.3rem 0.55rem; font-size: 0.76rem; } .help-attachment small { flex: 1; color: var(--ink-soft); } #help-dialog.is-dropping .help-card { opacity: 0.55; } .help-actions-row .text-button { margin-inline-end: auto; } .help-mode-toggle { font-size: 0.72rem; color: var(--ink-soft); } .help-mode-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .help-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.78rem; } .help-log li { display: flex; align-items: baseline; gap: 0.45rem; color: var(--ink); } .help-log li::before { content: "▸"; color: var(--ink-soft); flex: none; } .help-log li[data-state="doing"]::before { content: "▸"; color: var(--accent); } .help-log li[data-state="done"]::before { content: "✓"; color: var(--accent); } .help-log li[data-state="skipped"]::before { content: "○"; color: var(--warning); } .help-log li small { color: var(--ink-soft); } .help-target-highlight { outline: 2px solid var(--accent) !important; outline-offset: 3px; border-radius: var(--radius-sm); animation: help-target-pulse 1.1s ease-in-out 2; } @keyframes help-target-pulse { 50% { outline-offset: 7px; } } .help-thread { display: grid; gap: 0.5rem; max-block-size: 21rem; overflow: auto; padding-block: 0.15rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .help-msg { max-inline-size: 92%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.55rem 0.7rem; font-size: 0.8125rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; animation: rise-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards; } /* Thinking bubble shown while the provider call is in flight. */ .help-thinking { display: inline-flex; align-items: center; gap: 0.28rem; padding-block: 0.15rem; } .help-thinking i { inline-size: 0.38rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink-soft); animation: help-dot 1s ease-in-out infinite; } .help-thinking i:nth-child(2) { animation-delay: 0.15s; } .help-thinking i:nth-child(3) { animation-delay: 0.3s; } @keyframes help-dot { 30% { translate: 0 -3px; opacity: 0.5; } } .help-msg[data-role="user"] { justify-self: end; border-color: transparent; background: var(--accent-soft); color: var(--ink); } .help-msg[data-role="assistant"] { justify-self: start; background: var(--surface-muted); color: var(--ink); } .help-msg[data-role="error"] { justify-self: start; border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .help-thread .help-log { margin-inline-start: 0.25rem; padding-inline-start: 0.25rem; border-inline-start: 2px solid var(--accent-soft); } /* --- 5. Display headings: hierarchy from scale, not weight. --- */ .section-heading h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.035em; } .command-empty { margin: 0; padding: 0.65rem; color: var(--ink-soft); font-size: 0.8125rem; } /* --- 2026 operator workspace ------------------------------------------------- One final, deliberately narrow override surface. The repository contains earlier visual passes in both cascade layers and unlayered CSS; keeping this block last makes the current information architecture explicit and avoids specificity escalation throughout the legacy rules above. */ :root { --canvas: #f4f7f8; --canvas-deep: #e8eef0; --surface: #f8fafb; --surface-strong: #ffffff; --surface-muted: #eef3f3; --line: #d6e0df; --line-strong: #aabbb8; --ink: #10201e; --ink-soft: #5a6c69; --accent: #087d62; --accent-hover: #04634e; --accent-soft: #dcf5ec; --info: #246d99; --info-soft: #e5f2fa; --warning: #9b610b; --warning-soft: #fff2d8; --danger: #b3423a; --danger-soft: #fde9e6; --radius-sm: 0.68rem; --radius-md: 1rem; --radius-lg: 1.35rem; --shadow-sm: 0 1px 2px rgb(12 35 31 / 0.04), 0 10px 30px rgb(12 35 31 / 0.055); --shadow: 0 1px 2px rgb(12 35 31 / 0.05), 0 22px 55px rgb(12 35 31 / 0.09); } html[data-theme="dark"] { --canvas: #0c1110; --canvas-deep: #080c0b; --surface: #111817; --surface-strong: #17201e; --surface-muted: #1c2825; --line: #2a3935; --line-strong: #465d57; --ink: #ecf4f1; --ink-soft: #9eb0ab; --accent: #59d5ad; --accent-hover: #7ce3c0; --accent-soft: #163a30; --info: #7bc2eb; --info-soft: #142c3b; --warning: #edb55b; --warning-soft: #3d2e12; --danger: #ff8b80; --danger-soft: #421f1c; } @supports (color: oklch(60% 0.15 160)) { :root { --accent: oklch(52% 0.12 164); --accent-hover: oklch(43% 0.1 164); --accent-soft: oklch(94% 0.045 164); } html[data-theme="dark"] { --accent: oklch(79% 0.13 164); --accent-hover: oklch(86% 0.11 164); --accent-soft: oklch(27% 0.055 164); } } body { background: radial-gradient(circle at 72% -12%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 30rem), linear-gradient(150deg, var(--canvas), var(--canvas-deep)); } .workspace { inline-size: 100%; } .workspace-section { view-transition-name: workspace-section; } .section-heading h2 { text-wrap: balance; } .section-heading p { text-wrap: pretty; } .panel { border-color: color-mix(in oklab, var(--line) 88%, transparent); box-shadow: var(--shadow-sm); } .topbar { border-block-end-color: color-mix(in oklab, var(--chrome-line) 70%, transparent); box-shadow: 0 10px 34px rgb(2 12 10 / 0.16); } .help-trigger { display: inline-flex; align-items: center; gap: 0.42rem; min-block-size: 2.35rem; border: 1px solid var(--chrome-line); border-radius: var(--radius-sm); background: transparent; color: var(--chrome-ink); padding-inline: 0.65rem 0.75rem; font-size: 0.76rem; font-weight: 650; } .help-trigger > span:first-child { display: grid; place-items: center; inline-size: 1.18rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklab, var(--chrome-accent) 24%, transparent); color: var(--chrome-accent); font-size: 0.7rem; } .help-trigger:hover, .help-trigger[aria-expanded="true"] { border-color: var(--chrome-accent); background: color-mix(in oklab, var(--chrome-accent) 12%, transparent); } .help-trigger:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } .compose-stage-bar { border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgb(255 255 255 / 0.45); } .compose-stage-bar > li { min-block-size: 3.8rem; } .compose-stage-bar strong { font-weight: 650; } .compose-stage-bar .is-current { background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--surface-strong) 78%, var(--accent-soft))); } .compose-layout { grid-template-areas: "compose-context compose-action" "compose-form compose-result"; align-items: start; } .compose-action-bar { grid-area: compose-action; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; min-block-size: 3rem; block-size: 3rem; align-self: start; z-index: 12; border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line)); border-radius: var(--radius-md); background: color-mix(in oklab, var(--surface-strong) 88%, transparent); padding: 0.3rem 0.36rem 0.3rem 0.58rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(18px) saturate(1.15); } .compose-action-bar .generate-live-status { min-inline-size: 0; overflow: hidden; border: 0; background: transparent; padding: 0; } .compose-action-bar .generate-live-status > span:last-child { min-inline-size: 0; } .compose-action-bar .generate-live-status small { display: none; } .compose-action-bar .generate-live-status strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compose-action-safety { border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent); padding: 0.24rem 0.45rem; font-size: 0.6875rem; font-weight: 700; line-height: 1; white-space: nowrap; } .compose-action-bar .primary-button { min-inline-size: 8rem; min-block-size: 2.35rem; border-color: var(--accent); background: var(--accent); color: white; padding-block: 0.45rem; font-size: 0.78rem; line-height: 1; white-space: nowrap; box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 18%, transparent); } .compose-action-bar .primary-button:not(:disabled):hover { border-color: var(--accent-hover); background: var(--accent-hover); translate: 0 -1px; } .compose-command-context { grid-area: compose-context; display: grid; gap: 0.65rem; min-inline-size: 0; border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--surface-strong) 94%, var(--accent-soft)); padding: 0.85rem 1rem; box-shadow: var(--shadow-sm); } .compose-command-copy { display: grid; min-inline-size: 0; gap: 0.12rem; } .compose-command-copy .eyebrow { margin: 0; color: var(--accent); } .compose-command-copy strong { font-size: clamp(0.98rem, 1.4vw, 1.12rem); text-wrap: balance; } .compose-command-copy > span:last-child { color: var(--ink-soft); font-size: 0.75rem; } .generate-live-status.is-checking .generate-live-dot { background: var(--info); } .generate-live-status.is-unavailable { border-color: color-mix(in oklab, var(--danger) 30%, var(--line)); background: var(--danger-soft); } .generate-live-status.is-unavailable .generate-live-dot { background: var(--danger); } .generate-unavailable-reason { margin: 0; color: var(--warning); font-size: 0.75rem; line-height: 1.4; } .generate-unavailable-reason.is-ready { color: var(--accent); } .generation-settings { border-block-start: 1px solid var(--line); padding-block-start: 0.65rem; } .generation-settings > summary { align-items: center; justify-content: flex-start; gap: 0.55rem; color: var(--ink-soft); font-size: 0.76rem; } .generation-settings > summary::before { content: "＋"; color: var(--accent); } .generation-settings[open] > summary::before { content: "−"; } .generation-settings > summary small { margin-inline-start: auto; } .generation-settings[open] > summary { margin-block-end: 0.75rem; padding-block-end: 0.65rem; } .generation-settings .generate-control-grid { grid-template-columns: minmax(13rem, 1.1fr) repeat(2, minmax(12rem, 1fr)); align-items: start; } /* Keep only the compact action and result context available when the viewport has enough room. Short-height, reflowed, and mobile layouts remain in flow. */ .form-stack { grid-area: compose-form; } .result-rail { grid-area: compose-result; position: static; inset-block-start: auto; } @media (min-width: 1181px) and (min-height: 700px) { .compose-action-bar { position: sticky; inset-block-start: calc(var(--topbar-height) + 0.3rem); } .result-rail { position: sticky; inset-block-start: calc(var(--topbar-height) + 3.75rem); } } @container workspace (width < 56rem) { .compose-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "compose-action" "compose-context" "compose-form" "compose-result"; } .compose-action-bar, .result-rail { position: static; inset-block-start: auto; } .generation-settings .generate-control-grid { grid-template-columns: 1fr; } } .workbook-contract { background: var(--surface-strong); } .workbook-contract > summary { align-items: center; padding: 0.1rem; } .workbook-contract > summary > span { display: grid; gap: 0.05rem; } .workbook-contract > summary .eyebrow { margin: 0; color: var(--accent); } .workbook-contract > summary > small { color: var(--accent); white-space: nowrap; } .workbook-contract > summary::after { content: "＋"; color: var(--accent); font-size: 1.1rem; } .workbook-contract[open] > summary::after { content: "−"; } .workbook-contract-layout { margin-block-start: 0.25rem; } .workbook-contract .contract-strip { margin-block-start: 0.9rem; } .drop-zone { min-block-size: 9.5rem; } .result-placeholder { min-block-size: 19rem; } .empty-review-promise { display: flex; align-items: center; gap: 0.55rem; margin-block-start: 1.25rem; border-block-start: 1px solid var(--line); padding-block-start: 0.9rem; color: var(--ink); font-size: 0.78rem; } .empty-review-promise > span { display: grid; place-items: center; inline-size: 1.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .status-card.is-blocked { border-color: var(--danger); border-inline-start: 5px solid var(--danger); background: color-mix(in oklab, var(--danger-soft) 72%, var(--surface-strong)); } .status-card.is-blocked .status-badge { background: var(--danger); color: white; } .status-card.is-blocked > h3 { color: var(--danger); } .contract-warning { border-radius: var(--radius-sm); } .contract-warning-details { margin-block-start: 0.6rem; border-block-start: 1px solid color-mix(in oklab, var(--danger) 22%, var(--line)); padding-block-start: 0.5rem; } .contract-warning-details > summary { justify-content: flex-start; color: var(--danger); font-size: 0.75rem; } .contract-warning-details code { display: block; margin-block-start: 0.5rem; overflow-wrap: anywhere; } .skills-toolbar { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.38fr) auto auto; align-items: end; gap: 0.75rem; background: var(--surface-strong) !important; } .skills-toolbar label { min-inline-size: 0; } .skills-toolbar #skills-page-meta { align-self: center; text-align: end; } .skills-data-table td { vertical-align: middle; } .skills-data-table .skill-name-cell strong { font-size: 0.82rem; } .skills-data-table .skill-name-cell small { line-height: 1.45; } .run-group[open] > .run-group-summary { margin-block-end: 0; border-block-end: 0; padding-block-end: 0.65rem; } .run-group[open] > .run-group-summary strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .run-context { display: flex; align-items: start; justify-content: space-between; gap: 1rem; border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line)); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong) 68%); padding: 1rem; box-shadow: var(--shadow-sm); } .run-context-copy { display: grid; min-inline-size: 0; gap: 0.15rem; } .run-context-copy .eyebrow { margin: 0; color: var(--accent); } .run-context-copy h3 { margin: 0; font-size: 1.08rem; text-wrap: balance; } .run-context-copy p { margin: 0; color: var(--ink-soft); font-size: 0.76rem; overflow-wrap: anywhere; } .run-context-meta { display: grid; justify-items: end; gap: 0.35rem; flex: 0 0 auto; color: var(--ink-soft); font-size: 0.72rem; } .run-detail-nav { position: sticky; z-index: 8; inset-block-start: calc(var(--topbar-height) + 0.7rem); display: flex; gap: 0.35rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--surface-strong) 90%, transparent); padding: 0.35rem; box-shadow: var(--shadow-sm); scrollbar-width: none; backdrop-filter: blur(16px) saturate(1.2); } .run-detail-nav::-webkit-scrollbar { display: none; } .run-detail-nav a { flex: 0 0 auto; border-radius: 999px; color: var(--ink-soft); padding: 0.42rem 0.7rem; font-size: 0.75rem; font-weight: 650; text-decoration: none; } .run-detail-nav a:hover, .run-detail-nav a:focus-visible { background: var(--accent-soft); color: var(--accent); } .detail-pane { position: static; max-block-size: none; overflow: visible; } [data-run-section] { scroll-margin-block-start: calc(var(--topbar-height) + 4.5rem); } @media (min-width: 981px) { .split-view > :first-child { position: sticky; inset-block-start: calc(var(--topbar-height) + 1rem); max-block-size: calc(100dvh - var(--topbar-height) - 2rem); overflow: auto; scrollbar-width: thin; } } .help-privacy-note { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.55rem 0.65rem; } .help-privacy-note > summary { justify-content: flex-start; color: var(--ink-soft); font-size: 0.74rem; } .help-privacy-note p { margin: 0.55rem 0 0; font-size: 0.75rem; } .help-close { inline-size: 2.5rem; min-block-size: 2.5rem; display: grid; place-items: center; } @media (min-width: 1440px) { html.help-is-open .workspace { inline-size: calc(100% - 24rem); margin-inline: 0 24rem; } .workspace { transition: inline-size 220ms ease, margin-inline-end 220ms ease; } #help-dialog { inset: var(--topbar-height) 0 0 auto; inline-size: 24rem; max-block-size: calc(100dvh - var(--topbar-height)); border-block: 0; border-inline-end: 0; border-radius: 0; } #help-dialog .help-card { min-block-size: 100%; align-content: start; } } @media (max-width: 1439px) { #help-dialog { inset: auto auto 0 50%; translate: -50% 0; inline-size: min(42rem, calc(100vw - 1rem)); max-block-size: min(78dvh, 42rem); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-block-end: env(safe-area-inset-bottom); overscroll-behavior: contain; } } @media (max-width: 760px) { .compose-stage-bar { display: flex; overflow-x: auto; scroll-snap-type: inline proximity; scrollbar-width: none; } .compose-stage-bar::-webkit-scrollbar { display: none; } .compose-stage-bar > li { flex: 1 0 8.5rem; min-block-size: 3.5rem; border-block-end: 0 !important; scroll-snap-align: start; } .compose-action-bar { grid-template-columns: minmax(0, 1fr) auto; padding-inline-start: 0.65rem; } .compose-action-safety { display: none; } .compose-action-bar .primary-button { min-inline-size: 7.25rem; } .compose-command-context { padding: 0.8rem; } .generation-settings > summary { align-items: flex-start; flex-direction: column; } .generation-settings > summary small { margin-inline-start: 1.7rem; } .generation-settings .generate-control-grid { grid-template-columns: 1fr; } .workbook-contract > summary { align-items: flex-start; } .workbook-contract > summary > small { white-space: normal; text-align: end; } .run-context { display: grid; } .run-context-meta { justify-items: start; } .run-detail-nav { position: sticky; inset-block-start: calc(var(--topbar-height) + 4rem); border-radius: var(--radius-md); } [data-run-section] { scroll-margin-block-start: calc(var(--topbar-height) + 4rem); } } @media (max-width: 640px) { .topbar { gap: 0.4rem; padding-inline: 0.65rem; } .brand-lockup > div { display: none; } .topbar-actions { gap: 0.35rem; } .help-trigger { inline-size: 2.35rem; padding: 0; justify-content: center; } .help-trigger > span:last-child { display: none; } .runtime { inline-size: 2.35rem; min-inline-size: 2.35rem; padding: 0; justify-content: center; } .runtime > span:last-child { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .docs-link { display: none; } .workspace { padding: 0.78rem; } .section-heading { margin-block-end: 0.85rem; } .section-heading h2 { font-size: clamp(1.55rem, 8vw, 1.95rem); } .compose-stage-bar { margin-block-end: 0.75rem; } .compose-stage-bar small { display: none; } .compose-stage-bar > li { grid-template-rows: 1fr; min-block-size: 3.1rem; } .compose-command-copy > span:last-child { display: none; } .drop-zone { min-block-size: 8.5rem; } .skills-toolbar { grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.48fr); gap: 0.6rem; } .skills-toolbar #refresh-skills { justify-self: start; } .skills-toolbar #skills-page-meta { justify-self: end; align-self: center; text-align: end; } .skills-data-table thead { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .skills-data-table tbody { gap: 0.65rem; } .skills-data-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: var(--radius-md); padding: 0.85rem; } .skills-data-table td { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 0.5rem; inline-size: 100%; min-inline-size: 0; border: 0; padding: 0.45rem 0.25rem; } .skills-data-table td::before { content: attr(data-label); grid-column: 1; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } .skills-data-table td > * { grid-column: 2; min-inline-size: 0; overflow-wrap: anywhere; } .skills-data-table td[colspan] { display: block; } .skills-data-table td[colspan]::before { content: none; } .skills-data-table td.skill-name-cell strong { font-size: 0.88rem; } .skills-data-table td.skill-name-cell small { display: block; margin-block-start: 0.3rem; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; } .skills-data-table .skill-integrity-cell, .skills-data-table .skill-updated-cell { display: grid; } .skills-data-table .skill-actions-cell { border-block-start: 1px solid var(--line); padding-block-start: 0.7rem; } .skill-actions-cell .table-actions { grid-column: 2; } .skill-actions-cell .table-actions > :first-child { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .run-group-summary { align-items: flex-start; flex-wrap: wrap; } .run-group-summary strong { flex-basis: calc(100% - 5rem); } .run-group-summary .small-button { margin-inline-start: auto; } #help-dialog { inline-size: 100%; max-block-size: min(82dvh, 44rem); } .help-card { padding-inline: 0.85rem; } } @media (prefers-reduced-motion: reduce) { .workspace, .compose-action-bar .primary-button { transition: none; } } /* --- RevMessage production shell ----------------------------------------- */ .brand-mark { overflow: hidden; border-color: color-mix(in oklab, #7ce3c0 34%, #071c1a); border-radius: 0.72rem; background: #071c1a; letter-spacing: normal; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), 0 8px 22px rgb(2 16 14 / 0.16); } .brand-mark img { inline-size: 100%; block-size: 100%; object-fit: cover; } .brand-lockup h1 { font-weight: 720; letter-spacing: -0.035em; } .compose-stage-bar { margin-block: 0 1rem; padding: 0; list-style: none; } .connection-banner { display: flex; align-items: center; gap: 0.8rem; margin-block-end: 1rem; border: 1px solid color-mix(in oklab, var(--danger) 42%, var(--line)); border-radius: var(--radius-md); background: color-mix(in oklab, var(--danger-soft) 78%, var(--surface-strong)); color: var(--ink); padding: 0.75rem 0.85rem; box-shadow: var(--shadow-sm); } .connection-banner.is-info { border-color: color-mix(in oklab, var(--info) 38%, var(--line)); background: color-mix(in oklab, var(--info-soft) 78%, var(--surface-strong)); } .connection-banner-icon { display: grid; place-items: center; flex: 0 0 auto; inline-size: 1.8rem; aspect-ratio: 1; border-radius: 50%; background: var(--danger); color: white; font-weight: 750; } .connection-banner.is-info .connection-banner-icon { background: var(--info); } .connection-banner-copy { display: grid; min-inline-size: 0; flex: 1; gap: 0.08rem; } .connection-banner-copy strong { font-size: 0.84rem; } .connection-banner-copy span { color: var(--ink-soft); font-size: 0.76rem; } .noscript-banner { position: fixed; z-index: 1000; inset: 0 0 auto; border-block-end: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); padding: 0.8rem 1rem; text-align: center; font-weight: 700; } .auth-progress { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink-soft); font-size: 0.78rem; } .auth-progress > span { inline-size: 0.78rem; aspect-ratio: 1; border: 2px solid var(--line-strong); border-block-start-color: var(--accent); border-radius: 50%; animation: auth-spin 700ms linear infinite; } @keyframes auth-spin { to { rotate: 1turn; } } .credential-form label { gap: 0.3rem; text-align: start; } .login-retry { inline-size: 100%; justify-content: center; } .login-panel:focus { outline: none; } .account-copy { min-inline-size: 0; max-inline-size: 13rem; } .account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-list li { display: block; padding: 0; cursor: default; } .command-option { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; inline-size: 100%; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; padding: 0.5rem 0.65rem; text-align: start; font-size: 0.8125rem; } .command-list li.is-selected { background: transparent; } .command-list li.is-selected .command-option { background: var(--accent-soft); color: var(--accent); } .command-list li.is-selected .command-option small { color: var(--accent); opacity: 0.75; } .toast { display: flex; align-items: center; gap: 0.75rem; } .toast > span { min-inline-size: 0; flex: 1; } .toast-dismiss { flex: 0 0 auto; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 999px; background: transparent; color: white; padding: 0.3rem 0.55rem; font-size: 0.7rem; font-weight: 700; } .toast-dismiss:hover, .toast-dismiss:focus-visible { background: rgb(255 255 255 / 0.15); } @media (max-width: 760px) { .account-copy { display: none; } .account-chip { min-inline-size: 0; padding-inline-end: 0.45rem; } .connection-banner { align-items: flex-start; flex-wrap: wrap; } .connection-banner .small-button { margin-inline-start: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .auth-progress > span { animation: none; } } /* --- Person-first Compose workflow -------------------------------------- */ #compose .compose-layout { grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr); grid-template-areas: "compose-form compose-side"; align-items: start; } .compose-side-rail { grid-area: compose-side; display: grid; align-content: start; gap: 1rem; min-inline-size: 0; } .compose-side-rail > .generation-dock, .compose-side-rail > .result-rail { grid-area: auto; } .compose-result-handoff { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 0.85rem; border-block-end: 1px solid var(--line); padding-block-end: 0.75rem; } .compose-result-handoff p { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; } .compose-result-handoff a { flex: 0 0 auto; } @container result-rail (width < 34rem) { .compose-result-handoff { align-items: stretch; flex-direction: column; } .compose-result-handoff a { inline-size: 100%; } } .generation-dock { container: generation-dock / inline-size; z-index: auto; max-inline-size: 100%; overflow: visible; } .generation-dock-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.65rem; min-inline-size: 0; } .generation-review-selection { align-self: center; color: var(--accent); white-space: nowrap; } .generation-runtime-preview { display: flex; align-items: baseline; gap: 0.45rem; min-inline-size: 0; margin: 0; color: var(--ink-soft); font-size: 0.6875rem; line-height: 1.45; overflow-wrap: anywhere; } .generation-runtime-preview strong { flex: 0 0 auto; color: var(--ink); } .generation-dock .compose-action-bar { position: static; grid-area: auto; min-inline-size: 0; block-size: auto; min-block-size: 3rem; } .generation-dock .generate-unavailable-reason { overflow-wrap: anywhere; } .generation-settings-panel { container: generation-settings-panel / inline-size; padding-block-start: clamp(1rem, 2.2vw, 1.35rem); } .generation-settings-panel > summary { flex-direction: row; } .generation-settings-panel > summary > span { display: grid; min-inline-size: 0; gap: 0.08rem; } .generation-settings-panel > summary .eyebrow { margin: 0; color: var(--accent); } .generation-settings-panel .generate-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; } .generation-settings-panel .generate-control-grid .writer-selector { grid-column: 1 / -1; } .generation-settings-panel .criticism-control { grid-column: auto; } .generation-settings-panel select { max-inline-size: 100%; } @container generation-settings-panel (width < 42rem) { .generation-settings-panel .generate-control-grid { grid-template-columns: minmax(0, 1fr); } .generation-settings-panel .generate-control-grid .writer-selector, .generation-settings-panel .criticism-control { grid-column: 1; } } .generation-settings-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; border-block-start: 1px solid var(--line); padding-block-start: 0.65rem; } .generation-settings-compact > span { display: grid; min-inline-size: 0; gap: 0.08rem; } .generation-settings-compact small { margin: 0; font-size: 0.6875rem; } .generation-settings-compact strong { color: var(--ink); font-size: 0.75rem; font-weight: 600; overflow-wrap: anywhere; } .generation-settings-compact .small-button { white-space: nowrap; } /* Setup is a checklist. Runtime work is reported separately in the detailed person-aware generation timeline. */ .compose-stage-bar .is-done span { border-color: var(--accent); background: var(--accent); color: white; } .compose-stage-bar .is-done span::after { content: "✓"; color: white; font-size: 0.75rem; } .compose-stage-bar .is-done span { color: transparent; font-size: 0; } /* One page scroll for Compose; navigation is repeated above and below the candidate rows so no information or movement control is lost. */ #compose .candidate-list { max-block-size: none; overflow: visible; padding-inline: 0; } .candidate-pagination-top { justify-content: space-between; margin-block: 0.25rem 0.8rem; border-block: 1px solid var(--line); padding-block: 0.6rem; } /* Every Compose disclosure keeps native details/summary behavior and gains the same visible state indicator and keyboard focus treatment. */ #compose details > summary { align-items: center; min-block-size: 2.75rem; border-radius: var(--radius-sm); padding: 0.35rem; } #compose details > summary::before { content: "+"; display: grid; place-items: center; flex: 0 0 1.5rem; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.9rem; font-weight: 750; line-height: 1; transition: border-color 150ms ease, background 150ms ease; } #compose details[open] > summary::before { content: "−"; } #compose .seller-feature-disclosure > summary::after, #compose .workbook-contract > summary::after { content: none; } #compose details > summary:hover { background: color-mix(in oklab, var(--accent-soft) 52%, transparent); } #compose details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The command and result rail scrolls as one bounded region. Pipeline actions therefore never pass underneath the persistent generation controls. */ #compose .result-rail { position: static; inset-block-start: auto; } @media (min-width: 1181px) and (min-height: 520px) { #compose .compose-side-rail { position: sticky; inset-block-start: calc(var(--topbar-height) + 0.75rem); max-block-size: calc(100dvh - var(--topbar-height) - 1.5rem); overflow-y: auto; overscroll-behavior-block: contain; scrollbar-gutter: stable; padding-inline-end: 0.25rem; } } @container workspace (width < 56rem) { #compose .compose-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "compose-form" "compose-side"; } #compose .compose-side-rail { position: static; inset-block-start: auto; max-block-size: none; overflow: visible; padding-inline-end: 0; } } @media (max-width: 640px) { .generation-dock-heading { grid-template-columns: minmax(0, 1fr); } .generation-review-selection { justify-self: start; } .generation-dock .compose-action-bar { grid-template-columns: minmax(0, 1fr) auto; } .generation-settings-compact { grid-template-columns: minmax(0, 1fr); } .generation-settings-compact .small-button { justify-self: start; } .candidate-pagination-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; text-align: center; } } @media (max-width: 760px) { .generation-settings-panel .generate-control-grid { grid-template-columns: minmax(0, 1fr); } .generation-settings-panel .generate-control-grid .writer-selector, .generation-settings-panel .criticism-control { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { #compose details > summary::before { transition: none; } } /* --- Runs: person-first archive and message-first review ---------------- */ #runs .runs-filter { display: grid; gap: 0.75rem; margin-block-end: 1rem; background: var(--surface-strong); } .runs-search-row { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto; align-items: end; gap: 0.7rem; } .runs-search-field { min-inline-size: 0; } .runs-search-field input { inline-size: 100%; } .runs-advanced-filters { border-block-start: 1px solid var(--line); padding-block-start: 0.25rem; } .runs-advanced-filters > summary { align-items: center; justify-content: flex-start; min-block-size: 2.75rem; border-radius: var(--radius-sm); padding: 0.35rem 0.45rem; } .runs-advanced-filters > summary::before { content: "+"; display: grid; place-items: center; flex: 0 0 1.5rem; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.9rem; font-weight: 750; line-height: 1; transition: border-color 150ms ease, background 150ms ease; } .runs-advanced-filters[open] > summary::before { content: "−"; } .runs-advanced-filters > summary small { margin-inline-start: auto; color: var(--ink-soft); font-weight: 500; } .runs-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; } .runs-results-meta { margin: 0; color: var(--ink-soft); font-size: 0.78rem; } #runs .detail-pane details > summary { align-items: center; min-block-size: 2.75rem; border-radius: var(--radius-sm); padding: 0.35rem; } #runs .detail-pane details > summary::before { content: "+"; display: grid; place-items: center; flex: 0 0 1.5rem; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.9rem; font-weight: 750; line-height: 1; transition: border-color 150ms ease, background 150ms ease; } #runs .detail-pane details[open] > summary::before { content: "−"; } #runs .detail-pane details > summary:hover { background: color-mix(in oklab, var(--accent-soft) 52%, transparent); } #runs .detail-pane details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #runs .split-view { grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 0.66fr); } #run-detail { scroll-margin-block-start: calc(var(--topbar-height) + 0.75rem); } #runs .run-list { max-block-size: calc(100dvh - var(--topbar-height) - 6rem); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 0.5rem; } #runs .run-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } #runs .run-group { margin-block-end: 0.65rem; } #runs .run-group:last-child { margin-block-end: 0; } .run-group-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-block-end: 1px solid var(--line); background: color-mix(in oklab, var(--accent-soft) 24%, var(--surface-strong)); } .run-group-summary { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; inline-size: 100%; min-block-size: 3rem; border: 0; border-radius: 0; background: transparent; padding: 0.65rem 0.8rem; color: var(--ink); text-align: start; } .run-group-summary:hover { background: color-mix(in oklab, var(--accent-soft) 58%, transparent); } .run-group-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .run-group-summary .muted { color: var(--ink-soft); font-size: 0.72rem; white-space: nowrap; } .run-group-chevron { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); border-radius: 50%; background: var(--accent-soft); color: var(--accent) !important; font-size: 0 !important; line-height: 1; transition: border-color 150ms ease, background 150ms ease; } .run-group-chevron::before { content: "+"; font-size: 0.9rem; font-weight: 750; } .run-group.is-open .run-group-chevron::before { content: "−"; } .run-group-export { align-self: center; margin-inline-end: 0.55rem; white-space: nowrap; } .run-group-items { display: grid; } #runs .run-item { display: grid; gap: 0.24rem; padding: 0.78rem 0.85rem; } #runs .run-item .run-person-name { margin: 0; color: var(--ink); font-size: 0.9rem; } #runs .run-item .run-company-name { color: var(--ink); font-size: 0.78rem; font-weight: 550; } #runs .run-item .run-meta { gap: 0.35rem; margin-block-start: 0.18rem; } #runs .run-item .run-row-facts { overflow-wrap: anywhere; color: var(--ink-soft); font-size: 0.7rem; } .run-qa-state { border-radius: 999px; background: var(--surface-muted); padding: 0.2rem 0.48rem; color: var(--ink-soft) !important; font-size: 0.6875rem !important; font-weight: 650; } .run-qa-state.is-pass { background: var(--accent-soft); color: var(--accent) !important; } .run-qa-state.is-fail { background: var(--danger-soft); color: var(--danger) !important; } .run-person-company { color: var(--ink) !important; font-size: 0.82rem !important; font-weight: 600; } .run-source-name { font-size: 0.72rem !important; } .run-context-status { border-radius: 999px; background: var(--surface-muted); padding: 0.22rem 0.52rem; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .run-context-status.is-review { background: var(--info-soft); color: var(--info); } .run-context-status.is-send { background: var(--accent-soft); color: var(--accent); } .run-context-status.is-suppress, .run-context-status.is-blocked { background: var(--danger-soft); color: var(--danger); } .run-detail-nav a[aria-current="location"] { background: var(--accent); color: white; } .detail-stack > [data-run-section] { scroll-margin-block-start: calc(var(--topbar-height) + 4rem); } .sequence-editor-panel[data-run-section="messages"] { border-inline-start: 4px solid var(--accent); } .sequence-editor-panel textarea { field-sizing: content; min-block-size: 10rem; max-block-size: none; overflow-y: hidden; resize: vertical; } .read-only-message-field { display: grid; gap: 0.35rem; } .read-only-message-label { color: var(--ink-soft); font-size: 0.72rem; font-weight: 650; } .read-only-message-subject, .read-only-message-copy { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 0.75rem 0.8rem; color: var(--ink); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; } .read-only-message-subject { font-weight: 600; } .run-detail-loading { display: grid; gap: 0.45rem; min-block-size: 15rem; align-content: center; } .run-detail-loading h3, .run-detail-loading p { margin: 0; } .run-detail-loading .skeleton-row { margin-block: 0.5rem; } .run-data-warning { border-inline-start: 4px solid var(--warning); background: var(--warning-soft); } .run-data-warning p, .run-data-warning small { margin-block: 0.35rem 0; } @media (min-width: 981px) { #runs .split-view > :first-child { position: sticky; inset-block-start: calc(var(--topbar-height) + 1rem); max-block-size: none; overflow: visible; } } @media (max-width: 980px) { .runs-search-row { grid-template-columns: minmax(0, 1fr) auto; } .runs-search-field { grid-column: 1 / -1; } .runs-search-row .secondary-button { justify-self: start; } .runs-advanced-filters > summary { align-items: flex-start; } .runs-advanced-filters > summary small { margin-inline-start: 0; } .runs-filter-grid { grid-template-columns: 1fr; } #runs .split-view { grid-template-columns: minmax(0, 1fr); } #runs .run-list { max-block-size: none; overflow: visible; } .run-group-heading { grid-template-columns: minmax(0, 1fr); } .run-group-summary { grid-template-columns: 1.5rem minmax(0, 1fr); } .run-group-summary strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .run-group-summary .muted { grid-column: 2; } .run-group-export { justify-self: start; margin: 0 0 0.65rem 2.45rem; } } @media (prefers-reduced-motion: reduce) { .runs-advanced-filters > summary::before, .run-group-chevron, #runs .detail-pane details > summary::before { transition: none; } }