/* Quiet SaaS workspace: tinted canvas, white surfaces, blue for primary actions. */
:root { color-scheme: light dark; --ink: light-dark(#1d2939, #f2efe9); --muted: light-dark(#667085, #aaa39a); --line: light-dark(#e2e7ef, #2a2825); --control: light-dark(#c5cdd8, #514c45); --canvas: light-dark(#fafafa, #11100f); --nav: light-dark(#edf0f5, #252320); --surface: light-dark(#fff, #181716); --blue: light-dark(#1954ed, #7da2ff); --soft: light-dark(#e9efff, #222e49); --shadow: 0 1px 3px #10182808; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.brand svg { stroke: var(--blue); }
.account-theme-value { margin-inline-start: auto; color: var(--muted); }
.account-menu-action[data-theme-toggle] svg { fill: none; }
[data-theme-icon] { display: none; }
[data-theme-mode="system"] [data-theme-icon="system"],
[data-theme-mode="light"] [data-theme-icon="light"],
[data-theme-mode="dark"] [data-theme-icon="dark"] { display: initial; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
a:hover { color: var(--blue); text-decoration: underline; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--control); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 550; cursor: pointer; white-space: nowrap; }
button:hover:not(:disabled), .button:hover { background: light-dark(#f8fafc, #201e1b); border-color: light-dark(#98a2b3, #807970); color: var(--ink); text-decoration: none; }
button.primary, .button.primary { color: white; background: #1954ed; border-color: #1954ed; }
button.primary:hover:not(:disabled), .button.primary:hover { background: #082caf; color: white; }
button:disabled { opacity: .5; cursor: not-allowed; }
button svg { flex-shrink: 0; }
.phosphor-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.site-header { --nav: light-dark(#f7f7f5, #141312); position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 16px 12px; border-inline-end: 1px solid var(--line); background: var(--nav); }
.brand { display: flex; align-items: center; gap: 6px; padding-inline: 10px; margin-bottom: 16px; font-size: 20px; font-weight: 550; letter-spacing: -.035em; }
.brand:hover { text-decoration: none; }
.mobile-menu-toggle { display: none; }
.sidebar-menu { display: contents; }
button.switcher-trigger { grid-column: 1 / -1; display: flex; align-items: center; justify-content: start; gap: 8px; margin-bottom: 8px; padding: 8px; font-size: 12px; font-weight: 400; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
button.switcher-trigger:hover:not(:disabled) { background: light-dark(#fafbfc, #201e1b); border-color: var(--control); }
.switcher-trigger kbd { margin-inline-start: auto; margin-inline-end: 1px; white-space: nowrap; font: inherit; font-size: 11px; }
.switcher, .schedule-dialog, .delete-dialog { margin: min(10dvh, 80px) auto auto; max-height: calc(100dvh - min(10dvh, 80px) - 16px); }
.switcher { width: 680px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--ink); box-shadow: 0 16px 48px #1018281a; }
.switcher[open] { display: flex; flex-direction: column; }
.switcher::backdrop { background: light-dark(#fafafabf, #00000099); }
.switcher-heading { display: flex; align-items: center; gap: 14px; flex-shrink: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.switcher-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
.switcher-heading button { width: auto; min-height: 26px; padding: 1px 5px; border-color: var(--line); border-radius: 4px; background: var(--canvas); color: var(--muted); font-size: 12px; font-weight: 400; }
#switcher-query { flex: 1; width: 0; min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; outline: none; }
#switcher-query::placeholder { color: light-dark(#8a8f98, #aaa39a); }
#switcher-query::-webkit-search-cancel-button { appearance: none; }
#switcher-results { min-height: 0; max-height: min(50dvh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; border-bottom: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--surface); }
#switcher-results [role="option"] { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 9px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
#switcher-results [role="option"]:hover, #switcher-results [role="option"][aria-selected="true"] { background: light-dark(#f6f7f8, #252320); }
#switcher-results [role="option"]::after { content: '→'; margin-inline-start: auto; color: var(--muted); opacity: 0; }
#switcher-results [role="option"][aria-selected="true"]::after { opacity: 1; }
#switcher-results [role="option"]:has(.switcher-run-status, .switcher-website-status)::after { margin-inline-start: 0; }
.switcher-run-status, .switcher-website-status { flex-shrink: 0; margin-inline-start: auto; }
.switcher-website-status { display: inline-flex; align-items: center; font-size: 12px; }
#switcher-results button[role="option"] { width: 100%; border: 0; background: transparent; text-align: start; font: inherit; }
.switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; max-width: 55%; font-weight: 400; }
.switcher-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.switcher-context::before { content: '—'; margin-inline-end: 10px; }
.switcher-group-heading { margin: 0; padding: 12px 10px 8px; color: var(--muted); font-size: 12px; font-weight: 550; }
.switcher-status { margin: 0; margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.switcher-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; flex-shrink: 0; padding: 10px 18px; background: var(--canvas); color: var(--muted); font-size: 12px; }
.switcher-footer > span { display: inline-flex; align-items: center; gap: 6px; }
.switcher-footer kbd { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.switcher-footer kbd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .switcher-heading { gap: 10px; padding-inline: 12px; } #switcher-results [role="option"] { gap: 8px; } .switcher-label { max-width: 50%; } .switcher-context { font-size: 12px; } .switcher-context::before { margin-inline-end: 6px; } }
.site-header nav a { display: block; padding: 4px 8px; min-height: 28px; border-radius: 4px; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header nav a:hover { background: light-dark(#f0f2f5, #252320); color: var(--ink); text-decoration: none; }
.site-header nav a[aria-current] { background: light-dark(#edf0f3, #252320); color: var(--blue); font-weight: 550; }
.dashboard-navigation { grid-column: 1 / -1; flex-shrink: 0; margin-bottom: 12px; }
.site-header .dashboard-navigation a { display: flex; align-items: center; gap: 8px; }
.website-navigation { flex: 1; min-height: 0; overflow-y: auto; margin-top: 0; }
.website-navigation :focus-visible { outline-offset: -3px; }
.website-nav-heading { position: sticky; top: 0; z-index: 1; background: var(--nav); display: flex; align-items: center; min-height: 28px; padding-inline: 8px; }
.website-nav-heading h2 { margin: 0; font-size: .85rem; color: var(--muted); }
.website-links { list-style: none; margin: 0; padding: 0; }
.site-header .website-links a { display: flex; align-items: center; gap: 6px; }
.domain-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.website-counts { display: inline-flex; flex-shrink: 0; gap: 3px; margin-inline-start: auto; }
.website-count { display: inline-flex; align-items: center; gap: 3px; min-width: 20px; padding: 0 4px; border-radius: 10px; font-size: .75rem; font-weight: 650; }
.website-count svg { flex-shrink: 0; }
.website-result { --passed-bg: var(--nav); --failed-bg: var(--nav); display: inline-grid; grid-template-columns: repeat(2, minmax(20px, 1fr)); overflow: hidden; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(110deg, var(--passed-bg) 50%, var(--failed-bg) 50%) padding-box, linear-gradient(110deg, light-dark(#137353, #69c7a1) 50%, light-dark(#b02935, #ff858f) 50%) border-box; line-height: 1; font-variant-numeric: tabular-nums; }
.website-result:has(span:first-child.is-current) { --passed-bg: light-dark(#137353, #69c7a1); }
.website-result:has(span:last-child.is-current) { --failed-bg: light-dark(#b02935, #ff858f); }
.website-result span { display: grid; place-items: center; min-width: 20px; height: 18px; padding-inline: 3px; font-size: 11px; font-weight: 700; }
.website-result span:first-child { color: light-dark(#137353, #69c7a1); }
.website-result span:last-child { color: light-dark(#b02935, #ff858f); }
.website-result span.is-current { color: light-dark(white, #11100f); }
.stalled-count { background: light-dark(#f9efd9, #352b17); color: light-dark(#815600, #edc374); }
.sidebar-empty { padding-inline: 8px; font-size: .85rem; color: var(--muted); }
.account { position: relative; z-index: 3; flex-shrink: 0; margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.account-trigger { display: flex; align-items: center; gap: 8px; width: calc(100% + 12px); margin: 0 -6px; padding: 6px; min-height: 36px; border-radius: 10px; list-style: none; text-align: left; }
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger:hover, .account-trigger:focus-visible, .account[open] > .account-trigger { background: light-dark(#edf0f3, #252320); color: var(--ink); }
.account-avatar { display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--blue); font-size: 11px; font-weight: 750; }
.account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; line-height: 1.35; }
.account-caret { width: 14px; height: 14px; flex-shrink: 0; margin-inline-start: auto; opacity: .65; }
.account-menu { position: absolute; inset-inline: -6px; bottom: calc(100% - 8px); z-index: 8; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 22px #0002; padding: 6px; }
.account-menu-action { width: 100%; justify-content: start; gap: 8px; border: 0; border-radius: 9px; padding: 9px 10px; font-size: 13px; }
.account-menu-action svg { width: 17px; height: 17px; color: var(--muted); fill: currentColor; }
main { min-width: 0; width: 100%; max-width: 1180px; margin-inline: auto; padding: 32px 48px 64px; }
main:has(.website-test-layout), main:has(.test-editor-layout) { max-width: 1440px; }
h1 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 550; }
p { margin: 10px 0; }
small { display: block; font-size: .85rem; color: var(--muted); margin-top: 3px; }
.muted, .hint, .eyebrow { color: var(--muted); }
.hint, .eyebrow { font-size: .85rem; }
.strong { font-weight: 500; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading > .actions { flex-shrink: 0; max-width: 100%; margin-inline-start: auto; justify-content: end; }
.page-heading.website-heading { align-items: start; row-gap: 10px; margin-bottom: 24px; }
.website-settings-page > .page-heading { align-items: start; }
.website-identity { display: grid; min-width: 0; }
.website-title { display: flex; align-items: start; gap: 8px; flex-shrink: 0; min-width: 0; max-width: 100%; }
.website-favourite { flex-shrink: 0; }
.website-favourite button { padding: 6px; border-color: transparent; background: transparent; color: var(--muted); }
.website-favourite button[aria-pressed="true"] { color: var(--blue); }
.website-title h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quiet-link, .back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--muted); font-size: .9rem; }
.back { margin-bottom: 14px; }
.section { margin-block: 24px 32px; }
.empty { padding-block: 20px; color: var(--muted); }
.table-wrap { position: relative; isolation: isolate; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; text-align: start; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
th { background: light-dark(#f8fafc, #201e1b); }
tr:last-child td { border-bottom: 0; }
th { color: var(--muted); text-align: start; font-size: .8rem; font-weight: 550; white-space: nowrap; }
.test-table tbody tr, .website-table tbody tr { position: relative; }
.test-table tbody tr:hover, .test-table tbody tr:focus-within, .website-table tbody tr:hover, .website-table tbody tr:focus-within { background: light-dark(#f8fafc, #201e1b); }
.test-row-link::after { content: ''; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.test-row-link:focus-visible { outline: none; }
.test-row-link:focus-visible::after { outline: 3px solid var(--blue); outline-offset: -3px; }
td { font-size: .95rem; }
.test-table { min-width: 720px; table-layout: fixed; }
.test-table :is(th, td):nth-child(n + 2) { padding-inline: 8px; }
.test-table th:nth-child(2) { width: 96px; }
.test-table th:nth-child(3) { width: 80px; }
.test-table th:nth-child(4) { width: 88px; }
.test-table th:nth-child(5) { width: 72px; }
td a.strong { display: block; }
td a:focus-visible { outline-offset: 2px; }
.website-table { min-width: 640px; table-layout: fixed; }
.website-table :is(th, td):nth-child(2) { padding-inline-start: 32px; }
.website-table th:nth-child(3) { width: 100px; }
.website-table th:nth-child(4) { width: 88px; }
.website-table .website-result { --nav: var(--surface); }
.website-table .website-result span { height: 26px; padding-inline: 10px; font-size: 12px; font-weight: 600; }
.website-domain { min-width: 170px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.website-health { text-align: start; }
.website-metric-heading { position: relative; display: inline-block; padding-inline-end: 24px; }
button.website-health-info { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 20px; min-height: 24px; padding: 3px; border: 0; background: transparent; color: var(--muted); anchor-name: --website-health-info; }
button.website-health-info:hover, button.website-health-info:focus-visible { background: transparent; color: var(--ink); }
.website-health-help { width: 220px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: visible; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--ink); color: var(--canvas); box-shadow: 0 4px 12px #10182826; font-size: 12px; line-height: 1.4; }
.website-health-help::after { content: ''; position: absolute; top: calc(100% - 4px); left: calc(var(--help-arrow-x, 50%) - 4px); width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.website-health-help.is-below::after { top: -4px; }
@supports (position-anchor: --website-health-info) {
  .website-health-help { position-anchor: --website-health-info; position-area: block-start; position-try-fallbacks: --website-help-start, --website-help-end, flip-block; inset: auto; margin: 8px 0; }
  @position-try --website-help-start { position-area: block-start span-inline-start; }
  @position-try --website-help-end { position-area: block-start span-inline-end; }
}
.website-run-pass-rate { text-align: start; font-size: 20px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.website-run-pass-rate-unit { font-size: 14px; font-weight: 400; }
.website-completed-runs { text-align: start; font-size: 16px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.website-statuses { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; white-space: nowrap; }
.website-result-slot { display: inline-grid; max-width: 100%; }
.website-result-slot > * { grid-area: 1 / 1; }
.website-result-slot > [aria-hidden="true"] { visibility: hidden; }
.website-result-slot .website-running { justify-content: center; align-self: center; height: 28px; padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; text-transform: none; }
.website-result-slot .website-running::before { width: 12px; height: 12px; }
.time { font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status { display: inline-block; color: var(--muted); background: light-dark(#f0f2f5, #252320); border-radius: 4px; padding: 3px 7px; font-size: .85rem; text-transform: capitalize; white-space: nowrap; }
.status.passed { color: light-dark(#137353, #69c7a1); background: light-dark(#e7f7ef, #19372c); --status-icon: url('/assets/status-passed.svg'); }
.status.failed { color: light-dark(#b02935, #ff858f); background: light-dark(#fff0f0, #3d2327); }
.status.failed { --status-icon: url('/assets/status-failed.svg'); }
.status.passed, .status.failed { display: inline-flex; align-items: center; gap: 4px; }
.status.passed::before, .status.failed::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--status-icon) center / contain no-repeat; mask: var(--status-icon) center / contain no-repeat; }
.status.stalled { color: light-dark(#815600, #edc374); background: light-dark(#f9efd9, #352b17); }
.status.queued, .status.running, .status.completed { color: var(--blue); background: var(--soft); }
.status.running { display: inline-flex; align-items: center; gap: 6px; }
.status.running::before { content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: status-spin .9s linear infinite; }
@keyframes status-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .status.running::before { animation: none; } }
.status.paused { color: light-dark(#5f6368, #b9b4aa); background: light-dark(#eceeeb, #2a2825); }
td .status + .muted { display: block; margin-top: 3px; font-size: .85rem; }
.edit-page { max-width: 840px; }
.test-edit-page, .website-settings-page { max-width: none; }
.test-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: start; }
.test-editor-main, .website-test-main { min-inline-size: 0; }
.website-test-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: start; }
.website-test-main .table-wrap:focus-visible { outline-offset: -3px; }
.website-test-main > .empty { margin: 0; padding: 0; color: var(--ink); }
.website-test-layout .test-table { min-width: 540px; }
.website-test-layout th, .website-test-layout td { padding-inline: 16px; }
.test-runs-panel, .run-details-panel, .website-health-panel, .test-settings-panel { position: sticky; top: 24px; min-inline-size: 0; max-block-size: calc(100dvh - 48px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.test-runs-panel h2, .test-settings-panel h2 { margin-bottom: 12px; }
.test-settings-panel .editor-actions { display: grid; gap: 12px; margin: 12px 0 0; }
.settings-meta, .run-summary-meta { display: grid; gap: 8px; margin: 16px 0 0; font-size: .85rem; }
.settings-meta > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.settings-meta dt, .run-summary-meta dt { color: var(--muted); }
.settings-meta dd, .run-summary-meta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.settings-meta time { display: grid; white-space: nowrap; }
.revision-restore { margin-top: 12px; }
.test-settings-panel button { width: 100%; }
.website-health-panel { max-block-size: none; overflow: visible; }
.dashboard-layout .website-health-panel { position: static; }
.website-health-metrics { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; }
.website-run-total, .website-pass-rate, .website-token-total { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.website-run-total-value { font-size: 24px; font-weight: 500; }
.website-run-total { text-align: end; }
.website-pass-rate-unit, .website-token-unit { font-size: 20px; font-weight: 400; }
.website-health-metrics .hint { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; }
.website-token-usage { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.website-token-usage h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.website-ai-cost { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.website-ai-cost { text-align: end; }
.website-health-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.website-health-heading h2 { margin: 0; font-size: 14px; font-weight: 600; }
.website-period select { width: auto; min-height: 24px; padding: 2px var(--select-end) 2px 0; border: 0; background-color: transparent; background-position: right center; color: var(--muted); font-size: 12px; cursor: pointer; }
.website-period select:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.website-run-chart { position: relative; margin: 16px 0 0; font-size: .8rem; }
.website-run-chart svg { display: block; width: 100%; height: 80px; cursor: default; }
.website-run-chart-passed { color: light-dark(#137353, #69c7a1); fill: light-dark(#137353, #69c7a1); }
.website-run-chart-failed { color: light-dark(#b02935, #ff858f); fill: light-dark(#b02935, #ff858f); }
.website-run-chart-empty { fill: var(--line); }
.website-run-chart-selection { fill: var(--ink); }
.website-run-chart-axis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.website-run-chart-axis time:last-child { justify-self: end; }
.website-run-chart input[type="range"] { min-height: 0; }
.website-run-chart:has(input:focus-visible) svg { outline: 3px solid var(--blue); outline-offset: 3px; }
.website-run-chart-detail { position: absolute; width: max-content; max-width: calc(100vw - 16px); z-index: 8; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; pointer-events: none; }
.website-run-chart-detail > span { display: block; }
.website-run-chart-detail .website-run-chart-counts { display: flex; gap: 6px; margin-top: 6px; }
.website-run-chart-counts .status { font-size: .8rem; font-weight: 600; text-transform: none; }
.website-run-chart-detail .hint { margin-top: 4px; font-size: .8rem; }
.recent-runs-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.recent-runs-heading h2 { margin: 0; }
.recent-runs-heading a { font-size: .85rem; white-space: nowrap; }
body:has(.run-page) { overflow-anchor: none; }
.run-history { margin-top: 32px; scroll-margin-top: 24px; }
.run-page .run-history > summary { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 36px; padding-bottom: 10px; border-bottom: 1px solid var(--line); list-style: none; cursor: pointer; }
.run-page .run-history > summary::-webkit-details-marker { display: none; }
.run-page .run-history > summary h2 { margin: 0; }
.run-page .run-history > summary::before { content: ''; width: 12px; height: 12px; margin: 0; border: 0; flex-shrink: 0; background: url('/assets/chevron.svg') center / contain no-repeat; transform: none; }
.run-page .run-history > summary::after { content: none; }
.run-page .run-history[open] > summary::before { transform: rotate(180deg); }
.run-history-content { margin-top: 16px; }
.run-history-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.run-history-page-buttons { display: flex; gap: 8px; margin-inline-start: auto; }
.run-history-table { min-width: 760px; table-layout: fixed; }
.run-history-table th:nth-child(1) { width: 12%; }
.run-history-table th:nth-child(2) { width: 13%; }
.run-history-table th:nth-child(3) { width: 15%; }
.run-history-table th:nth-child(4) { width: 34%; }
.run-history-table th:nth-child(5) { width: 12%; }
.run-history-table th:nth-child(6) { width: 14%; }
.run-history-tokens { font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-history-empty { padding: 32px 16px; text-align: center; }
.run-history-empty p { margin: 0 0 8px; }
.run-history-table tbody tr { position: relative; }
.run-history-table tbody tr:hover, .run-history-table tbody tr:focus-within { background: light-dark(#f8fafc, #201e1b); }
.run-history-table tr:has([aria-current="page"]) { background: light-dark(#f7f8fa, #201e1b); }
.test-runs-panel .empty { margin: 0; }
.test-runs-list { list-style: none; margin: 0; padding: 0; }
.test-runs-list li { border-bottom: 1px solid var(--line); }
.test-runs-list li:last-child { border-bottom: 0; }
.test-run-link { display: block; padding: 12px 8px; margin-inline: -8px; border-radius: 6px; }
.test-run-link:hover { background: light-dark(#f5f6f8, #252320); color: inherit; text-decoration: none; }
.test-run-link:focus-visible { outline-offset: -3px; }
.test-run-active .test-run-link { background: light-dark(#f7f8fa, #201e1b); }
.test-run-active .test-run-link:hover { background: light-dark(#eef1f5, #2a2825); }
.test-run-row, .test-run-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.test-run-title { min-width: 0; font-weight: 500; }
.test-run-link[aria-current="page"] .test-run-title { color: var(--blue); font-weight: 600; }
.test-run-meta { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
.test-heading { background: var(--canvas); padding-block: 12px; margin-top: -12px; margin-bottom: 24px; }
.test-heading .back { margin: 0; }
.run-controls { justify-content: end; gap: 10px; }
.last-run { font-size: .85rem; white-space: nowrap; }
[data-revision-picker] { display: flex; align-items: center; gap: 8px; }
label { display: block; margin: 20px 0 6px; font-size: .9rem; font-weight: 500; }
.editor > label:first-of-type { margin-top: 0; }
input:not([type=checkbox]):not([type=hidden]), textarea, select { display: block; width: 100%; min-width: 0; min-height: 36px; padding: 8px 10px; border: 1px solid light-dark(#8994a5, #756e64); border-radius: 6px; background: var(--surface); color: var(--ink); }
select { --select-end: 28px; appearance: none; padding-inline-end: var(--select-end); background-image: url('/assets/chevron.svg'); background-repeat: no-repeat; background-position: right 10px center; background-size: 9px; }
input[readonly], textarea[readonly], input:disabled { background: light-dark(#fafbfc, #201e1b); }
input:disabled { color: var(--muted); }
textarea { resize: vertical; line-height: 1.5; }
.test-composer { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.test-composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--soft); }
.test-composer textarea { min-height: 96px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.test-composer textarea:focus-visible { outline: none; }
.test-composer textarea::placeholder { color: var(--muted); opacity: 1; }
.test-composer-actions { display: flex; align-items: center; justify-content: end; gap: 12px; flex-wrap: wrap; }
.test-composer-actions .quiet-link { order: -1; margin-inline-end: auto; text-decoration: none; }
.test-composer-actions button.quiet-link { padding: 0; border: 0; background: transparent; font-weight: 400; }
.test-composer-actions .quiet-link:is(:hover, :focus-visible) { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.add-test-button { anchor-name: --add-test; }
.add-test-popover, .ai-create-popover { inline-size: 420px; max-inline-size: calc(100vw - 32px); max-block-size: calc(100dvh - 32px); overflow: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px #0002; }
.add-test-popover .test-composer, .ai-create-popover .test-composer { border: 0; box-shadow: none; }
.add-test-popover:focus-within, .ai-create-popover:focus-within { border-color: var(--blue); }
@supports (position-area: block-end span-inline-start) {
  .add-test-popover[popover] { position-anchor: --add-test; position-area: block-end span-inline-start; position-try-fallbacks: flip-block, flip-inline; inset: auto; margin: 8px 0; }
}
.test-editor-heading { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0; }
.editor-breadcrumb { min-width: 0; max-width: 100%; }
/* Keep the title's tap area without shifting the heading baseline. */
.test-edit-page .test-editor-heading input.test-name { flex: 1; min-width: 180px; width: 0; min-height: 0; height: calc(1lh + 10px); padding: 5px 0; margin-block: -5px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; }
input.test-name:focus-visible { outline: 2px solid var(--control); outline-offset: 4px; }
input.test-name::placeholder { color: var(--muted); font-weight: 400; }
:user-invalid { border-color: light-dark(#b02935, #ff858f) !important; }
.checkbox { display: flex; align-items: center; gap: 8px; min-height: 36px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; }
.editor input, .editor textarea { scroll-margin-block: 120px 24px; }
.steps-section { margin-top: 0; }
.milestone-list { list-style: none; display: grid; margin: 0; padding: 0; border-block: 1px solid var(--line); }
.milestone { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; align-items: center; padding: 10px 4px; border: 1px solid transparent; border-bottom-color: var(--line); background: transparent; min-width: 0; }
.milestone:last-child { border-bottom-color: transparent; }
.milestone:hover, .milestone:focus-within { background: light-dark(#f8fafc, #201e1b); }
.step-kind-row { display: flex; align-items: center; gap: 7px; }
.step-kind-control { position: relative; width: 112px; }
.step-kind-icon { position: absolute; z-index: 1; inset-inline-start: 10px; top: 50%; display: inline-grid; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.step-kind-icon svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: currentColor; }
.milestone[data-kind="action"] .step-kind-icon { color: light-dark(#1749b1, #9bbcff); }
.milestone[data-kind="check"] .step-kind-icon { color: light-dark(#106b54, #89d6aa); }
.milestone[data-kind="action"] .check-icon, .milestone[data-kind="check"] .action-icon { display: none; }
.step-kind-row select { width: 112px; min-height: 30px; padding: 3px 10px 3px 32px; padding-inline-end: var(--select-end); font-size: .85rem; border-color: var(--control); background-color: light-dark(#f8fafc, #201e1b); }
.milestone .step-number { margin: 0; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.milestone-content { grid-column: 2; min-width: 0; display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 14px; }
.milestone label { margin: 0; font-size: .8rem; color: var(--muted); }
.step-type, .drag-ghost small { display: inline-block; justify-self: start; padding: 3px 8px; border-radius: 4px; font-size: .8rem; }
.milestone[data-kind="action"] [data-step-kind], .step-type-action, .drag-ghost:not(.ghost-check) small { color: light-dark(#1749b1, #9bbcff); background-color: light-dark(#edf2ff, #222e49); border-color: light-dark(#b8c9ef, #465d8a); }
.milestone[data-kind="check"] [data-step-kind], .step-type-check, .drag-ghost.ghost-check small { color: light-dark(#106b54, #89d6aa); background-color: light-dark(#e6f6ef, #19372c); border-color: light-dark(#a8d7c5, #3b715b); }
.milestone textarea[data-step-text] { field-sizing: content; border: 0; border-radius: 2px; padding: max(4px, calc((36px - 1lh) / 2)) 0; background: transparent; overflow: hidden; resize: none; }
.milestone.is-dragging { border-style: dashed; border-color: var(--control); background: var(--canvas); }
.milestone.is-dragging > * { opacity: 0; }
.milestone.is-dragging::after { content: 'Drop here'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .85rem; pointer-events: none; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 10px 36px; background: var(--surface); border: 1px solid var(--control); border-radius: 6px; box-shadow: 0 8px 24px #0002; }
.drag-ghost small { margin: 0; flex-shrink: 0; }
.drag-ghost p { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.icon-button { width: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); }
button.drag-handle { cursor: grab; touch-action: none; user-select: none; }
.is-dragging .drag-handle { cursor: grabbing; }
button.remove-milestone { grid-column: 3; font-size: 20px; }
button.remove-milestone:hover { color: light-dark(#b02935, #ff858f); background: light-dark(#fff1f1, #3d2327); }
.step-actions { margin-block: 12px 20px; gap: 8px; }
.step-actions button { border-color: var(--control); }
.ai-create-popover:not([popover]) { position: static; margin-block: 12px; }
[data-create-ai] { anchor-name: --create-ai; }
@supports (position-area: block-end span-inline-start) {
  .ai-create-popover[popover] { position-anchor: --create-ai; position-area: block-end span-inline-start; position-try-fallbacks: flip-block, flip-inline; inset: auto; margin: 8px 0; }
}
.run-replay.author-preview { margin: 0 0 24px; padding-top: 0; }
.author-status[data-loading]::before { content: ''; flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: status-spin .9s linear infinite; }
.author-live, .run-live { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; border: 0; pointer-events: none; }
.author-status { display: flex; align-items: center; gap: 8px; margin: 0; padding: 2px 4px; font-size: .85rem; overflow-wrap: anywhere; }
.ai-review { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ai-review-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-review-source { margin-inline-start: auto; font-size: .8rem; color: var(--muted); }
.ai-review .author-status { padding: 0; font-weight: 600; color: var(--ink); }
.ai-review-notes { margin: 8px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.ai-review-actions { margin-top: 12px; }
.ai-diff { display: grid; gap: 8px; margin-top: 12px; }
.ai-diff-row { display: grid; grid-template-columns: 2.5rem repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-diff-heading { font-size: .75rem; font-weight: 600; color: var(--muted); }
.ai-diff-heading > :first-child { text-align: center; }
.ai-diff-heading > :not(:first-child) { padding-inline: 12px; }
.ai-diff-step { padding-block: 10px; text-align: center; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ai-diff-cell { min-width: 0; padding: 10px 12px; border-radius: 5px; font-size: .85rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.ai-diff-before { color: light-dark(#9a2933, #ff9ba3); background: light-dark(#fff0f0, #3d2327); }
.ai-diff-after { color: light-dark(#137353, #69c7a1); background: light-dark(#e7f7ef, #19372c); }
.ai-diff-cell del, .ai-diff-cell ins { text-decoration: none; }
.ai-diff-empty { color: var(--muted); background: light-dark(#f0f2f5, #252320); }
@media (max-width: 640px) {
  .ai-diff-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .ai-diff-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ai-diff-step { grid-row: span 2; }
  .ai-diff-cell::before { content: attr(data-side); display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; }
}
.schedule-label { margin: 0 0 6px; color: var(--muted); font-size: .85rem; }
.settings-meta + .schedule-label { margin-top: 20px; }
.schedule-summary { position: relative; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: light-dark(#f8fafc, #201e1b); font-size: .9rem; }
.schedule-summary > [data-schedule-edit] { position: absolute; top: 8px; right: 8px; }
.schedule-summary > [data-schedule-edit]:is(:hover, :focus-visible) { background: light-dark(#edf0f3, #252320); color: var(--ink); }
.schedule-summary:has(> [data-schedule-edit]:not([hidden])) [data-schedule-details] { padding-inline-end: 32px; }
.schedule-summary p { margin: 0; }
.schedule-summary p + p { margin-top: 4px; }
[data-schedule-details] { font-weight: 600; }
[data-schedule-hours] { white-space: nowrap; }
.schedule-dialog, .delete-dialog { width: 440px; max-width: calc(100vw - 32px); overflow: auto; padding: 20px; border: 1px solid var(--control); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px #0002; }
.schedule-dialog::backdrop, .delete-dialog::backdrop { background: #0005; }
.schedule-dialog h2, .delete-dialog h2 { margin: 0; }
.schedule-dialog button, .delete-dialog button { width: auto; }
.delete-dialog .actions { justify-content: end; margin-top: 20px; }
.delete-subject { overflow-wrap: anywhere; }
.delete-action { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
button.delete-link { justify-content: start; width: auto; min-height: 28px; padding: 2px 0; border: 0; background: transparent; color: light-dark(#a52d38, #ff858f); font-weight: 400; }
button.delete-link:hover:not(:disabled) { background: transparent; color: light-dark(#872330, #ffabb2); text-decoration: underline; }
button.destructive { background: #a52d38; border-color: #a52d38; color: white; }
button.destructive:hover:not(:disabled) { background: #872330; border-color: #872330; color: white; }
.schedule-dialog > .actions { justify-content: end; margin-top: 20px; }
.schedule-week { display: grid; gap: 12px; margin-block: 20px; }
.schedule-day-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 6px; }
.schedule-day-row label { grid-column: 1; grid-row: 1; margin: 0; }
/* Invisible, disabled time inputs retain their native height beneath the Off state. */
.schedule-day-times, .schedule-day-times[hidden] { display: contents !important; }
.schedule-day-times[hidden] > * { visibility: hidden; }
.schedule-day-times > * { grid-row: 1; }
.schedule-day-times > :nth-child(1) { grid-column: 2; }
.schedule-day-times > :nth-child(2) { grid-column: 3; }
.schedule-day-times > :nth-child(3) { grid-column: 4; }
.schedule-day-row input[type=time] { padding-inline: 6px; }
.schedule-day-off { grid-column: 2 / 5; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding-inline: 6px; }
@media (max-width: 400px) {
  .schedule-dialog { padding: 16px; }
  .schedule-day-row { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); }
  .schedule-day-row > label { grid-column: 1 / -1; }
  .schedule-day-times > * { grid-row: 2; }
  .schedule-day-times > :nth-child(1) { grid-column: 1; }
  .schedule-day-times > :nth-child(2) { grid-column: 2; }
  .schedule-day-times > :nth-child(3) { grid-column: 3; }
  .schedule-day-off { grid-column: 1 / -1; grid-row: 2; }
}
.disclosure { margin-block: 14px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.editor > .disclosure, .edit-page > .disclosure, .test-editor-main > .disclosure, .disclosure-flat { padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; background: transparent; }
.editor > .disclosure, .test-editor-main > .disclosure, .disclosure-flat { margin-top: 24px; }
summary { cursor: pointer; min-height: 32px; align-content: center; color: var(--muted); font-size: .9rem; }
summary:hover { color: var(--blue); }
.edit-page summary, .disclosure-flat > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.edit-page summary::-webkit-details-marker, .disclosure-flat > summary::-webkit-details-marker { display: none; }
.edit-page summary::after, .disclosure-flat > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin-inline-end: 6px; flex-shrink: 0; }
.edit-page details[open] > summary::after, .disclosure-flat[open] > summary::after { transform: rotate(135deg); }
.disclosure[open] > summary { margin-bottom: 14px; }
.disclosure .actions { margin-top: 12px; }
.website-settings-form { grid-column: 1; grid-row: 1; min-inline-size: 0; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.website-settings-form p.hint { margin: 4px 0 0; }
.website-settings-sidebar { grid-column: 2; grid-row: 1; }
.website-settings-fields { display: grid; gap: 16px; }
.website-settings-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; }
.website-settings-row > :is(label, h2) { margin: 0; padding-top: 8px; }
.website-settings-row > :is(label, h2):has(.website-settings-required) { padding-top: 2px; }
.website-settings-required { display: block; margin-top: 0; color: var(--muted); font-size: 12px; line-height: 1.2; font-weight: 400; }
.website-settings-input { min-inline-size: 0; }
.website-settings-section { margin-bottom: 24px; }
.website-settings-section:last-child { margin-bottom: 0; }
.website-settings-section + .website-settings-section { padding-top: 24px; border-top: 1px solid var(--line); }
.website-settings-section + .website-settings-section-continuation { padding-top: 0; border-top: 0; }
.webhook-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.webhook-input { position: relative; min-inline-size: 0; }
.webhook-input input[readonly] { min-height: 40px; padding-inline-end: 44px; }
button.webhook-copy { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; min-height: 32px; padding: 0; border: 0; background: var(--surface); color: var(--muted); }
button.webhook-rotate { width: 40px; min-height: 40px; padding: 0; color: var(--muted); }
.webhook-delivery-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notice { margin: 0 0 20px; padding: 10px 14px; border: 1px solid light-dark(#d8e2fa, #465d8a); border-radius: 5px; background: light-dark(#f5f8ff, #222e49); font-size: .9rem; overflow-wrap: anywhere; }
.notice.error { border-color: light-dark(#b02935, #ff858f); color: light-dark(#982d36, #ff9ba3); background: light-dark(#fff5f5, #3d2327); }
.notice a { text-decoration: underline; }
.toast { position: fixed; z-index: 10; inset-inline-end: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; max-inline-size: min(400px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 12px; background: #171717; color: white; font-size: 13px; overflow-wrap: anywhere; box-shadow: 0 4px 16px #10182818; animation: toast-enter .16s ease both; }
.toast > span { min-width: 0; }
.toast.is-leaving { animation: toast-leave .16s ease both; pointer-events: none; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-leaving { animation: none; } .toast.is-leaving { opacity: 0; } }
.scheduler-warning { flex-shrink: 0; margin-top: 12px; border: 1px solid light-dark(#d99a26, #9e762f); border-radius: 6px; color: light-dark(#784b0a, #edc374); background: light-dark(#fff8e6, #352b17); font-size: .85rem; }
.scheduler-warning > strong { display: block; padding: 8px 10px; font-weight: 600; }
.scheduler-warning p { margin: 0; padding: 0 10px 10px; }
.test-edit-page .test-heading { align-items: start; padding-block: 0; margin-top: 0; margin-bottom: 24px; }
.run-heading-identity { flex: 1; min-width: 0; }
.run-heading-home { display: inline-flex; align-items: center; align-self: center; justify-content: center; min-width: 24px; min-height: 24px; height: 1.2em; color: var(--muted); vertical-align: text-bottom; }
.run-heading-home .phosphor-icon { width: 1em; height: 1em; }
@media (min-width: 681px) { .run-heading-home .phosphor-icon { transform: translateY(1px); } }
.run-heading-website { color: var(--muted); }
.run-page .run-replay { margin-top: 0; padding-top: 0; }
.mobile-run-outcome { display: none; }
.run-sidebar { display: grid; gap: 16px; }
.run-sidebar > section { position: static; max-block-size: none; overflow: visible; }
.run-details-panel .run-usage { margin: 16px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.run-summary > h2 { margin: 0; }
.run-summary-meta > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.run-summary-meta .status { vertical-align: middle; }
.run-summary-timestamp { display: grid; white-space: nowrap; }
.run-usage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 16px; margin: 0; }
.run-usage-grid > div { min-width: 0; }
.run-usage-grid dt { color: var(--muted); font-size: .8rem; }
.run-usage-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.run-usage dl + dl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.run-usage h3 { margin: 0 0 16px; font-size: .9rem; font-weight: 400; color: var(--muted); }
.run-page .steps-section { margin-top: 26px; }
.result-section-heading { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.result-section-heading h2 { margin: 0; }
.run-agent-brief { min-inline-size: 0; padding: 16px; border: 1px solid light-dark(#dfe3f7, #42395b); border-radius: 10px; background: light-dark(#f8f9ff, #211e2d); box-shadow: var(--shadow); }
.run-agent-brief h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.run-agent-brief h2 .phosphor-icon { color: light-dark(#6b5bdd, #b5a5ff); }
.agent-brief-summary { margin: 0 0 14px; }
.agent-brief-summary strong { display: block; font-size: 13px; }
.agent-brief-summary > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); overflow-wrap: anywhere; }
.agent-brief-input { position: relative; padding: 12px 32px 12px 12px; border: 1px solid light-dark(#ddd7ee, #4c4266); border-radius: 6px; background: light-dark(#f8f7fc, #282236); }
.agent-brief-prompt { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 12px/1.5 ui-monospace, monospace; color: light-dark(#6853a6, #c7afff); }
.run-agent-brief .agent-brief-fallback { margin-top: 10px; font: inherit; resize: none; }
button.agent-brief-copy { color: light-dark(#6853a6, #c7afff); background: light-dark(#f8f7fc, #282236); }
button.agent-brief-copy:is(:hover, :focus-visible) { color: light-dark(#514084, #ddcfff); background: light-dark(#eee9f8, #352c48); border-color: light-dark(#ddd7ee, #4c4266); box-shadow: none; }
.agent-brief-copy span:not([hidden]) { display: inline-flex; }
.results { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--line); }
.result-step { display: grid; grid-template-columns: 24px 88px minmax(0, 1fr) auto; gap: 8px 10px; padding: 16px 12px; border: 1px solid transparent; border-bottom-color: var(--line); scroll-margin-block-start: 100px; }
.result-step:last-child { border-bottom-color: transparent; }
.result-step-heading { grid-column: 1 / -1; display: grid; grid-template-columns: 24px 88px minmax(0, 1fr) auto; grid-template-columns: subgrid; align-items: start; gap: 10px; }
.result-step-number { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.result-step-heading .step-type { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 500; white-space: nowrap; }
.result-instruction { min-inline-size: 0; margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.result-step-details { grid-column: 3 / -1; min-inline-size: 0; padding: 12px; border: 1px solid light-dark(#cce8d8, #3b715b); border-radius: 5px; background: light-dark(#f0faf4, #19372c); }
.step-diagnostics { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .85rem; }
.step-diagnostics dt { color: var(--muted); }
.step-diagnostics dd { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; }
.result-step-failed .result-step-details { border-color: light-dark(#e6b6bb, #81464e); background: light-dark(#fff5f5, #3d2327); }
button.result-step-number { min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.result-step-playing .result-step-number { color: var(--ink); font-weight: 700; }
.result-step-playing .result-instruction { font-weight: 600; }
.results:is(.is-replaying, .is-running) .result-step-playing .result-step-number::after { content: ''; position: absolute; inset: 0; border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); border-top-color: var(--ink); border-right-color: var(--ink); border-radius: 50%; animation: status-spin 1.2s linear infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .results:is(.is-replaying, .is-running) .result-step-playing .result-step-number::after { animation: none; border-color: var(--ink); } }
.run-replay { container-type: inline-size; margin-top: 24px; padding-top: 12px; }
.run-replay-current-step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); white-space: nowrap; font-size: .85rem; color: var(--muted); }
.run-replay-current-step > :not(.run-replay-instruction) { flex-shrink: 0; }
.run-replay-instruction { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.run-replay-step-label { color: var(--muted); }
.run-replay-details { text-decoration: none; }
.run-replay-details.passed { color: light-dark(#137353, #69c7a1); }
.run-replay-details.failed { color: light-dark(#b02935, #ff858f); }
.run-replay-browser { overflow: hidden; border: 1px solid var(--control); border-radius: 8px; background: var(--canvas); }
.run-replay-browser-bar { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.run-replay-browser-dots { flex: 0 0 7px; height: 7px; margin-inline-end: 24px; border-radius: 50%; background: light-dark(#98a2b3, #807970); box-shadow: 12px 0 light-dark(#98a2b3, #807970), 24px 0 light-dark(#98a2b3, #807970); }
.run-replay-address { flex: 1; min-width: 0; padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-replay-stage { position: relative; aspect-ratio: 16 / 9; background: var(--canvas); }
.run-replay-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.run-replay-message[aria-busy="true"]::before { content: ''; flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: status-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .run-replay-message[aria-busy="true"]::before, .author-status[data-loading]::before { animation: none; } }
.run-replay-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 24px; text-align: center; color: var(--muted); font-size: .95rem; }
button.run-replay-surface-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.run-replay-surface-play svg { width: 52px; height: 52px; padding: 15px; border-radius: 50%; background: #262626d9; color: white; }
button.run-replay-surface-play:hover:not(:disabled) { background: transparent; }
button.run-replay-surface-play:hover svg { background: var(--blue); }
.run-replay-controls { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.run-replay-controls button { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; }
.run-replay-controls .run-replay-play { background: var(--ink); color: var(--canvas); }
.run-replay-controls .run-replay-play:hover:not(:disabled) { background: #454545; color: white; }
.run-replay-controls .run-replay-restart { background: var(--nav); }
.run-replay-controls .run-replay-restart:hover:not(:disabled) { background: #e3e8f0; }
.run-replay-controls button:disabled, .run-replay input[type=range]:disabled { opacity: .4; cursor: not-allowed; }
.run-replay-controls:has(button:disabled) .run-replay-time { color: var(--muted); }
.run-replay-controls button svg { width: 18px; height: 18px; }
.run-replay-restart svg { fill: none; }
.run-replay-timeline { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 12px 12px 2px; opacity: 0; pointer-events: none; }
.run-replay-stage:hover .run-replay-timeline, .run-replay:focus-within .run-replay-timeline { opacity: 1; pointer-events: auto; }
@media (hover: none), (pointer: coarse) { .run-replay-timeline { opacity: 1; pointer-events: auto; } }
.run-replay-timeline:has(.run-replay-seek:disabled) { visibility: hidden; pointer-events: none; }
.run-replay-rail { position: relative; display: flex; align-items: center; width: 100%; }
input[type=range].run-replay-seek { position: relative; z-index: 1; width: 100%; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; appearance: none; background: transparent; cursor: pointer; }
.run-replay-seek::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.run-replay-seek::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--blue); }
.run-replay-seek::-moz-range-track { height: 6px; background: transparent; }
.run-replay-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--blue); }
.run-replay-chapters { position: absolute; inset-inline: 8px; top: 50%; height: 6px; transform: translateY(-50%); pointer-events: none; }
.run-replay-chapters:empty { border-radius: 3px; background: #8b8e94; }
.run-replay-chapter { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); border-inline-end: 3px solid transparent; background: linear-gradient(to right, var(--blue) var(--chapter-progress, 0%), var(--chapter-track, #8b8e94) 0); background-clip: padding-box; opacity: .8; }
.run-replay-chapter:last-child { border: 0; }
.run-replay-chapter.is-current { --chapter-track: #9ab6ff; height: 6px; opacity: 1; }
.run-replay-seek-hint { position: absolute; bottom: calc(100% - 6px); inset-inline: 12px; width: max-content; max-width: calc(100% - 24px); margin-inline: auto; padding: 6px 10px; border-radius: 5px; background: #171717eb; color: white; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-replay-time { font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mono, pre, code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f8fa; padding: 14px; border-radius: 4px; }
code { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; background: var(--surface); padding: 12px; z-index: 10; }
.skip-link:focus { top: 12px; }
body.login-page { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; }
.login-page main { width: 100%; max-width: 420px; padding: 0; }
.login-page .brand { padding: 0; margin-bottom: 32px; }
.login-page .button { margin-top: 16px; min-height: 44px; }
.login-page .notice { margin-top: 20px; }
button.primary:disabled, button.primary:disabled:hover { color: var(--muted); background: var(--nav); border-color: var(--control); }
button#live-run-button:disabled, button#live-run-button:disabled:hover { opacity: 1; color: white; background: color-mix(in srgb, #1954ed 65%, var(--surface)); border-color: color-mix(in srgb, #1954ed 65%, var(--surface)); }
.editor-readonly, .editor-readonly h2 { color: var(--muted); }
.editor-readonly input[readonly], .editor-readonly textarea { color: var(--muted); }
.editor-readonly input:disabled { color: var(--muted); background: var(--canvas); border-color: var(--control); }
.editor-readonly .milestone [data-step-kind] { color: var(--muted); background-color: var(--canvas); border-color: var(--control); }
.editor-readonly .step-kind-icon { color: var(--muted) !important; }
.editor-readonly .milestone:hover, .editor-readonly .milestone:focus-within { background: var(--surface); }
.editor-readonly button, [aria-disabled="true"] { cursor: not-allowed; }
[aria-disabled="true"] { opacity: .5; }
/* Keep real selects; unsupported browsers retain their system picker. */
@supports (appearance: base-select) and selector(::picker(select)) {
  select, select::picker(select) { appearance: base-select; }
  select { --select-end: 10px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; background-image: none; }
  select > button { all: unset; display: flex; flex: 1; min-width: 0; }
  selectedcontent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  select::picker-icon { content: ''; width: 5px; height: 5px; flex-shrink: 0; border: solid currentColor; border-width: 0 1.25px 1.25px 0; transform: translateY(-1px) rotate(45deg); }
  select::picker(select) { margin-block-start: 6px; padding: 4px; border: 1px solid var(--control); border-radius: 6px; background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px #0002; max-width: min(32rem, calc(100vw - 24px)); }
  .website-period select { padding-inline-end: 0; }
  .website-period select::picker(select) { position-area: block-end span-inline-start; position-try-fallbacks: flip-block; inset: auto; margin: 6px 0 0; }
  select option { min-height: 36px; padding: 8px 10px; border-radius: 3px; color: var(--ink); white-space: normal; cursor: pointer; }
  select option:hover, select option:focus-visible { background: #f0f2f5; }
  select option:checked { background: #f0f2f5; font-weight: 600; }
  select option::checkmark { color: currentColor; }
  [data-schedule-preset] > button { all: unset; display: flex; flex: 1; min-width: 0; }
  .schedule-option-name { display: block; font-weight: 500; }
  .schedule-option-info { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
  [data-schedule-preset] selectedcontent .schedule-option-info { display: none; }
  [data-step-kind] option[value="action"] { color: #1749b1; }
  [data-step-kind] option[value="check"] { color: #106b54; }
}
@media (max-width: 1250px) {
  .website-test-layout .test-table { min-width: 540px; }
}
@media (max-width: 1100px) {
  .test-edit-page .test-editor-layout, .website-settings-layout { grid-template-columns: minmax(0, 1fr); }
  .website-settings-sidebar { grid-column: 1; }
  .website-settings-form { grid-column: 1; grid-row: 2; }
}
@media (max-width: 993px) {
  .website-test-layout { grid-template-columns: minmax(0, 1fr); }
  .website-test-layout .website-health-panel { position: static; max-block-size: none; overflow: visible; }
}
@media (max-width: 1100px) { main { padding: 32px; } .test-heading { align-items: start; flex-wrap: wrap; } }
@media (max-width: 680px) {
  .website-settings-form { padding: 16px; }
  .website-settings-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .website-settings-row > :is(label, h2), .website-settings-row > :is(label, h2):has(.website-settings-required) { padding-top: 0; }
  body { display: block; }
  .site-header { position: static; height: auto; display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(48px, auto); align-items: center; gap: 8px; padding: 12px 16px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; margin: 0; font-size: 18px; }
  .mobile-menu-toggle { display: inline-flex; min-height: 44px; }
  .website-navigation { grid-column: 1 / -1; margin: 0; max-height: 280px; }
  .account { grid-column: 1 / -1; padding-top: 8px; }
  .scheduler-warning { grid-column: 1 / -1; margin-top: 0; }
  .toast { inset-inline-end: 16px; bottom: 16px; }
  main { padding: 24px 16px 40px; }
  .test-table, .website-table, .website-test-layout .test-table { min-width: 0; table-layout: fixed; }
  .test-table :is(th, td):nth-child(n + 3), .website-table :is(th, td):nth-child(n + 3), .website-health-panel { display: none; }
  .test-table th:nth-child(2) { width: 112px; }
  .test-table :is(th, td):nth-child(2) { padding-inline: 16px; }
  .website-table th:nth-child(2) { width: 172px; }
  .website-table :is(th, td):nth-child(2) { padding-inline-start: 16px; }
  .test-table td:first-child a { overflow-wrap: anywhere; }
  .website-table .website-domain { min-width: 0; }
  .run-replay-current-step .run-replay-details { display: none; }
  .page-heading > .actions :is(button, .button) { min-height: 36px; }
  .settings-button { width: 36px; min-height: 36px; padding: 0; }
  .settings-button-label { display: none; }
  .website-heading > .actions { width: 100%; margin-inline-start: 0; justify-content: start; gap: 8px; }
  .website-heading .actions form { order: 1; }
  .website-heading .actions .add-test-button { order: 2; color: var(--ink); background: var(--surface); border-color: var(--control); }
  .website-heading .actions .settings-button { order: 3; }
  .website-heading .actions form button { color: white; background: #1954ed; border-color: #1954ed; }
  .website-heading .actions form button:hover:not(:disabled) { background: #082caf; }
  .run-page .test-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 8px; }
  .run-page .run-heading-identity { grid-column: 1 / -1; }
  .run-page .test-heading .run-controls { width: auto; flex-wrap: nowrap; gap: 8px; }
  .run-page .run-controls form { order: 1; }
  .run-page .run-controls .settings-button { order: 2; }
  .mobile-run-outcome { display: flex; align-self: center; align-items: center; flex-wrap: wrap; gap: 8px; }
  h1 { font-size: 21px; }
  .page-heading { gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
  .milestone { align-items: start; padding-block: 12px; }
  .milestone-content { display: contents; }
  .milestone .drag-handle, .milestone .remove-milestone { grid-row: 1; }
  .step-kind-row { grid-column: 2; grid-row: 1; }
  .milestone textarea[data-step-text] { grid-column: 1 / -1; grid-row: 2; padding-inline: 8px; }
  .drag-ghost { flex-direction: column; align-items: start; justify-content: center; gap: 4px; padding-inline: 40px; }
  .drag-ghost p { max-width: 100%; }
  .step-kind-row select { font-size: 16px; min-height: 40px; }
  .test-heading .actions { width: 100%; gap: 8px; }
  input:not([type=checkbox]):not([type=hidden]), textarea, select { font-size: 16px; }
  .test-composer textarea { min-height: 144px; }
  .result-step { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 14px 10px; scroll-margin-block-start: 24px; }
  .result-step-heading { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-columns: subgrid; }
  .result-instruction { grid-column: 1 / -1; grid-row: 2; }
  .result-step-heading > .status { grid-column: 3; grid-row: 1; }
  .result-step-details { grid-column: 1 / -1; }
}
@media (max-width: 680px) and (scripting: enabled) {
  .mobile-menu-toggle[aria-expanded="false"] + .sidebar-menu { display: none; }
}
@media (pointer: coarse) { .agent-brief-input { padding-inline-end: 56px; min-height: 56px; } .result-section-heading { min-height: 48px; } .webhook-input input[readonly] { min-height: 52px; padding-inline-end: 60px; } button.webhook-copy, button.webhook-rotate { width: 48px; min-height: 48px; } .website-metric-heading { padding-inline-end: 44px; } button.website-health-info { width: 44px; min-height: 44px; } .schedule-summary:has(> [data-schedule-edit]:not([hidden])) [data-schedule-details] { padding-inline-end: 52px; } button, button.delete-link, .button, select, .quiet-link, .site-header nav a, .account-trigger { min-height: 48px; } .milestone { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 4px; } button.icon-button { width: 48px; min-height: 48px; } .step-kind-row select, .milestone textarea[data-step-text], select option { min-height: 48px; } .milestone textarea[data-step-text] { padding-block: max(4px, calc((48px - 1lh) / 2)); } }