/* ------------------------------------------------------------------
   Load-test running view (loader interstitial) — scoped restyle.
   Everything is namespaced under .lf-run so it cannot affect other
   pages. JS hooks (.clients/.duration/.rampup/.rampupsteps, #countdown,
   #seconds, #content, .start-message, .stopTest, .editnewpage,
   .location-table-configuration) are preserved and only restyled.
   Theme: dark is the backend default (classless); html.light overrides.
------------------------------------------------------------------ */

.lf-run {
  /* dark defaults (backend default theme) */
  --lfr-accent: #8b82ff;
  --lfr-accent-weak: #211f3a;
  --lfr-panel: #171922;
  --lfr-panel-2: #1e202c;
  --lfr-line: #272a38;
  --lfr-line-strong: #333748;
  --lfr-text: #e8eaf3;
  --lfr-text-2: #a2a7bd;
  --lfr-text-3: #6d7288;
  --lfr-ok: #3ec27e;
  --lfr-danger: #f0716b;
  --lfr-danger-weak: #2c1917;
  --lfr-track: #262a38;
  --lfr-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  --lfr-radius: 12px;
  --lfr-radius-sm: 8px;

  /* The loader sits inside .loadingPageInitial (display:flex; align-items:center),
     which shrinks a width-less child to its content. width:100% makes it reach the
     max-width instead of collapsing to a narrow island on wide screens. */
  width: 100%;
  max-width: 1060px;
  margin: 8px auto 40px;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

html.light .lf-run,
:root.light .lf-run {
  --lfr-accent: #5a4ff0;
  --lfr-accent-weak: #ece9fe;
  --lfr-panel: #ffffff;
  --lfr-panel-2: #f1f2f8;
  --lfr-line: #e4e6ef;
  --lfr-line-strong: #d3d6e4;
  --lfr-text: #14161f;
  --lfr-text-2: #565b70;
  --lfr-text-3: #878ca3;
  --lfr-ok: #1f9d63;
  --lfr-danger: #d94a45;
  --lfr-danger-weak: #fbe9e8;
  --lfr-track: #e9eaf2;
  --lfr-shadow: 0 1px 2px rgba(20,22,31,.04), 0 6px 20px rgba(20,22,31,.05);
}

.lf-run * { box-sizing: border-box; }

/* ---- header: name + live status + actions ---- */
.lf-run__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.lf-run__name {
  margin: 0 0 8px !important;
  font-size: 1.45rem !important;
  font-weight: 640 !important;
  letter-spacing: -0.01em;
  color: var(--lfr-text) !important;
  line-height: 1.25 !important;
}
.lf-run__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.lf-run__status .start-message {
  margin: 0 !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--lfr-accent) !important;
  letter-spacing: 0 !important;
}
.lf-run__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lfr-accent);
  position: relative; flex: 0 0 auto;
}
.lf-run__pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: var(--lfr-accent); opacity: .3;
  animation: lfr-ping 1.7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes lfr-ping { 0%{transform:scale(.5);opacity:.5} 70%,100%{transform:scale(2.3);opacity:0} }

.lf-run__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lf-run__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; font-weight: 560; line-height: 1;
  padding: 9px 13px; margin: 0 !important;
  border-radius: var(--lfr-radius-sm);
  border: 1px solid var(--lfr-line-strong);
  background: var(--lfr-panel);
  color: var(--lfr-text) !important;
  cursor: pointer; text-decoration: none !important;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lf-run__btn:hover { background: var(--lfr-panel-2); border-color: var(--lfr-text-3); color: var(--lfr-text) !important; }
.lf-run__btn:focus-visible { outline: 2px solid var(--lfr-accent); outline-offset: 2px; }
.lf-run__btn i { font-size: .82rem; }
.lf-run__btn--stop { color: var(--lfr-danger) !important; border-color: color-mix(in oklab, var(--lfr-danger) 42%, var(--lfr-line-strong)); }
.lf-run__btn--stop:hover { background: var(--lfr-danger-weak); border-color: var(--lfr-danger); color: var(--lfr-danger) !important; }

/* ---- stage: cube + countdown ---- */
.lf-run__stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  background: var(--lfr-panel);
  border: 1px solid var(--lfr-line);
  border-radius: var(--lfr-radius);
  box-shadow: var(--lfr-shadow);
  /* was 46/42 around a 6.4rem number: a 235px card that was mostly empty space */
  padding: 26px 22px 24px;
}
.lf-run__stage .countdown { width: 100%; }
.lf-run__stage .container-loading,
.lf-run__stage #logo-loading,
.lf-run__stage .spinner { display: none !important; }
.lf-run .countdown { text-align: center; }
.lf-run .countdown .container { padding: 0; margin: 0; max-width: none; }
.lf-run #countdown { margin: 6px 0 0; }
.lf-run #countdown ul { list-style: none; margin: 0; padding: 0; }
.lf-run #countdown li {
  display: inline-flex; flex-direction: column; align-items: center;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--lfr-text-3) !important;
  /* kill the global `.countdown li { padding: 1em }` that inflates the card */
  padding: 0 !important;
}
.lf-run #countdown #seconds {
  font-size: 4.2rem; font-weight: 760; line-height: .9;
  letter-spacing: -0.04em; color: var(--lfr-text) !important;
  -webkit-text-fill-color: var(--lfr-text) !important;
  /* the global `.countdown li span { padding-bottom: 2rem }` jams a 32px gap
     between the number and the SECONDS label — zero it so the number reads big. */
  padding-bottom: 0 !important;
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.lf-run .message-countdown { margin-top: 8px; }
.lf-run .message-countdown #content .emoji,
.lf-run .message-countdown #content {
  font-size: .84rem !important; color: var(--lfr-text-2) !important; font-weight: 500;
}

