/* Use common system fonts instead of Roboto for a more natural look */

/* OVH: the frame must never scroll. The document is exactly one viewport tall,
   laid out as a column whose flexible child is the gauge app and whose fixed
   footer is the credits, so there is nothing to overflow. Upstream left the
   credits *after* a 100vh app, making the page 100vh + credits tall; because
   the stylesheet also hides scrollbars, that overflow was invisible but a
   wheel over the gauge (or an elastic scroll on macOS) shifted the whole UI
   and revealed blank space above the dial. */
html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

::-webkit-scrollbar {
  display: none;
}
html {
  -ms-overflow-style: none; 
  scrollbar-width: none;
}
 
.Credits {
/* OVH: was rgb(125 119 119) -> 4.40:1 on white, under the 4.5:1 AA floor. */
color: #787272;
text-align: center;
/* OVH: 14px -> 11px, so the attribution line reads a touch smaller without
   losing legibility. Re-apply on OpenSpeedTest upgrade. */
font-size:11px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
/* OVH: flex child so it keeps its own height and the app fills the rest. */
flex: 0 0 auto;
padding: 4px 12px 6px;
} 
.Credits a {
  text-decoration: none;
  color: rgb(113, 113, 113);
}
.Credits a:hover {
color: #0050d7;
}

.ConnectError {
  display: none;

}

.openSpeedtestApp {
 
  /* OVH: was 100vh — the full iframe — with the .Credits block laid out *below*
     it, so the document was always ~35px taller than the frame and scrolled
     internally. Worse, this stylesheet hides scrollbars, so the overflow was
     invisible. Now the flex column above reserves the credits' own height and
     this element takes the rest (height: auto + flex-grow), so the SVG fills
     the available box exactly and the whole frame stays 100vh. */
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
  display: none;
  overflow: hidden;
}
.main-Gaugebg {
  fill: none;
  stroke: rgb(231, 231, 232);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
}
.main-GaugeBlue {
  fill: none;
  stroke: url(#gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke-opacity: 0;
}
.main-GaugeWhite {
  fill: none;
  stroke: rgb(255, 255, 255);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 15px;
  stroke-dasharray: 0, 681;
  stroke-dashoffset: 1;
  stroke-opacity: 0;
}
.oDo-Meter {
  font-size: 16.633283615112305px;
  fill: gray;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
}
.oDoLive-Speed {
  font-size: 28px;
  fill: #201e1e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
}

.oDoLive-Status {
  font-size: 10px;
  fill: #d2d1d2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.uiBg {
  fill: #d2d1d2;
}
.progressbg {
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.Cards {
  fill: #f2f2f2;
}
.Symbol {
  fill: url(#gradient);
}
.rtext {
  font-size: 12px;
  fill: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
}
.rtextnum {
  font-size: 23px;
  fill: #201e1e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.rtextmbms {
  font-size: 12px;
  fill: #5f5f5f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.jitter-Mob {
  font-size: 9px;
  fill: #5f5f5f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.startButton {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: visible;
}
.buttonTxt {
  font-size: 40px;
  fill: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
}

.intro-Progress {
  stroke: #0050d7;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.progressElmstart {
  stroke: #0050d7;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  display: block;
}
.Startsettings {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: visible;
  opacity: 0.1;
  transition: opacity 1s ease-in-out;
}
.Startsettings:hover {
  opacity: 1;
}

.progressbg {
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.deskStart {
  fill: none;
  stroke: rgb(231, 231, 232);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke: url(#gradient);
}
#UI-Desk {
  display: none;
}
#UI-Mob {
  display: none;
}
.oDoTop-Speed {
  font-size: 16.96px;
  fill: gray;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: end;
}
#upSymbolDesk {
  fill: #000e9c;
  display: none;
}
#downSymbolDesk {
  fill: #000e9c;
  display: none;
}
#upSymbolMob {
  fill: #000e9c;
  display: none;
}
#downSymbolMob {
  fill: #000e9c;
  display: none;
}

#ipMob {
  font-size: 15px;
  fill: #201e1e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}
#ipDesk {
  font-size: 15px;
  fill: #201e1e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}

.spinner {
  position: absolute;
  z-index: 999;
  top: 50vh;
  left: 50vw;
  text-align: center;
}

.spinner > div {
  width: 20px;
  height: 20px;
  background-color: #000e9c;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.darkmode {
  margin-bottom: -15px;
  fill: #75757a99;
  padding-top: 16px;
  display: none;
  cursor: pointer;
  margin-right: 30px;
}
#daymode {
  margin-right: 40px;
}
.darkmode:hover {
  fill: #000000;
}

