/* ------------------------------------------------------------------
   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: 6px;
  background: var(--lfr-panel);
  border: 1px solid var(--lfr-line);
  border-radius: var(--lfr-radius);
  box-shadow: var(--lfr-shadow);
  padding: 46px 22px 42px;
}
.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: 6.4rem; 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;
  font-size: .68rem !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: .68rem !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .06em;
  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; }