/* ---- config tiles ---- */
.lf-run__config {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 14px;
}
.lf-run__tile {
  background: var(--lfr-panel);
  border: 1px solid var(--lfr-line);
  border-radius: var(--lfr-radius);
  box-shadow: var(--lfr-shadow);
  padding: 14px 15px 15px;
}
.lf-run__tile h4 {
  margin: 0 0 6px !important;
  /* .68rem = 10.9px was below comfortable reading for an uppercase, letter-spaced label */
  font-size: .75rem !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lfr-text-3) !important;
}
.lf-run__tile .article-sm,
.lf-run__tile .clients,
.lf-run__tile .duration,
.lf-run__tile .rampup,
.lf-run__tile .rampupsteps {
  font-size: 2rem !important; font-weight: 660 !important;
  letter-spacing: -0.02em; line-height: 1.15 !important;
  color: var(--lfr-text) !important;
  /* .dark-st is gradient-clip text (-webkit-text-fill-color: transparent); override
     the fill or the value renders invisible. */
  -webkit-text-fill-color: var(--lfr-text) !important;
  background: none !important; margin: 0 !important; padding: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* ---- locations table ---- */
.lf-run__locations { margin-top: 12px; }
.lf-run .locations-container {
  background: var(--lfr-panel);
  border: 1px solid var(--lfr-line);
  border-radius: var(--lfr-radius);
  box-shadow: var(--lfr-shadow);
  overflow: hidden;
}
.lf-run .table-locations {
  width: 100%; border-collapse: collapse; margin: 0;
}
.lf-run .table-locations th {
  text-align: left; font-size: .72rem !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .06em;
  /* all three headers wrapped to two lines at .68rem + letter-spacing */
  white-space: nowrap;
  color: var(--lfr-text-3) !important;
  padding: 12px 16px; border-bottom: 1px solid var(--lfr-line);
  background: var(--lfr-panel-2);
}
.lf-run .table-locations th:not(:first-child),
.lf-run .table-locations td:not(:first-child) { text-align: right; }
.lf-run .table-locations td {
  padding: 12px 16px; font-size: .9rem !important; font-weight: 500;
  color: var(--lfr-text) !important;
  border-bottom: 1px solid var(--lfr-line);
}
.lf-run .table-locations tbody tr:last-child td { border-bottom: none; }

.lf-run__foot {
  margin-top: 16px; text-align: center;
  font-size: .8rem; color: var(--lfr-text-3) !important;
}

/* ---- responsive ---- */
.lf-run, .lf-run__head, .lf-run__ident, .lf-run__actions, .lf-run__config, .lf-run__tile { min-width: 0; }
.lf-run__name { overflow-wrap: anywhere; }
.lf-run__locations { overflow-x: auto; }
.lf-run .table-locations { min-width: 320px; }

@media (max-width: 760px) {
  .lf-run__config { grid-template-columns: repeat(2, 1fr); }
  .lf-run__head { flex-direction: column; align-items: stretch; }
  .lf-run__actions { flex-wrap: wrap; }
  .lf-run__actions .lf-run__btn { flex: 1 1 130px; justify-content: center; }
}
@media (max-width: 440px) {
  .lf-run { padding: 0 12px; }
  .lf-run__name { font-size: 1.08rem !important; }
  .lf-run__stage { padding: 32px 16px 28px; }
  .lf-run #countdown #seconds { font-size: 3.6rem; }
  .lf-run__actions .lf-run__btn { flex: 1 1 100%; }
  .lf-run__tile .article-sm,
  .lf-run__tile .clients,
  .lf-run__tile .duration,
  .lf-run__tile .rampup,
  .lf-run__tile .rampupsteps { font-size: 1.3rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-run__pulse::after { animation: none; }
}

/* ------------------------------------------------------------------
   Hardening against the aggressive backend global stylesheet.
   The loader shows on the shared result page (style.css catch-alls,
   global button{} margin, and the light-theme a:hover -> #000 rule).
   Out-specify the load-bearing surfaces + anchor-button colors so the
   scoped design survives. Selectors carry .lf-run twice-over where a
   documented global rule (e.g. :root.light a:hover, spec 0,3,1) would
   otherwise win.
------------------------------------------------------------------ */
.lf-run .lf-run__stage,
.lf-run .lf-run__tile,
.lf-run .locations-container {
  background: var(--lfr-panel) !important;
  border: 1px solid var(--lfr-line) !important;
}
.lf-run .lf-run__btn {
  background: var(--lfr-panel) !important;
  border: 1px solid var(--lfr-line-strong) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.lf-run .lf-run__btn--stop { border-color: var(--lfr-danger) !important; }

/* anchor-button color must beat :root.light a / a:hover (0,3,1) */
html.light .lf-run .lf-run__btn,
:root.light .lf-run .lf-run__btn,
html.light .lf-run a.lf-run__btn:hover,
:root.light .lf-run a.lf-run__btn:hover { color: var(--lfr-text) !important; }
html.light .lf-run .lf-run__btn--stop,
:root.light .lf-run .lf-run__btn--stop,
html.light .lf-run a.lf-run__btn--stop:hover,
:root.light .lf-run a.lf-run__btn--stop:hover { color: var(--lfr-danger) !important; }

/* Column widths: the numeric columns were 303px and 266px wide and sat in the middle of a
   1058px table, leaving the right third empty while the headers wrapped. Give the location
   the remaining space and pin the two numbers to the right, right-aligned and tabular. */
.lf-run .table-locations th:nth-child(1),
.lf-run .table-locations td:nth-child(1) { width: auto; }
.lf-run .table-locations th:nth-child(2),
.lf-run .table-locations td:nth-child(2),
.lf-run .table-locations th:nth-child(3),
.lf-run .table-locations td:nth-child(3) {
  width: 140px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* style.css caps `.location-table-configuration table` at 600px, so the locations table filled
   600 of the card's 960px and its header rule stopped two thirds of the way across. */
.lf-run .location-table-configuration table.table-locations { max-width: none; }

/* ---- start-up progress (startupProgress.js): elapsed time + the run's real stage ---- */
.lf-run__startup { width: 100%; display: flex; flex-direction: column; align-items: center; }
.lf-run__elapsed { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lf-run .lf-run__startup .lf-run__clock {
  font-size: 3.4rem; font-weight: 760; line-height: .95; letter-spacing: -0.04em;
  color: var(--lfr-text) !important; font-variant-numeric: tabular-nums;
}
.lf-run .lf-run__startup .lf-run__clock-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  color: var(--lfr-text-2) !important;
}
.lf-run .lf-run__steps {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 100%; max-width: 720px;
}
.lf-run .lf-run__step {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 0 10px; margin: 0; text-align: center; list-style: none;
}
/* the connector into each step, drawn from the previous dot's centre */
.lf-run__step::before {
  content: ""; position: absolute; top: 6px; height: 2px; border-radius: 2px;
  left: calc(-50% + 12px); right: calc(50% + 12px);
  background: var(--lfr-track);
}
.lf-run__step:first-child::before { display: none; }
.lf-run__step.is-done::before,
.lf-run__step.is-current::before { background: var(--lfr-accent); }
.lf-run__step-dot {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--lfr-line-strong); background: var(--lfr-panel);
}
.lf-run__step.is-done .lf-run__step-dot { border-color: var(--lfr-accent); background: var(--lfr-accent); }
/* a check in finished steps, so done and current differ in a still frame too */
.lf-run__step.is-done .lf-run__step-dot::after {
  content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 7px;
  border: solid var(--lfr-panel); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lf-run__step.is-current .lf-run__step-dot { border-color: var(--lfr-accent); background: var(--lfr-accent); }
.lf-run__step.is-current .lf-run__step-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--lfr-accent); opacity: .3;
  animation: lfr-ping 1.7s cubic-bezier(0.16,1,0.3,1) infinite;
}
/* .lf-run + two classes: `:root.light span, p, div { color: #333 !important }` is (0,2,1) */
.lf-run .lf-run__step .lf-run__step-text {
  font-size: .86rem; font-weight: 560; line-height: 1.35;
  /* text-2, not text-3: text-3 is 3.7:1 (dark) / 3.3:1 (light) on the panel, below AA */
  color: var(--lfr-text-2) !important;
}
.lf-run .lf-run__step.is-current .lf-run__step-text { color: var(--lfr-text) !important; }
.lf-run .lf-run__startup .lf-run__detail {
  margin: 20px 0 0 !important; padding: 0 !important; text-align: center;
  font-size: .86rem !important; font-weight: 500; line-height: 1.45;
  color: var(--lfr-text-2) !important;
}
@media (max-width: 560px) {
  .lf-run .lf-run__startup .lf-run__clock { font-size: 2.8rem; }
  .lf-run .lf-run__steps { grid-template-columns: 1fr; gap: 14px; max-width: 300px; }
  .lf-run .lf-run__step { flex-direction: row; text-align: left; padding: 0; }
  .lf-run__step::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-run__step.is-current .lf-run__step-dot::after { animation: none; }
}