/* Adopted 2ip hosted widget geometry. Speedtest owns colors, page width and engine. */
.st-information{
  display:grid;
  gap:var(--st-information-gap,8px);
  margin:0;
  font:16px/22px "2ip",sans-serif}
.st-information>div{
  display:grid;
  grid-template-columns:minmax(0,38%) minmax(0,1fr);
  align-items:center;
  min-height:var(--st-information-height);
  padding:var(--st-information-padding-block,3px) 12px;
  border:var(--st-information-border-width) solid var(--st-information-border-color);
  border-radius:var(--st-information-radius);
  background:var(--twoip-surface)}
.st-information dt{
  color:var(--twoip-on-surface-variant);
  font-weight:600;
  border-inline-end:var(--st-information-border-width) solid var(--st-information-border-color);
  padding-inline-end:12px;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis}
.st-information dd{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding-inline-start:12px;
  color:var(--twoip-on-surface)}
.st-information dd>span{
  min-width:0;
  overflow-wrap:anywhere}
.st-information .st-field-icon{
  flex:0 0 20px;
  width:20px;
  height:20px;
  display:block;
  align-self:center;
  fill:currentColor;
  color:var(--st-icon-color)}
.st-information .fa-left-right,
.twoip-gauge-rim .twoip-speedometer-stage[data-stage=PING]>.twoip-icon{color:var(--st-icon-color)}
.st-information output{font-variant-numeric:tabular-nums}
.st-information [data-full-value]:focus-visible,.twoip-speedtest-measure-name[data-full-value]:focus-visible{
  outline:2px solid var(--twoip-primary);
  outline-offset:2px}
/* Explicit summaries replace nested, wrapping Bootstrap percentage columns. */
#speedtest .st-metric-summary {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;min-height:var(--st-summary-height,69px);padding-block:var(--st-summary-padding,8px)}
#speedtest .measure-header {display:flex;align-items:center;gap:8px;min-width:0}
#speedtest .measure-header>div {min-width:0}
#speedtest .measure-header>.twoip-icon {flex:0 0 var(--st-measure-icon-size);width:var(--st-measure-icon-size);font-size:var(--st-measure-icon-size);color:var(--st-icon-color)}
#speedtest .twoip-speedtest-measure-name {font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#speedtest .twoip-speedtest-measure-unit {font-size:16px}
#speedtest .result-area .additionalres {display:flex;grid-column:1/-1;justify-content:flex-end;gap:16px;font-size:14px;white-space:nowrap;color:var(--twoip-on-surface)}
@container(min-width:480px) {
 #speedtest .st-metric-summary {grid-template-columns:minmax(0,1fr) auto minmax(90px,auto)}
 #speedtest .result-area .additionalres {grid-column:auto;display:block;border-inline-start:1px solid var(--twoip-outline);padding-inline-start:12px}
}

#speedtest .result-area .data,#speedtest .result-area .additionalres_data{font-variant-numeric:tabular-nums}
#speedtest .result-area .data .speed_fix{display:inline-block;width:100%;text-align:right}

/* Download/Upload retain their four integer and two fractional digit slots. */
#speedtest .twoip-gauge-rim .content .realtime #tool-speed{display:inline-grid;grid-template-columns:2.56em .2em 1.28em auto;align-items:center}
#speedtest .twoip-gauge-rim .content .realtime #tool-speed .twoip-speedometer-integer{width:100%;height:1.3em;text-align:right;line-height:1.3}
#speedtest .twoip-gauge-rim .content .realtime #tool-speed .twoip-speedometer-decimal:empty{width:.2em}
#speedtest .twoip-gauge-rim .content .realtime #tool-speed .twoip-speedometer-fraction{display:inline-block;width:1.28em;height:1.3em}
#speedtest .twoip-gauge-rim .content .realtime #tool-speed #tool-metrics,#speedtest .twoip-gauge-rim .content .realtime #tool-speed #tool-metrics:empty{width:3.5em;margin-inline-start:8px;text-align:left;transform:translateY(.8em)}
/* Ping has no fractional slots; keep the value and latency unit together. */
#speedtest .st-ping-readout{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
#speedtest #st-ping{font-variant-numeric:tabular-nums}

