/* ============================================================
   xSpeed — speed.css
   Gestapeltes Layout: große Hero-Kachel (Live-Wert + Equalizer +
   Start-Button) oben, darunter eine 3-spaltige Reihe (Ping/Download/
   Upload), darunter die Info-Kachel — alle gleich breit. Baut
   konsequent auf Shared-Komponenten auf (.panel, .stat-block,
   .tab-bar-pills) — nur Layout/Positionierung und das
   Hero-Mesh/Equalizer-Delta sind seitenspezifisch.
   ============================================================ */

.speed-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
    padding-top: var(--page-gap);
    padding-bottom: var(--page-gap);
    max-width: 640px;
}

/* ------------------------------------------------------------
   Gestapeltes Layout
   ------------------------------------------------------------ */

.speed-bento {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    text-align: left;
}

/* ------------------------------------------------------------
   Hero — Live-Kachel mit Gradient-Mesh + Equalizer
   ------------------------------------------------------------ */

.speed-hero {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.speed-hero-mesh {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 25% 20%, var(--accent-glow), transparent 55%),
        radial-gradient(circle at 80% 85%, var(--accent-subtle), transparent 50%);
    filter: blur(40px);
    opacity: 0.7;
    animation: speedMeshDrift 14s ease-in-out infinite alternate;
}

@keyframes speedMeshDrift {
    to { transform: translate(4%, -3%) scale(1.06); }
}

.speed-hero-top,
.speed-hero-bottom {
    position: relative;
    z-index: var(--z-content);
}

.speed-hero-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.speed-hero-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-top: var(--space-2);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}

.speed-hero-unit {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-subtle);
    margin-left: var(--space-1);
}

.speed-hero-phase {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   var(--text-sm);
    font-weight: 500;
    margin-top:  var(--space-2);
    min-height:  1.2em;
}

#live-phase {
    color: var(--accent);
}

#speed-result-date {
    color:      var(--text-muted);
    font-weight: 400;
}

#speed-result-date[hidden] { display: none; }

.speed-hero.is-done { border-color: rgba(76, 175, 130, 0.4); }
.speed-hero.is-done .speed-hero-phase { color: var(--color-success); }
.speed-hero.is-error { border-color: rgba(232, 85, 85, 0.4); animation: shake 0.4s ease; }
.speed-hero.is-error .speed-hero-phase { color: var(--color-danger); }

/* Equalizer — rein zeitbasierte Aktivitätsanzeige, kein echter Fortschritt */
.speed-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    margin-bottom: var(--space-4);
}

.speed-eq span {
    flex: 1;
    background: var(--accent);
    border-radius: var(--radius-sm);
    opacity: 0.5;
    height: 16%;
    transition: height 0.12s ease, opacity 0.2s ease, background 0.25s ease;
}

.speed-eq.is-done span {
    background: var(--color-success);
    opacity: 0.8;
}

.speed-start-btn {
    width: 100%;
}

/* ------------------------------------------------------------
   Metriken-Reihe — Ping / Download / Upload, gleich breit
   ------------------------------------------------------------ */

.speed-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* .speed-bento ist auf max. 640px gedeckelt — eine Container Query
   auf sich selbst wäre hier sinnlos (nie relevant über 640px hinaus).
   900px statt eines knappen Werts nahe 640px, damit genug Puffer
   bleibt und kein Flackern nahe der Umbruchgrenze entsteht (identischer
   Wert wie in der Dashboard-Variante, siehe speedtest.css). */
@media (max-width: 900px) {
    .speed-metrics-row {
        grid-template-columns: 1fr;
    }
}

.speed-side {
    display: flex;
    align-items: center;
    border-left: 3px solid var(--border);
    transition: border-color var(--transition);
}

.speed-side.is-active {
    border-left-color: var(--accent);
    animation: pulseAccent 1.6s ease-in-out infinite;
}

.speed-side.is-done {
    border-left-color: var(--color-success);
}

.speed-side-stat {
    align-items: flex-start;
    text-align: left;
}

.speed-side-stat .stat-value {
    white-space: nowrap;
}

.speed-side-stat .stat-value small {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    margin-left: var(--space-1);
}

/* ------------------------------------------------------------
   Info-Kachel
   ------------------------------------------------------------ */

.speed-foot[hidden] { display: none; }

@keyframes sharePanelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.speed-foot.fade-in {
    animation: sharePanelFadeIn 0.3s ease forwards;
}

.speed-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6);
}

.speed-info {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    text-align: center;
}

.speed-info a {
    color: var(--accent);
    white-space: nowrap;
}

.speed-info strong {
    color: var(--text-secondary);
}


/* ------------------------------------------------------------
   Share-Row
   ------------------------------------------------------------ */

.speed-share-row {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    width:          100%;
    margin-top:     var(--space-2);
}

.speed-share-url-row:not([hidden]) {
    display: flex;
    gap:     var(--space-2);
    width:   100%;
}

.share-url-input {
    flex:          1;
    min-width:     0;
    height:        40px;
    padding:       0 var(--space-3);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--surface-2);
    color:         var(--text-secondary);
    font-size:     var(--text-sm);
    font-family:   var(--font-mono);
    cursor:        text;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.speed-share-url-row .btn {
    flex: 0 0 50%;
}

@media (prefers-reduced-motion: reduce) {
    .speed-hero-mesh { animation: none; }
}