/* 応答速度(TTFB)測定 */
.sp-lead { font-size: 16px; margin: 0 0 10px; }
.sp-form .form-control { max-width: 100%; }
.sp-opts { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sp-opt { min-width: 140px; }
.sp-status { margin-left: 10px; font-size: 13px; color: #555; }
.sp-error { padding: 10px 12px; margin-bottom: 14px; border: 1px solid #ebccd1; background: #f2dede; color: #a94442; font-size: 13px; border-radius: 3px; word-break: break-all; }
.sp-summary { padding: 12px 14px; margin-bottom: 14px; border: 1px solid #ddd; background: #f5f5f5; border-radius: 3px; font-size: 13px; }
.sp-sum-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.sp-sum-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.sp-note { margin: 6px 0 0; color: #444; }
.sp-title { font-size: 15px; margin: 18px 0 8px; border-bottom: 1px solid #e3e3e3; padding-bottom: 4px; }
.sp-sub { font-size: 14px; margin: 14px 0 6px; }
.sp-muted { color: #555; font-size: 13px; margin: 4px 0; word-break: break-word; }
.sp-items { padding-left: 20px; font-size: 13px; }

.sp-badge { display: inline-block; box-sizing: border-box; width: 5.5em; flex: none; text-align: center; padding: 1px 4px; border-radius: 3px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.sp-badge.sp-l-ok { background: #dff0d8; color: #3c763d; }
.sp-badge.sp-l-info { background: #d9edf7; color: #31708f; }
.sp-badge.sp-l-warn { background: #fcf8e3; color: #8a6d3b; }
.sp-badge.sp-l-bad { background: #f2dede; color: #a94442; }
.sp-badge.sp-l-unknown { background: #e8dff5; color: #5b3a8c; }
.sp-badge.sp-l-skip { background: #eee; color: #555; }

/* 内訳の横棒 */
.sp-bar-wrap { margin: 6px 0 10px; }
.sp-bar { display: flex; width: 100%; height: 22px; border-radius: 3px; overflow: hidden; background: #eee; }
.sp-bar-small { height: 10px; }
.sp-seg { display: block; height: 100%; flex: none; }
.sp-seg-connect { background: #4e79a7; }
.sp-seg-tls { background: #9c6ade; }
.sp-seg-wait { background: #e8833a; }
.sp-seg-transfer { background: #59a14f; }
.sp-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.sp-legend li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.sp-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }

/* 表 */
.sp-kv, .sp-grid { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.sp-kv th, .sp-kv td, .sp-grid th, .sp-grid td { border: 1px solid #e3e3e3; padding: 5px 8px; vertical-align: top; text-align: left; }
.sp-grid th { background: #f5f5f5; white-space: nowrap; }
.sp-kv td.sp-label, .sp-grid td.sp-label { background: #fafafa; font-weight: bold; color: #2c3e50; white-space: nowrap; width: 1%; }
.sp-kv td.sp-value { word-break: break-all; }
.sp-grid td.sp-num { white-space: nowrap; text-align: right; }
.sp-grid td.sp-state { word-break: break-word; }

/* リダイレクトの段 */
.sp-hops { padding-left: 22px; margin: 0; }
.sp-hop { margin-bottom: 10px; font-size: 13px; }
.sp-hop-head { display: flex; align-items: flex-start; gap: 8px; }
.sp-code { flex: none; font-weight: bold; }
.sp-url { min-width: 0; word-break: break-all; }
.sp-hop-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; }

.sp-copy { margin-top: 10px; }
.sp-related { margin-top: 16px; font-size: 13px; }

@media (max-width: 600px) {
	.sp-kv td.sp-label, .sp-grid td.sp-label { width: auto; white-space: normal; word-break: keep-all; }
	/* 列の多い表(区間の表・回ごとの表)は、行ごとの縦のカードに組み替える */
	.sp-grid thead { display: none; }
	.sp-grid, .sp-grid tbody, .sp-grid tr, .sp-grid td { display: block; width: auto; }
	.sp-grid tr { border: 1px solid #e3e3e3; border-radius: 3px; margin-bottom: 8px; }
	.sp-grid td, .sp-grid td.sp-num { border: none; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; gap: 10px; text-align: right; white-space: normal; }
	.sp-grid td:last-child { border-bottom: none; }
	.sp-grid td::before { content: attr(data-label); font-weight: bold; color: #2c3e50; text-align: left; flex: none; word-break: keep-all; }
	.sp-grid td.sp-label { background: #fafafa; }
	.sp-grid td.sp-label::before { content: none; }
	.sp-grid td.sp-state, .sp-grid td.sp-desc { display: block; text-align: left; }
	.sp-grid td.sp-desc::before { content: none; }
	.sp-grid td.sp-desc { color: #555; }
}