/* The nested SVG viewports fill their parent (the flexed .openSpeedtestApp)
   rather than the viewport. With 100vh they were sized to the *frame*, one
   viewport taller than the box the credits had left, and the SVG then scaled
   to that bigger box — the dial was pushed down and the extra height became
   the top blank the wheel could reveal. Height 100% ties the scale to the box
   it actually occupies. */
.Mobile,
.Desktop {
  visibility: hidden;
  width: 100%;
  height: 100%;
}

@media only screen and (orientation: landscape) {
  .Mobile {
    visibility: hidden;
  }
  .Desktop {
    visibility: visible;
  }
}

@media only screen and (orientation: portrait) {
  .spinner {
    top: 42vh;
    left: 42vw;
  }
  .Mobile {
    visibility: visible;
  }
  .Desktop {
    visibility: hidden;
  }
}
@media only screen and (max-width: 300px) {
  .Credits{
    display: none;
  }
}

/* OVH: the text that replaces the logo, and the gauge gradients, carry the
   brand colours in the light skin. darkmode.css lifts them for the dark
   ground — same split as .Credits. */
.ostStartHint {
  fill: #000e9c;
}

/* OVH: the ping icon (ODS 'refresh') used to carry an inline fill, so the light
   and dark skins could not differ. Brand value here; darkmode.css lifts it. */
.pingIc {
  fill: #000e9c;
}

/* OVH: the OVHcloud wordmark shown under the "Ready" hint. Brand navy on the
   light ground, the lifted blue in darkmode.css. */
.ovhLogo {
  fill: #000e9c;
}

/* ============================================================================
   OVH: motion. Upstream only cross-faded whole groups, so a run felt static —
   the gauge moved, but the numbers and cards appeared with no life of their
   own. These are presentation-only (no measurement code is touched) and are
   all dropped under prefers-reduced-motion.
   ========================================================================== */

/* The three result cards rise in one after another when the results are shown.
   #UI-Desk / #UI-Mob go from display:none to block, which restarts CSS
   animations, so every run gets the reveal. The x/y are the upstream
   coordinates in app.svg, used to stagger desktop (by y) and mobile (by x). */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
use.Cards { animation: cardIn 520ms cubic-bezier(.22,.61,.36,1) both; }
use.Cards[y="31"],    use.Cards[x="1"]     { animation-delay: 0ms; }
use.Cards[y="129.3"], use.Cards[x="104.1"] { animation-delay: 90ms; }
use.Cards[y="228.5"], use.Cards[x="207.1"] { animation-delay: 180ms; }

/* A soft glow on the live gauge arc and the run's progress line, so the eye has
   something to follow while the needle sweeps. The arc has stroke-opacity 0 at
   rest, so there is no glow until a run actually starts. */
.main-GaugeBlue {
  filter: drop-shadow(0 0 6px rgba(0, 80, 215, 0.45));
}
.intro-Progress,
.progressElmstart {
  filter: drop-shadow(0 0 4px rgba(0, 80, 215, 0.4));
}

/* Start button hover feedback. A scale transform is NOT used here: on an SVG
   <use> that references a symbol whose content is larger than the use box,
   transform-box: fill-box + transform-origin: center resolves to the wrong
   point, so the button visibly shifts (~25px down/right) on hover and becomes
   hard to click. The drop-shadow glow keeps the affordance without moving it. */
#startButtonDesk, #startButtonMob {
  transition: filter 160ms ease-out;
}
#startButtonDesk:hover, #startButtonMob:hover {
  filter: drop-shadow(0 4px 12px rgba(0, 80, 215, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  use.Cards { animation: none; }
  .main-GaugeBlue, .intro-Progress, .progressElmstart { filter: none; }
  #startButtonDesk, #startButtonMob { transition: none; }
}

/* OVH: "Start new test" button shown once a run finishes. JS pins its centre
   horizontally on the dial and its *top edge* just under the "Finished" label
   (see the labelBox/place note in speedtest.html), so the only transform needed
   here is the horizontal centring — translating on Y as well would have made
   the JS top value mean the button's middle, which is what put the button on
   top of the label. Colours follow the ODS primary button ramp
   (bg primary-500, hover primary-700, active primary-800; radius = theme
   8px), since this is the one solid primary-shaped control on the page. */
.start-new-test {
  position: fixed;
  z-index: 10;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #0050d7;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 80, 215, 0.35);
  transition: background 160ms ease-out, transform 160ms ease-out;
}
.start-new-test:hover {
  background: #000e9c;
  transform: translateX(-50%) scale(1.04);
}
.start-new-test:active {
  background: #00185e;
  transform: translateX(-50%) scale(0.97);
}
.start-new-test[hidden] {
  display: none;
}