/* Suites: search, access and schedule summaries, workflow controls, the member
   and schedule dialogs, and the stacked builder on narrow screens. Loaded last. */

.suite-access { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.suite-access span:empty { display: none; }

/* The suite's name shares its row with the buttons, which move below it when they do not fit beside a readable
   name. The file, attribution, members and schedule take a row of their own, so they never squeeze into a narrow
   column beside the buttons, one word per line, and push the panes down. */
#suite-workspace .toolbar { flex-wrap: wrap; row-gap: 6px; }
#suite-workspace .toolbar-title { flex: 1 1 240px; }
.suite-meta { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; padding-left: 3px; }
.suite-meta .file-name { padding-left: 0; }
/* While a run goes on, Stop takes the place of Run all (which could not be used anyway), so starting a run does
   not push the buttons onto another row and the panes down. */
#suite-workspace .toolbar-actions:has(#suite-btn-stop:not([hidden])) #suite-btn-run { display: none; }

#suites-panel .library-tools { margin-bottom: 16px; }

/* The settings fold into one line that says what they are, and Add a test sits in the pane's heading, so the
   list of tests gets the room. The list keeps space for a few tests even when the settings are open. */
#suite-tests-pane > .pane-head { flex-wrap: wrap; }
#suite-tests-pane > .pane-head .suite-add-select { margin: 0; flex: 1 1 140px; max-width: 240px; }
.suite-settings { flex: none; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.suite-settings:not([open]) { padding-bottom: 0; }
.suite-settings > summary { padding: 9px 16px; font-size: 12px; line-height: 1.5; cursor: pointer; }
.suite-settings[open] > summary { padding-bottom: 0; }
.suite-settings > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.suite-settings-title { font-weight: 600; color: var(--text); margin-right: 4px; }
.suite-settings-summary { color: var(--muted); }
.suite-settings[open] .suite-settings-summary { display: none; }
#suite-tests { container: suite-tests / inline-size; min-height: 200px; padding: 10px 12px 12px; }
#suite-tests-pane { overflow-y: auto; }

/* Each test is one compact card: what follows its pass or failure sits below its name, or beside it once the
   list is wide enough, so a long suite shows many tests at once. */
.suite-test-row { flex-wrap: wrap; row-gap: 6px; padding: 7px 10px; margin-bottom: 6px; }
.suite-test-row > .step-tools { order: 2; }
.suite-test-row .suite-branches { order: 3; flex: 1 1 100%; gap: 6px 10px; padding: 0; }
.suite-test-row .suite-branches label { display: flex; align-items: center; gap: 6px; flex: 1 1 130px; font-size: 11px; white-space: nowrap; }
.suite-test-row .suite-branches select { flex: 1 1 0; width: auto; min-width: 0; min-height: 32px; padding: 4px; font-size: 12px; }
@container suite-tests (min-width: 680px) {
  .suite-test-row .suite-branches { order: 1; flex: 0 1 340px; }
}

/* A test's parameter values, last on its card: what the suite gives each parameter, its default, or that one is
   needed. The run's results name them under the test, as typed, so not in the heading's capitals. */
.suite-test-row .suite-test-params { order: 4; flex: 1 1 100%; display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; font-size: 11px; color: var(--muted); }
.suite-test-params-values { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite-test-params-values strong { font-weight: 600; color: var(--text); }
.suite-test-params.missing .suite-test-params-values { color: var(--fail-ink); }
.suite-test-params .btn-link { flex: none; padding: 0; font-size: 12px; }
.run-step-params { display: block; margin-top: 2px; font-weight: 400; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.suite-param-table .suite-param-name { display: block; font-weight: 400; color: var(--muted); }
.suite-param-table .suite-param-test { font-weight: 500; min-width: 140px; max-width: 240px; overflow-wrap: anywhere; }
.suite-param-table .suite-param-none { color: var(--muted); text-align: center; }

/* Tests with the same name can come from different projects, so each row says where it lives. */
.suite-test-name { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.suite-test-title, .suite-test-origin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite-test-origin { font-size: 11px; color: var(--muted); }

/* A long option label must not push the session picker past a narrow pane. */
.suite-session select, .suite-add-select { box-sizing: border-box; max-width: calc(100% - 32px); min-width: 0; }
.suite-session select { max-width: 100%; }

/* A suite row's schedule line can be long (next run, last scheduled run), so it wraps instead of being cut off. */
#suite-list .test-item .sub { white-space: normal; overflow-wrap: anywhere; }

/* A run the schedule started is labelled in history and in the run header. */
.run-origin { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; line-height: 18px; color: var(--muted); white-space: nowrap; }
/* Results of steps a later save changed. */
.run-origin.run-earlier { border-color: var(--warn-ink); color: var(--text); }
/* How the steps a stopped run ran went. */
.run-origin.ran-passed { border-color: var(--pass); color: var(--text); }
.run-origin.ran-failed { border-color: var(--fail); color: var(--text); }

.suite-continue-hint { display: block; margin: 4px 16px 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
.suite-continue-hint:empty { display: none; }

/* Branch choices use the editor's input styling and a comfortable touch target. */
.suite-branches label { flex: 1 1 140px; min-width: 0; color: var(--muted); }
.suite-branches select { box-sizing: border-box; width: 100%; min-height: 36px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.suite-branches select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.suite-branches select:disabled { background: var(--bg); color: var(--muted); }

.project-form .suite-members input[type=radio] { width: auto; margin: 0; padding: 0; border: 0; }
.project-form .suite-members > .checkbox-row { margin: 10px 0; font-size: 13px; }
/* A long member list scrolls on its own, so the dialog's buttons stay in reach. */
.suite-member-list { max-height: min(38dvh, 300px); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 2px 12px; margin: 8px 0; }
.project-form .suite-member-list .checkbox-row { margin: 9px 0; font-size: 13px; }
.suite-member-list .checkbox-row small { margin-left: auto; }
.suite-member-status { font-size: 12px; margin: 6px 0 0; }
.suite-schedule-facts p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
/* The schedule dialog shows only the fields its recurrence uses, so rows appear and go: the
   weekday group is a div rather than a label and needs the same shape as the rows around it. */
.schedule-form .schedule-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; margin: 16px 0; }
.schedule-form .schedule-hint { margin: -10px 0 0; }
.schedule-form .schedule-inline { display: flex; align-items: center; gap: 10px; }
.schedule-form .schedule-inline input { flex: 1 1 auto; }
.schedule-form .schedule-unit { font-size: 13px; white-space: nowrap; }
.schedule-form .weekday-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.schedule-form .weekday-row .checkbox-row { margin: 0; }
.schedule-preview { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 12px 14px; margin: 16px 0; }
.schedule-preview p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.schedule-preview p:last-child { margin-bottom: 0; }
.schedule-preview-summary { font-weight: 600; }
.schedule-preview-runs { margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.project-form .danger-text { color: var(--fail-ink); }

/* Below the split breakpoint the panes stack. A single minmax(0, 1fr) row, and
   a grid held to the window's height, squeezed the builder shorter than its
   content and drew the Run panel over it. Stacked, the grid and each pane take
   the height their content needs and the workspace scrolls instead. */
@media (max-width: 1150px) {
  #suite-workspace .panes { flex: none; min-height: auto; grid-template-rows: none; grid-auto-rows: auto; align-items: start; }
  /* Stacked, a pane is as tall as what it shows: a Run pane that only says "No run yet" is not held open.
     A long list of tests, or of a run's steps, scrolls inside its pane, so the Run pane stays within reach. */
  #suite-workspace .panes > .pane { overflow: visible; min-height: 0; }
  #suite-tests { max-height: min(70dvh, 760px); }
  #suite-workspace .run-steps { max-height: min(60dvh, 560px); }
}
/* A run whose step failed for good and waits in its browser for a retry (src/runHold.ts). */
.run-held-box { flex-basis: 100%; display: block; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--warn); border-left-width: 4px; border-radius: 6px; background: var(--warn-soft); font-size: 13px; line-height: 1.45; color: var(--text); }
.run-held-box .run-held-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.run-origin.run-fixed { border-color: var(--pass); color: var(--text); white-space: normal; }
/* A batch of runs: tests side by side, or a suite several times (run-batches.js). */
.batch-view { min-width: min(560px, 90vw); }
.batch-summary { margin: 0 0 8px; font-weight: 600; }
.batch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.batch-table th, .batch-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.batch-table .batch-error { display: block; overflow-wrap: anywhere; }
.batch-table .batch-links { white-space: nowrap; }
.batch-table .batch-links > * + * { margin-left: 12px; }
.batch-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.batch-actions .batch-watch-all { color: var(--ink); text-decoration: none; }
/* The suite's other ways to run open from its Run pane's heading, so the toolbar keeps one row. */
#suite-workspace .suite-run-more { margin-left: auto; }

/* Larger screen: a suite's run on the whole window. The sidebar, the header and the suite's tests step aside, and the
   run's screen fills the room beside its step list (Lovish). */
#suite-workspace .suite-run-larger { margin-left: auto; white-space: nowrap; }
#suite-workspace .suite-run-larger + .suite-run-more { margin-left: 0; }
#app-shell.suite-run-large .app { grid-template-columns: minmax(0, 1fr); }
#app-shell.suite-run-large .sidebar, #app-shell.suite-run-large .app-header, #app-shell.suite-run-large #nav-backdrop { display: none; }
#suite-workspace.suite-run-large .panes, #suite-workspace.suite-run-large .panes[data-split-pane] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#suite-workspace.suite-run-large .panes > .pane:not(.pane-run), #suite-workspace.suite-run-large .panes[data-split-pane] > .split-pane-handle { display: none; }
#suite-workspace.suite-run-large .pane-run .run-split { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
#suite-workspace.suite-run-large .pane-run .viewer img { display: block; width: 100%; max-width: none; height: auto; object-fit: contain; }