#speedtest .result-area .results {
  border-bottom: 1px solid var(--twoip-outline-variant);
}
#speedtest .result-area .results.info {
  border-bottom: none;
  position: relative;
  top: 10px;
  margin-top: 0;
  font-size: 120%;
  color: var(--twoip-link-text);
}
#speedtest .result-area .results .twoip-icon {
  top: 1px;
}
#speedtest .result-area .results .twoip-icon {
  color: var(--st-icon-color);
}
#speedtest .result-area .results .data {
  font-size: clamp(24px, 5cqw, 40px);
  font-family: '2ip-bold';
}
#speedtest :is(#chart-download,#chart-upload) :is(.highcharts-grid-line,.highcharts-minor-grid-line) {
  stroke: var(--twoip-outline-variant);
}
#speedtest .twoip-speedtest-graph {
  height:var(--st-chart-height);min-height:var(--st-chart-height);max-height:var(--st-chart-height);width:100%;min-width:0;overflow:hidden;
  opacity: 0; transition: opacity var(--twoip-speedometer-stage-duration, 180ms) ease-out;
}
#speedtest .twoip-speedtest-graph[data-graph-ready=true] { opacity: 1; }
#speedtest .result-area .results > .twoip-latency-row,
#speedtest .result-area .results > .row > :is(.measure-header,.text-end) { min-block-size: var(--twoip-speedtest-summary-height, 69px); }
#speedtest #speedo-ping { --twoip-speedtest-metric-accent: var(--twoip-chart-upload); }
#speedtest #speedo-down { --twoip-speedtest-metric-accent: var(--twoip-chart-upload); }
#speedtest #speedo-up { --twoip-speedtest-metric-accent: var(--twoip-chart-upload); }
#speedtest .result-area .results[data-measurement-state=active] { border-bottom-color: var(--twoip-speedtest-metric-accent); }
#speedtest :is(#speedo-ping,#speedo-down,#speedo-up):is([data-measurement-state=pending],[data-measurement-state=cancelled]) .data { color: var(--twoip-on-surface-variant); }
@media (prefers-reduced-motion: reduce) { #speedtest .twoip-speedtest-graph { transition: none !important; } }
/* Phase emphasis changes ink/weight only, never metric geometry or result colors. */
#speedtest .results[data-measurement-state=active] :is(.measure-header,.twoip-latency-label,.measure-header-ping) {
  color: var(--twoip-on-surface);
  font-weight: 700;
}
#speedtest .results[data-measurement-state=complete] :is(.measure-header,.twoip-latency-label,.measure-header-ping) {
  color: var(--twoip-on-surface);
}
#speedtest .result-area .results .data.ping {
  color: var(--twoip-on-surface);
}
/* Equal latency metrics, one divider; raw samples have no chart presentation. */
#speedtest #speedo-ping { container-type: inline-size; }
#speedtest .twoip-latency-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#speedtest .twoip-latency-metric { display: flex; flex-direction: column; align-items: flex-start; gap: var(--twoip-space-1, 4px); min-width: 0; }
#speedtest .twoip-latency-metric + .twoip-latency-metric { border-inline-start: 1px solid var(--twoip-outline-variant); padding-inline-start: var(--twoip-space-4, 16px); }
#speedtest .twoip-latency-label { display: inline-flex; align-items: center; gap: var(--twoip-space-2, 8px); color: var(--twoip-on-surface-variant); white-space: nowrap; }
#speedtest .twoip-latency-label .twoip-icon { position: static; margin: 0; font-size: 1em; }
@media (min-width: 1024px) {
  #speedtest #speedo-ping { --twoip-speedtest-summary-height: 0px; }
  #speedtest .twoip-latency-metric { flex-direction: row; align-items: baseline; gap: var(--twoip-space-1, 4px); }
  #speedtest .twoip-latency-metric + .twoip-latency-metric { padding-inline-start: var(--twoip-space-1, 4px); }
  #speedtest .twoip-latency-label { gap: var(--twoip-space-1, 4px); }
}
#speedtest .result-area .results .data:is(.download,.upload) {color:var(--twoip-primary);white-space:nowrap;text-align:right}
#speedtest .result-area .additionalres_name {color:var(--twoip-on-surface-variant)}
#speedtest .result-area .additionalres_data {font-family:'2ip-bold'}
#speedtest .result-area .measure-header {color:var(--twoip-on-surface-variant)}

#info-area .result-area-graph {display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#info-area .result-area-graph>.results {min-width:0}
#info-area .result-area {padding:0;width:100%}
#info-area .st-information {margin-top:var(--st-information-top-gap,16px)}
#info-area .st-information dd {margin:0}
#info-area .st-information .data {min-width:0;overflow-wrap:anywhere}
#info-area .st-information .data {display:flex;align-items:center;gap:8px}
#info-area .st-information .data>span {min-width:0;overflow-wrap:anywhere}
#info-area .st-information :is(.data>i,dd>i,.server-change>i) {flex:0 0 var(--st-field-icon-size);width:var(--st-field-icon-size);font-size:var(--st-field-icon-size);color:var(--st-icon-color)}
#info-area .st-information #speedo-ping .data {font:inherit}
.st-full-value{
  position:fixed;
  z-index:1040;
  max-width:min(400px,calc(100vw - 16px));
  padding:8px 12px;
  background:var(--twoip-surface);
  color:var(--twoip-on-surface);
  border:1px solid var(--twoip-outline-variant);
  border-radius:8px;
  overflow-wrap:anywhere;
  pointer-events:none}

/* Compact desktop density is scoped to the tester, never mobile or the page.
   The dial follows available height; short windows retain natural scrolling. */
@media (min-width:1200px) and (max-height:1000px) {
 #speedtest {
  --st-dial-max:clamp(560px,calc(100dvh - 290px),610px);
  --st-information-height:46px;
  --st-information-padding-block:0px;
  --st-information-gap:6px;
  --st-information-top-gap:12px;
  --st-summary-height:58px;
  --st-summary-padding:4px;
  --st-heading-gap:16px;
  padding-block-start:24px;
 }
 #speedtest .status-bar {padding-top:8px}
}
@media (min-width:1200px) and (max-height:800px) {
 #speedtest {--st-heading-gap:12px;padding-block-start:16px}
}

/* Both columns use their content minimum; charts absorb the available height.
   No fixed workspace height, ad spacer or clipped connection fields. */
@media (min-width:1200px) {
 #info-area {display:flex;flex-direction:column}
 #info-area .result-area {display:flex;flex:1 1 0;min-height:308px}
 #info-area .result-area-graph {flex:1;grid-template-rows:repeat(2,minmax(150px,1fr));width:100%}
 #info-area .result-area-graph>.results {display:flex;flex-direction:column;min-height:0}
 #info-area .st-metric-summary {flex-shrink:0}
 #speedtest .twoip-speedtest-graph {flex:1 1 0;height:auto;min-height:80px;max-height:none}
}

/* Compact desktop values share the existing keyboard/touch full-value tooltip.
   Mobile values keep natural wrapping and the same 52px row minimum. */
@media (min-width:1200px) {
 #info-area .st-information dd>.data:not(.ping) {flex:1}
 #info-area .st-information .data>span {overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}